人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

以下のソースを使って
絵文字のポップアップ表示をしたいのですが
うまく動きません・・

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>

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


●質問者: hopefully
●カテゴリ:就職・転職 ウェブ制作
✍キーワード:background CSS GIF JavaScript jQuery
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● mattn
●20ポイント

もと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>
◎質問者からの返答

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

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

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

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

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

したいのです。

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

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


2 ● mattn
●20ポイント

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


<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>

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


3 ● mattn
●20ポイント

すみません。後半部分読んでなかったです... 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>
◎質問者からの返答

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

ありがとうございます。

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

困りました・・

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

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

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

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


4 ● mattn
●20ポイント

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>
◎質問者からの返答

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

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

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


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

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

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

◎質問者からの返答

なるほどー。

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

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

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