以下のソースを使って

絵文字のポップアップ表示をしたいのですが
うまく動きません・・

http://d.hatena.ne.jp/chirubo/20090213/1234490813
こちらのjavascriptを動かすにはどうしたらいいのでしょうか?

やったこと・・
emojiIcon['000'] = './emoticons/airplane.gif';
emojiIcon['001'] = './emoticons/angry.gif';
同様に以下の部分も修正。
css('background','url(./emoji_all.gif) no-repeat #FFFFFF');
<img src="./blank.gif" alt="'+obj+'"

とパスを指定しファイルは存在します。

以下のjqueryを使いたいと思ってます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

皆様のお力を貸して頂けると助かります。

回答の条件
  • 1人10回まで
  • 13歳以上
  • 登録:2011/02/23 15:30:42
  • 終了:2011/03/02 15:35:02

回答(5件)

id:mattn No.1

mattn回答回数104ベストアンサー獲得回数232011/02/23 19:11:10

ポイント20pt

もとURLのコードがいけてない感じだったので、大きく書き換えました。

ほとんど同じ動作だとは思いますが。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style>
#emoji-popup a { border: 1px solid transparent; }
#emoji-popup .active-emoji { border: 1px solid black; }
</style>
<script>
$(function() {
	// 全部を表示したい場合は、下のbackgroundを有効にして、以下のiconsを
	// 綺麗にならべて下さい。その際画像URLは半透明pngかなんかで置き換えてokです。
	// 全部出して良い、もしくは一部しか使いたくない場合は、以下の様に並べて
	// 下さい。
	var icons = {
		'[:airplane:]': './emoticons/airplane.gif',
		'[:angry:]': './emoticons/angry.gif'
		// 必要なだけ
	};

	$.fn.extend({
		insertAtCaret: function(myValue){
			return this.each(function(i) {
				if (document.selection) {
					this.focus();
					sel = document.selection.createRange();
					sel.text = myValue;
					this.focus();
				}
				else if (this.selectionStart || this.selectionStart == '0') {
					var startPos = this.selectionStart;
					var endPos = this.selectionEnd;
					var scrollTop = this.scrollTop;
					this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
					this.focus();
					this.selectionStart = startPos + myValue.length;
					this.selectionEnd = startPos + myValue.length;
					this.scrollTop = scrollTop;
				} else {
					this.value += myValue;
					this.focus();
				}
			})
		}
	});

	$('#emoji-popup-button').click(function() {
		var popup = $('#emoji-popup')[0];
		if (!popup) {
			popup = $('<div/>').attr('id', 'emoji-popup').css({
				// 必要ならば...
				//background:'url(emoticons.gif) no-repeat #FFFFFF'
				width: '400px',
				height: '100px',
				padding: '2px',
				zIndex: '99',
				position: 'absolute',
				border: '1px solid black',
				display: 'none',
			});
			$.each(icons, function(k, v){
				$('<a/>').attr('id', k)
					.append($('<img/>').attr('src', v))
					.hover(
						function() { $(this).attr('class', 'active-emoji') },
						function() { $(this).removeAttr('class') }
					)
					.click(function() {
						$('#emoji-text').insertAtCaret(this.id);
					})
					.appendTo(popup);
			});
			$(popup).appendTo(document.body);
		} 
		$(popup).is(':visible') ? $(popup).slideUp() : $(popup).slideDown();
	})
});
</script>
</head>
<body>
<textarea id="emoji-text"></textarea><br />
<input type="button" id="emoji-popup-button" value="clickme" />
</body>
</html>
id:hopefully

おお、ありがとうございます。

ちょっと追加でお願いしたいのですが

アイコンをクリックしたら、絵文字のパレットが閉じるよう

お願いしたいのですが、可能でしょうか?

それと、パレット外部をクリックしても閉じるように

したいのです。

いろいろ、追加でお願いしてしまって申し訳ありませんが

よろしくおねがいします。

2011/02/23 19:27:38
id:mattn No.2

mattn回答回数104ベストアンサー獲得回数232011/02/23 19:35:13

ポイント20pt

コメント欄が有効じゃなかったので、も一つ回答になりますが


