Search
  1. 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>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women