PHP & JavaScript Room :: 設置サンプル

実行結果

Dropdown Check List | 設置サンプル

▼複数選択型プルダウンメニューをチェックボックス付きのドロップダウンメニューにします。

デフォルト

$("#s1").dropdownchecklist();

$("#s2").dropdownchecklist();

長いテキスト、短いコントロール

widthオプションは、コントロールの固定幅を設定します。
ドロップダウンのアイテムのテキストが長い場合は、コントロールは固定幅を保持し、アイテム部分のサイズだけアイテムのテキスト長さに合わせて広がります。

$("#s3").dropdownchecklist({ width: 100 });

リストの高さを設定

maxDropHeightオプションは、ドロップダウンリストの固定幅を設定します。
指定した高さよりリストが長い場合はスクロールバーが表示されます。

$("#s4").dropdownchecklist({ maxDropHeight: 100 });

全選択/全解除

firstItemChecksAllオプションは、リスト中の最初のアイテムに特別な動作を設定することができます。
最初のアイテムを選択すると、すべてのアイテムを選択します。

$("#s5").dropdownchecklist({ firstItemChecksAll: true, maxDropHeight: 100 });

設置サンプルのソース

<!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>Dropdown Check List | 設置サンプル</title>
      <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
      <!-- JS -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
       <script type="text/javascript" src="/content/lib/jquery/ui/jquery-ui-1.7.1.min.js"></script>
       <script type="text/javascript" src="/content/lib/jquery/ui/ui.dropdownchecklist.js"></script>
      <script type="text/javascript">
         $(function(){
               $("#s1").dropdownchecklist();
               $("#s2").dropdownchecklist();
               $("#s3").dropdownchecklist({ width: 100 });
               $("#s4").dropdownchecklist({ maxDropHeight: 120 });
               $("#s5").dropdownchecklist({ firstItemChecksAll: true, maxDropHeight: 100 });
         });
      </script>
      <!-- CSS -->
      <style type="text/css">
         .ui-dropdownchecklist { height:20px; border:1px solid #ddd; border-right:0; background:#fff url("/content/img/ajax/dropdownchecklist/dropdown.png") no-repeat center right; padding-right:17px; }
         .ui-dropdownchecklist-hover, .ui-dropdownchecklist-active { background-image:url("/content/img/ajax/dropdownchecklist/dropdown_hover.png"); border-color:#5794bf; }
         .ui-dropdownchecklist-text { line-height:20px; }
         .ui-dropdownchecklist-dropcontainer { background-color:#fff; border:1px solid #999; }
         .ui-dropdownchecklist-item { }
         .ui-dropdownchecklist-item-hover { background-color:#39f; color:#fff; }
      </style>
   <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
   <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
      <div id="wrap">
         <h1><a href='http://plugins.jquery.com/project/dropdownchecklist'>Dropdown Check List</a> | 設置サンプル</h1>
         <p>▼複数選択型プルダウンメニューをチェックボックス付きのドロップダウンメニューにします。</p>
<!-- CODE -->
         <h2>デフォルト</h2>
          <pre>$("#s1").dropdownchecklist();</pre>
            <p>
              <select id="s1" multiple="multiple">
                  <option>Low</option>
                  <option>Medium</option>
                  <option>High</option>
              </select>
          </p>
          <pre>&#36;("#s2").dropdownchecklist();</pre>
          <p>
              <select id="s2" multiple="multiple">
                  <option>Low</option>
                  <option selected="selected">Medium</option>
                  <option selected="selected">High</option>
              </select>
          </p>
          <h2>長いテキスト、短いコントロール</h2>
          <p>
            widthオプションは、コントロールの固定幅を設定します。<br>
            ドロップダウンのアイテムのテキストが長い場合は、コントロールは固定幅を保持し、アイテム部分のサイズだけアイテムのテキスト長さに合わせて広がります。
         </p>
          <pre>&#36;("#s3").dropdownchecklist({ width: 100 });</pre>
          <p>
              <select id="s3" multiple="multiple">
                  <option>Pneumonoultramicroscopicsilicovolcanoconiosis</option>
                  <option>Pseudopseudohypoparathyroidism</option>
                  <option>Floccinaucinihilipilification</option>
                  <option>Antidisestablishmentarianism</option>
                  <option>Honorificabilitudinitatibus</option>
              </select>
          </p>
          <h2>リストの高さを設定</h2>
          <p>
              maxDropHeightオプションは、ドロップダウンリストの固定幅を設定します。 <br>
              指定した高さよりリストが長い場合はスクロールバーが表示されます。
          </p>
          <pre>&#36;("#s4").dropdownchecklist({ maxDropHeight: 100 });</pre>
          <p>
              <select id="s4" multiple="multiple">
                  <option>Aries</option>
                  <option>Taurus</option>
                  <option>Gemini</option>
                  <option>Cancer</option>
                  <option>Leo   Leo</option>
                  <option>Virgo</option>
                  <option>Libra</option>
                  <option>Scorpius</option>
                  <option>Ophiuchus</option>
                  <option>Sagittarius</option>
                  <option>Capricornus</option>
                  <option>Aquarius</option>
                  <option>Pisces</option>
              </select>
          </p>
          <h2>全選択/全解除</h2>
          <p>
             firstItemChecksAllオプションは、リスト中の最初のアイテムに特別な動作を設定することができます。<br>
             最初のアイテムを選択すると、すべてのアイテムを選択します。
          </p>
          <pre>&#36;("#s5").dropdownchecklist({ firstItemChecksAll: true, maxDropHeight: 100 });</pre>
          <p>
              <select id="s5" multiple="multiple">
                  <option>(all)</option>
                  <option>Banana Nut</option>
                  <option>Black Walnut</option>
                  <option>Burgundy Cherry</option>
                  <option>Butter Pecan</option>
                  <option>Chocolate Chip</option>
                  <option>Chocolate Fudge Truffle</option>
                  <option>Chocolate Mint Chip</option>
                  <option>Chocolate Peanut Butter</option>
                  <option>Coconut-Pineapple</option>
                  <option>Coffee</option>
                  <option>Coffee Caramel</option>
                  <option>Coffee Chip</option>
                  <option>Cookie Dough</option>
                  <option>Cookies 'n Cream</option>
                  <option>Dutch Chocolate</option>
                  <option>English Toffee</option>
                  <option>Fudgee Peanut Butter Cup</option>
                  <option>Macadamia Nut</option>
                  <option>Mocha Almond Fudge</option>
                  <option>Nutty Coconut</option>
                  <option>Pistachio Nut</option>
                  <option>Pralines and Cream</option>
                  <option>Rocky Road</option>
                  <option>Root Beer Float</option>
                  <option>Strawberry</option>
                  <option>Strawberry Cheesecake</option>
                  <option>Turkish Coffee</option>
                  <option>Vanilla</option>
              </select>
          </p>
<!-- / CODE -->
      </div>
   </body>
</html>