tianlang @ ウィキ

チェックボックスshiftキー複数選択の実現

最終更新：2010年04月21日 18:54

匿名ユーザー

- view

だれでも歓迎！編集

Gmailのように「shift + クリック」でチェックボックスの複数選択を可能にするjQueryプラグイン
Gmailはチェックボックスを複数一気に選択したいときに先頭をまずクリックして、次に最後のチェックボックスを【シフト+クリック】するとその間にあるチェックボックスが一気に選択できて非常に便利なのですが、それをjQueryプラグインで実現するには以下のようにします。

■ 1.jQueryをダウンロード

http://jquery.com/ [^]

からjQueryをダウンロードします。（ダウンロードしたファイル名を jquery.js とします。）

■ 2. jQuery Field Plug-inをダウンロード

http://www.pengoworks.com/workshop/jquery/field/field.plugin.htm [^]

から【jquery.field.js】をダウンロードします。

■ 3. 以下のようなチェックボックスを含むhtmlを用意します

 <input type="checkbox" name="user_id" id="chkRange_1" value="1" />
 <label for="chkRange_1">Option 1</label>

 <input type="checkbox" name="user_id" id="chkRange_2" value="2" />
 <label for="chkRange_2">Option 2</label>
       
 <input type="checkbox" name="user_id" id="chkRange_3" value="3" />
 <label for="chkRange_3">Option 3</label>
   
 <input type="checkbox" name="user_id" id="chkRange_4" value="4" />
 <label for="chkRange_4">Option 4</label>
       
 <input type="checkbox" name="user_id" id="chkRange_5" value="5" />
 <label for="chkRange_5">Option 5</label>

</form>

■ 4. 用意したhtmlのヘッダに以下の記述を追加

（ j$ としているのはprototype.js とのコンフリクト回避のためです。）

jQuery.noConflict();
var j$ = jQuery;

   j$(document).ready(
       function (){
           j$('input[@name="user_id"]').createCheckboxRange();
       }
   );

</script>

以上で「シフト+クリック」による複数選択が実行できます。

便利。

No.591

03/10 16:30

jQuery

最も簡単な画像のロールオーバー導入方法
■ jQuery用プラグイン　jQuery_auto を使用します。

prototype.js とのコンフリクト解消版 jquery_auto はこちらからダウンロード↓

http://logic.stepserver.jp/data_other/jquery_auto_j.zip [^]

■ 1. scriptファイルを読み込ませます

■ 2. ロールオーバー画像ファイル名の最後に _over をつける。

例：　【image.gif】の場合　【image_over.gif】

■ 3. HTMLの＜img＞タグに属性 class="Hover" を追加する

以上の手順で完了。

簡単です。

参考：http://sputnik.pl/code/javascript/jquery_auto [^]

No.579

12/29 17:48

prototype.js
jQuery

del.icio.us風タグメニューを実装するjQueryプラグイン「tagto」
del.icio.us風タグメニューを実装するjQueryプラグインがなかなか便利です。日本語タグもOK（UTF-8, euc-jp）

■ tagto
http://realazy.org/projects/tagto/ [^]

■ コード例（ j$ としてprototype.js とのコンフリクトを回避しています）

j$(document).ready(function(){

   j$('#tag_area').tagTo('#tag_name', ',', 'tag_selected');

});
</script>

</head>
<body>

<h2>del.icio.us 風タグのDemo</h2>
<div>

   <input type="text" id="tag_name" name="tag_name">

</div>
<strong>Tags:</strong>
<div id="tag_area">

   # # # # # #

</div>

</body>
</html>

No.568

11/15 14:50

jQuery

jQuery , prototype.js 用「ツールチップ（吹き出し説明）」表示ライブラリ
「ツールチップ」とはオンマウス時に表示される画像やテキストのことです。
Windows IEで画像の上にマウスを置いてしばらく待つとALT属性が見えるというアレですね。

これを簡単に実装するライブラリを紹介。jQuery、prototype.js プラグインで探してみました。
■ tooltip.js （要prototype.js ）
http://blog.innerewut.de/tooltip [^]

おすすめ！
導入が簡単でわかりやすい。
ツールチップとして表示させたい内容をhtmlで記述できるのでカスタマイズが簡単

■ cooltips （要prototype.js , script.aculo.us ）
http://www.wildbit.com/labs/cooltips/ [^]

フェードエフェクトで出現するツールチップ
ツールチップ枠のデザインはあらかじめ用意されたものを使用することになりそう…。

■ jTip A jQuery Tool Tip （要 jQuery ）
http://www.codylindley.com/blogstuff/js/jtip/ [^]

Ajaxで動的にツールチップの中身を読み込んで表示します。
日本語テキストを扱うにはハックする必要がありそう…。
ツールチップ枠のデザインはあらかじめ用意されたものを使用することになりそう…。

■ jQuery plugin: Tooltip （要 jQuery ）
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ [^]
title属性やファイル名をツールチップとして表示させるというライブラリ。
オンマウスになった瞬間に表示されます。

