スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。



HTMLでコンボボックス風に マウス長押しで切替えてみる

HTMLのformタグにはコンボボックスがありません。codessさんのマウス長押しハンドリングのライブラリを使って、ちょい長押しでテキストボックスに切り替えてみた。IEでは動いているが、firefoxは長押しがきかず、chromeは切り替えがきかない。なんでだろう。

←サンプルデモ。マウスで長押しでトグル。

jQueryライブラリのmouse_action.jsは上記リンクにあるデモページからいただきました。

上のサンプルデモのソース
<span class="mouseaction">
<select id="downlist">
<option value="クルーグマンと">クルーグマンと</option>
<option value="池田信夫って">池田信夫って</option>
<option value="似てる?">似てる?</option>
</select>
<input type=text id="txtbox" value=""/>
</span>
長押しイベントをアイヤーさせたいタグにclass="mouseaction"します。
<script type="text/javascript">
$('.mouseaction').mousedown(MouseAction._down);
$('.mouseaction').mouseup(MouseAction._up);
$('.mouseaction').mouseover(MouseAction._over);
$('.mouseaction').mouseout(MouseAction._out);
$('.mouseaction').click(MouseAction._click);
$(txtbox).toggle();

MouseAction.click = function(){;}
MouseAction.press = function(){
  txtbox.value = downlist.options[downlist.options.selectedIndex].value;
  $(downlist).toggle();
  $(txtbox).toggle();
}
</script>
プルダウンリストで表示されている値を取ってテキストボックスの値にします。
このサンプルでは使ってませんが、イベント発生元のノードオブジェクト(e)はこちらからでもアクセスできます。

mirrorManにも入れたのでversionは2.04です。IE6環境ではうまく動きませんでしたが、もう知りません。
mirrorMan204.png
スポンサーサイト



comment

Secret

while(aho.atEndofStream)

笹部 政宏
笹部 政宏
mail




フリーソフツ
Category
はてブ
Monthly Archive
New Entry
New Comment
New Trackback
RSS
Copyright © Kittens flewby me All Rights Reserved.

FC2Ad

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。