<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style>
#emoji-popup a { border: 1px solid transparent; }
#emoji-popup .active-emoji { border: 1px solid black; }
</style>
<script>
$(function() {
	// 全部を表示したい場合は、下のbackgroundを有効にして、以下のiconsを
	// 綺麗にならべて下さい。その際画像URLは半透明pngかなんかで置き換えてokです。
	// 全部出して良い、もしくは一部しか使いたくない場合は、以下の様に並べて
	// 下さい。
	var icons = {
		'[:airplane:]': './emoticons/airplane.gif',
		'[:angry:]': './emoticons/angry.gif'
		// 必要なだけ
	};

	$.fn.extend({
		insertAtCaret: function(myValue){
			return this.each(function(i) {
				if (document.selection) {
					this.focus();
					sel = document.selection.createRange();
					sel.text = myValue;
					this.focus();
				}
				else if (this.selectionStart || this.selectionStart == '0') {
					var startPos = this.selectionStart;
					var endPos = this.selectionEnd;
					var scrollTop = this.scrollTop;
					this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
					this.focus();
					this.selectionStart = startPos + myValue.length;
					this.selectionEnd = startPos + myValue.length;
					this.scrollTop = scrollTop;
				} else {
					this.value += myValue;
					this.focus();
				}
			})
		}
	});

	$('#emoji-popup-button').click(function() {
		var popup = $('#emoji-popup')[0];
		if (!popup) {
			popup = $('<div/>').attr('id', 'emoji-popup').css({
				// 必要ならば...
				//background:'url(emoticons.gif) no-repeat #FFFFFF'
				width: '400px',
				height: '100px',
				padding: '2px',
				zIndex: '99',
				position: 'absolute',
				border: '1px solid black',
				display: 'none',
			});
			$.each(icons, function(k, v){
				$('<a/>').attr('id', k)
					.append($('<img/>').attr('src', v))
					.hover(
						function() { $(this).attr('class', 'active-emoji') },
						function() { $(this).removeAttr('class') }
					)
					.click(function() {
						$('#emoji-text').insertAtCaret(this.id);
						$('#emoji-popup').fadeOut(); // 消す
					})
					.appendTo(popup);
			});
			$(popup).appendTo(document.body);
		} 
		$(popup).is(':visible') ? $(popup).slideUp() : $(popup).slideDown();
	})
});
</script>
</head>
<body>
<textarea id="emoji-text"></textarea><br />
<input type="button" id="emoji-popup-button" value="clickme" />
</body>
</html>

「消す」とコメントを入れた部分だけ追加です。

id:mattn No.3

mattn回答回数104ベストアンサー獲得回数232011/02/23 19:44:19

ポイント20pt

すみません。後半部分読んでなかったです... orz

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style>
#emoji-popup a { border: 1px solid transparent; }
#emoji-popup .active-emoji { border: 1px solid black; }
</style>
<script>
$(function() {
	// 全部を表示したい場合は、下のbackgroundを有効にして、以下のiconsを
	// 綺麗にならべて下さい。その際画像URLは半透明pngかなんかで置き換えてokです。
	// 全部出して良い、もしくは一部しか使いたくない場合は、以下の様に並べて
	// 下さい。
	var icons = {
		'[:airplane:]': './emoticons/airplane.gif',
		'[:angry:]': './emoticons/angry.gif'
		// 必要なだけ
	};

	$.fn.extend({
		insertAtCaret: function(myValue){
			return this.each(function(i) {
				if (document.selection) {
					this.focus();
					sel = document.selection.createRange();
					sel.text = myValue;
					this.focus();
				}
				else if (this.selectionStart || this.selectionStart == '0') {
					var startPos = this.selectionStart;
					var endPos = this.selectionEnd;
					var scrollTop = this.scrollTop;
					this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
					this.focus();
					this.selectionStart = startPos + myValue.length;
					this.selectionEnd = startPos + myValue.length;
					this.scrollTop = scrollTop;
				} else {
					this.value += myValue;
					this.focus();
				}
			})
		}
	});

	$('#emoji-popup-button').click(function() {
		var popup = $('#emoji-popup')[0];
		if (!popup) {
			popup = $('<div/>').attr('id', 'emoji-popup').css({
				// 必要ならば...
				//background:'url(emoticons.gif) no-repeat #FFFFFF'
				width: '400px',
				height: '100px',
				padding: '2px',
				zIndex: '99',
				position: 'absolute',
				border: '1px solid black',
				display: 'none',
			});
			$.each(icons, function(k, v){
				$('<a/>').attr('id', k)
					.append($('<img/>').attr('src', v))
					.hover(
						function() { $(this).attr('class', 'active-emoji') },
						function() { $(this).removeAttr('class') }
					)
					.click(function() {
						$('#emoji-text').insertAtCaret(this.id);
						$('#emoji-popup').fadeOut(); // 消す
					})
					.appendTo(popup);
			});
			$(popup).appendTo(document.body)
		} 
		$(popup).is(':visible') ? $(popup).slideUp() : $(popup).slideDown(function() {
			$(document.body).click(function() {
				$(this).unbind('click');
				$(popup).slideUp();
			});
		});
	})
});
</script>
</head>
<body>
<textarea id="emoji-text"></textarea><br />
<input type="button" id="emoji-popup-button" value="clickme" />
</body>
</html>
id:hopefully

いろいろな要望に答えて頂き

ありがとうございます。

おっと、IE8だと動かないですね・・

困りました・・

後ですね、最後の追加になりますが

<textarea id="emoji-text"></textarea>

<input type="button" id="emoji-popup-button" value="clickme" />

この部分を複数置きたいと思ってます・・

