prototype.jsベースフォーム要素の制御
- Control.SelectMultiple〔プルダウンメニューの複数選択をチェックボックスで操作可能に〕
Control.SelectMultiple
プルダウンメニューの複数選択をチェックボックスで操作可能に
2008/11/23
Control.SelectMultiple
prototype.js v1.6、scriptaculous.js v1.8（effects.js）、Livepipe UI（livepipe.js、selectmultiple.js）
プルダウンメニューの複数選択をチェックボックスで操作可能にするプラグイン。 「複数選択」リンクをクリックすると、プルダウンメニューのアイテムリストがポップアップ表示され、チェックボックスのON・OFFで複数選択できるようになります。【終了】ボタンをクリックすると、選択した値はプルダウンに反映されます。
設置イメージControl.SelectMultipleの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Control.SelectMultiple | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="/content/lib/prototype/prototype-1.6.0.3.js"></script>
<script type="text/javascript" src="/content/lib/scriptaculous/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/content/lib/livepipe-ui/livepipe.js"></script>
<script type="text/javascript" src="/content/lib/livepipe-ui/selectmultiple.js"></script>
<script type="text/javascript">
document.observe('dom:loaded',function(){
/* シンプルな例 */
new Control.SelectMultiple('select_multiple_one','select_multiple_options_one',{
//afterChange is completely optional, we just use it to show the viewer what the value of the select is in this case
afterChange: function(value){
$('select_multiple_one_value').value = value;
}
});
/* 応用例 */
var select_multiple_two = new Control.SelectMultiple('select_multiple_two','select_multiple_two_options',{
checkboxSelector: 'table.select_multiple_table tr td input[type=checkbox]',
nameSelector: 'table.select_multiple_table tr td.select_multiple_name',
afterChange: function(){
if(select_multiple_two && select_multiple_two.setSelectedRows) {
select_multiple_two.setSelectedRows();
}
$('select_multiple_two_value').value = $("select_multiple_two").value;
}
});
/* adds and removes highlighting from table rows */
select_multiple_two.setSelectedRows = function(){
this.checkboxes.each(function(checkbox){
var tr = $(checkbox.parentNode.parentNode);
tr.removeClassName('selected');
if(checkbox.checked)
tr.addClassName('selected');
});
}.bind(select_multiple_two);
select_multiple_two.checkboxes.each(function(checkbox){
$(checkbox).observe('click',select_multiple_two.setSelectedRows);
});
select_multiple_two.setSelectedRows();
/* link open and closing */
$('select_multiple_two_open').observe('click',function(event){
$(this.select).style.visibility = 'hidden';
new Effect.BlindDown(this.container,{
duration: 0.3
});
Event.stop(event);
return false;
}.bindAsEventListener(select_multiple_two));
$('select_multiple_two_close').observe('click',function(event){
$(this.select).style.visibility = 'visible';
$("select_multiple_two_value").value=$("select_multiple_two").value;
new Effect.BlindUp(this.container,{
duration: 0.3
});
Event.stop(event);
return false;
}.bindAsEventListener(select_multiple_two));
});
</script>
<style type="text/css">
#select_multiple_one,
#select_multiple_two { width:200px; }
#select_two_container { position:relative; }
.select_multiple_submit { background-image:url(/content/img/ajax/popup_footer.gif); background-image:top center; background-repeat:repeat-x; padding:10px; height:22px; text-align:right; }
.select_multiple_label { margin-left:5px; font-family:"Lucida Grande",Verdana; font-size:11px; }
.select_multiple_container { width:300px; position:absolute; top:0; left:0; z-index:500; border:1px solid #222; border-top:none; }
.select_multiple_container .select_multiple_header { background-image:url(/content/img/ajax/black_background.gif); background-repeat:repeat-x; background-position:top center; color:#eee; font-weight:bold; font-size:12px; margin:0; padding:7px 0 8px 10px; background-color:#000; }
table.select_multiple_table td { height:27px; border-bottom:1px solid #ddd; color:#333; font-size:11px; }
table.select_multiple_table tr.even { background-color:#fcfcfc; }
table.select_multiple_table tr.odd { background-color:#f7f7f7; }
table.select_multiple_table tr.selected { background-image:none; background-color:#d9e9fe; }
.select_multiple_name { padding-left:15px; font-weight:bold; }
.select_multiple_checkbox { text-align:right; }
.select_multiple_checkbox input { margin-right:15px; }
</style>
</head>
<body>
<div id="wrap" style="margin-bottom:200px;">
<h1><a href='http://livepipe.net/control/selectmultiple'>Control.SelectMultiple</a> | 設置サンプル</h1>
<h2>シンプルな例</h2>
<p>プルダウンとチェックボックスが連動しています。</p>
<select id="select_multiple_one">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<span id="select_multiple_options_one">
<input value="1" type="checkbox"><span class="name">One</span>
<input value="2" type="checkbox"><span class="name">Two</span>
<input value="3" type="checkbox"><span class="name">Three</span>
</span>
<p><b>選択された値：</b> <input readonly="true" id="select_multiple_one_value" type="text" style="width:200px;" /></p>
<h2>応用例</h2>
<p>「複数選択」リンクをクリックすると、プルダウンメニューのアイテムリストがポップアップ表示され、チェックボックスのON・OFFで複数選択できるようになります。【終了】ボタンをクリックすると、選択した値はプルダウンに反映されます。</p>
<div id="select_two_container">
<select style="visibility: visible;" id="select_multiple_two">
<option value="tigers">Tigers</option>
<option value="lions">Lions</option>
<option value="kitties">Kitties</option>
<option value="lygers">Lygers</option>
<option value="pumas">Pumas</option>
<option value="cheetahs">Cheetahs</option>
</select>
<a href="" id="select_multiple_two_open">複数選択</a>
<div style="overflow: visible; display: none;" id="select_multiple_two_options" class="select_multiple_container">
<div class="select_multiple_header">Select Multiple Felines</div>
<table class="select_multiple_table" cellpadding="0" cellspacing="0" width="100%">
<tr class="odd selected">
<td class="select_multiple_name">Tigers</td>
<td class="select_multiple_checkbox"><input value="tigers" type="checkbox"></td>
</tr>
<tr class="even selected">
<td class="select_multiple_name">Lions</td>
<td class="select_multiple_checkbox"><input value="lions" type="checkbox"></td>
</tr>
<tr class="odd selected">
<td class="select_multiple_name">Kitties</td>
<td class="select_multiple_checkbox"><input value="kitties" type="checkbox"></td>
</tr>
<tr class="even selected">
<td class="select_multiple_name">Lygers</td>
<td class="select_multiple_checkbox"><input value="lygers" type="checkbox"></td>
</tr>
<tr class="odd selected">
<td class="select_multiple_name">Pumas</td>
<td class="select_multiple_checkbox"><input value="pumas" type="checkbox"></td>
</tr>
<tr class="even selected">
<td class="select_multiple_name">Cheetahs</td>
<td class="select_multiple_checkbox"><input value="cheetahs" type="checkbox"></td>
</tr>
</table>
<div class="select_multiple_submit"><input value="終了" id="select_multiple_two_close" type="button"></div>
</div>
</div>
<p><b>選択された値：</b> <input readonly="true" id="select_multiple_two_value" type="text" style="width:200px;" /></p>
</div>
</body>
</html>