■ Flash Tooltips Using jQuery （要 jQuery ）
http://ioreader.com/2007/05/15/flash-tooltips-using-jquery/ [^]
Flashを使ったツールチップ
少し重い

その他 jQueryライブラリはこちらで取り上げられてます
http://coliss.com/articles/build-websites/operation/javascript/356.html [^]

No.564

01/17 16:40

jQuery
prototype.js

jQuery html()メソッドと DOM.innerHTML の違い
例えば id="hogehoge" の中身を書き換えるには

■ prototype.js + DOM の場合
var mytext='aiueo';
$('hogehoge').innerHTML=mytext;

■ jQueryの場合
var mytext='aiueo';
j$("#hogehoge").html(mytext);

と書けますが、このとき

var mytext=0;
$('hogehoge').innerHTML=mytext; // 0 が表示される
j$("#hogehoge").html(my); // 何も表示されない

という違いがあるようなので注意！

No.553

09/07 18:17

prototype.js
jQuery

window.onload 前でも DOM 処理が可能なら通知してくれる domready.js
JavaScriptでDOM操作を行うときはDOMツリーの完成を待ってから処理を行う必要があるため
window.onload を待って処理を行う必要があります。

しかし window.onload は全てのファイルの読み込み完了時に発生するイベントなので、DOMツリーの完成だけを待っている場合画像の読み込み等も待たなくてはならず、無駄が生じます。

そこでDOMツリーの完成を待つイベントを発生させるライブラリ domready.js ↓

[window.onload 前でも DOM 処理が可能なら通知してくれる domready.js - METAREAL](http://weblog.metareal.org/2007/07/10/domready-js-cross-browser-ondomcontentloaded/) [^]

ちなみに jQuery では **$(document).ready()** で実装されています。
例：

$(document).ready(function(){
alert('DOMツリーの読み込みが完了しました');
});

参考：[jQueryコア　ready event at jQuerist](http://jquerist.com/core-of-jquery-ready-event) [^]

prototype.js Version 1.6 で ** contentloaded** というメソッドで実装される予定

No.550

08/31 16:20

DOM
jQuery
prototype.js

jQuery と prototype.js を同時に使う。（$(); のコンフリクト回避）
jQueryとprototype.js を同時に使いたい場面がまれにあります。

そのとき

$('id_name');

といった書式を jQuery, prototype.js 共に持っているのですが、その動作（書式や戻り値）が違います。

例えば戻り値の場合、

prototype.js：DOMオブジェクトを返す
jQuery：jQueryオブジェクトを返す
という違いがあります。

そこで jQueryとprototype.jsを同時に使いたい場合は jQueryの $(); を違う名前に変更して使います。

jQuery.noConflict();
var j$ = jQuery;
</script>

</head>
<body></body>
</html>

真ん中の2行を追加します。

こうすることによって

jQuery

jQuery();
j$();

prototype.js

$();
として使用できます

No.499

09/08 12:45

jQuery
prototype.js

javascriptでXpath。jQueryを使ってDOM操作を行う
Xpathを記述できるフレームワークとして jQueryという便利なフレームワークがあります。例えば「 #wrapper というIDを持つDIVの中の #menuというIDを持つDIVの中の Aタグの中のIMGタグ」のオブジェクトが１行で取得できます。では早速使ってみます。

■ 使い方
1.　jQueryページhttp://jquery.com/ [^]から「Download jQuery (compressed) 19kb」をダウンロードする

2.　ダウンロードしたファイルを任意のパスにコピーし読み込ませる

■ prototype.js とのコンフリクト回避
<script>

jQuery.noConflict();
var j$ = jQuery;
</script>

でコンフリクトを回避しておきます。

■ ID, クラス名, タグ名による指定

jq_obj=j$("#hogehoge");

jq_obj=j$(".hogeclass");

jq_obj=j$("div");

■ こんな指定も出来ます
同ページ内へのリンクを抽出してその name="" を抜き出す j$('a[@href*="#"]').each(function(){ p = this.href.split('#'); name=p[1]; alert(name); });

■ サンプルソース
下記リンクをクリックしてソースを表示させて下さいサンプルソース1の実行サンプルソース2の実行サンプルソース3の実行

■ jQueryを使うコツ
jQueryを使うコツは基本的に全てjQueryオブジェクトを返します。（prototype.jsとここが違うので注意） DOMオブジェクトを返したいときは get() メソッドを使用します。

コーディング例：クラス名が icon_on の＜a＞タグの中の＜img＞タグを取得する
jq_obj=$("a[@class=icon_on]/img", $target); // jQueryオブジェクトを返す。
dom_obj=$("a[@class=icon_on]/img", $target).get(0); // DOMオブジェクトを返す。

jQuery 開発者向けメモ

参考： http://www.mikage.to/jquery/jquery_basic.html [^]

↑参考URL：http://logic.stepserver.jp/memo.cgi/category/3/tag/jQuery/ [^]

「チェックボックスshiftキー複数選択の実現」をウィキ内検索