2011/02/24 10:52:16
id:mattn No.4

mattn回答回数104ベストアンサー獲得回数232011/02/24 17:42:52

ポイント20pt

IE8でも動くように直しました。

あと、ボタン位置を求める為に jquery dimension を足しました。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.dimensions.min.js"></script>
<style>
#emoji-popup a { border: 1px solid transparent; }
#emoji-popup .active-emoji { border: 1px solid black; }
</style>
<script>
$(function() {
	// 全部を表示したい場合は、下のbackgroundを有効にして、以下のiconsを
	// 綺麗にならべて下さい。その際画像URLは半透明pngかなんかで置き換えてokです。
	// 全部出して良い、もしくは一部しか使いたくない場合は、以下の様に並べて
	// 下さい。
	var icons = {
		'[:airplane:]': './emoticons/airplane.gif',
		'[:angry:]': './emoticons/angry.gif'
		// 必要なだけ
	};

	$.fn.extend({
		insertAtCaret: function(myValue){
			return this.each(function(i) {
				if (document.selection) {
					this.focus();
					sel = document.selection.createRange();
					sel.text = myValue;
					this.focus();
				}
				else if (this.selectionStart || this.selectionStart == '0') {
					var startPos = this.selectionStart;
					var endPos = this.selectionEnd;
					var scrollTop = this.scrollTop;
					this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
					this.focus();
					this.selectionStart = startPos + myValue.length;
					this.selectionEnd = startPos + myValue.length;
					this.scrollTop = scrollTop;
				} else {
					this.value += myValue;
					this.focus();
				}
			})
		}
	});

	$('.emoji-text').each(function() {
		var text = this;
		var button = $('<input/>')
			.attr({type: "button", value: "clickme"})
			.addClass('.emoji-popup-button')
			.click(function() {
				var popup = $('#emoji-popup')[0];
				if (!popup) {
					popup = $('<div/>').attr('id', 'emoji-popup').css({
						// 必要ならば...
						//background:'url(emoticons.gif) no-repeat #FFFFFF',
						background:'no-repeat #FFFFFF',
						width: '400px',
						height: '100px',
						padding: '2px',
						zIndex: '99',
						position: 'absolute',
						border: '1px solid black',
						display: 'none'
					});
					$.each(icons, function(k, v){
						$('<a/>').attr('id', k)
							.append($('<img/>').attr('src', v))
							.hover(
								function() { $(this).addClass('active-emoji') },
								function() { $(this).removeClass('active-emoji') }
							)
							.appendTo(popup);
					});
					$(popup).appendTo(document.body)
				} 
				if ($(popup).is(':visible')) {
					$(popup).slideUp();
				} else {
					$('a', popup).unbind('click').click(function() {
						$(text).insertAtCaret(this.id);
						$('#emoji-popup').fadeOut(); // 消す
					})
					$(popup).css({
						left: $(button).position().left + 'px',
						top: $(button).position().top + $(text).outerHeight() + 'px'
					}).slideDown(function() {
						$(document.body).click(function() {
							$(this).unbind('click');
							$(popup).slideUp();
						});
					});
				}
			}
		);
		$(text).after(button);
	});
});
</script>
</head>
<body>
<textarea id="text1" class="emoji-text"></textarea><br />
<br />
<textarea id="text2" class="emoji-text"></textarea><br />
</body>
</html>
id:hopefully

IE8で確認出来ました。ありがとうございます。

後、F5をたくさん押しちゃうと、textareaに入っている値が

消えちゃうのですが、それは仕方ないんですかね?

2011/02/24 17:57:22
id:mattn No.5

mattn回答回数104ベストアンサー獲得回数232011/02/24 19:09:38

ポイント20pt
IE8で確認出来ました。ありがとうございます。
後、F5をたくさん押しちゃうと、textareaに入っている値が
消えちゃうのですが、それは仕方ないんですかね?

そうですね。cookie使えば保存できなくないですが、本件と違う話かと思います。:)

jquery-cookieを使うと簡単に保存出来ますよ。

id:hopefully

なるほどー。

いろいろ、お願いして申し訳ありませんでした。

大変、ありがとうございます。

すいません、たびたび・・・

出来れば、<textarea id="text1" class="emoji-text"></textarea>

こちらに ボタンを生成しないように出来ますかね?

2011/03/01 17:07:44
  • id:mattn
    ボタンがなくなった場合、アクションは何ですか?マウスを持ってきたとき?それともクリックですか?
    ポップアップを開く時もそうですが、閉じる時のアクションも必要ですね。
  • id:hopefully
    あ、すいません。
    ボタンはあってもいいのですが
    今、jacascript側でボタンの生成を
    しちゃっているので、出来れば
    その生成をやめて、ボタンは別に設置したいと思ってます。

    textareaの部分に、JQueryのautorize プラグインを設定すると
    2個ボタンが出来ちゃうので。。
    申し訳ありません。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません