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

実行結果

参照：jCombox: jQuery HTML Select Tag Plugin 1.0b

● 基本

デフォルト

デフォルト選択（option@selected）

ドロップダウンメニューの高さを指定（select@rows）

ドロップダウンメニューのサイズを指定（select@size）

onchangeイベントに関数を指定（選択時にアラート表示）

コールバック関数

● エフェクト

スライド・フェード効果

jquery.easing.js使用

● テーマ

blue

画像使用

画像使用（Safari風）

画像使用（Opera風）

● アクション

有効化 | 無効化 | 選択されている値を取得

アイテム追加 | アイテムを編集 | アイテム削除 | アイテムをクリア

設置サンプルのソース

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="utf-8">
    <title>設置サンプル</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 src="/content/lib/jquery/jcombox/jcombox-1.0b.packed.js"></script>
    <script src="/content/lib/jquery/jquery.easing.1.3.js"></script>
   <script>
      $(function(){
         /* 基本 */
         $('.select').jcombox();
         $('.select15').jcombox({ fn: clickMe });
         /* エフェクト */
         $('.select20').jcombox({ fx: 'slideFade', fxDelay:400 }); 
         $('.select21').jcombox({ fx: 'easing', fxType: 'easeOutBounce', fxDelay: 500 });
         /* テーマ */
         $('.select30').jcombox({ theme: 'blue' }); 
         $('.select31').jcombox({ theme: 'mytheme', set: true }); 
         $('.select32').jcombox({ theme: 'safari', set: true, fx: 'slide' }); 
         $('.select33').jcombox({ theme: 'opera', set: true, fx: 'easing', fxType: 'easeInExpo', fxDelay: 500 });
      });
      function clickMe(txt){ 
         alert("クリック！");
      }
   </script>
   <!-- CSS -->
   <link rel="stylesheet" type="text/css" href="/content/lib/jquery/jcombox/styles.css" />
   <style type="text/css">
      h2, h3 { margin-top:20px; }
      button {  border: 1px solid #a8a8a8; font-weight: bold; padding: 2px 4px; color: #5b5b5b;} 
      button:hover {  background: #cfcfcf; 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>
<!-- CONTENT -->
   <p>参照：<a href='http://jquerylab.com/jcombox/'>jCombox: jQuery HTML Select Tag Plugin 1.0b</a></p>
   <div id="res">
<!-- CODE -->
      <h2>● 基本</h2>
      <h3>デフォルト</h3>
      <form action='/content/demo/test.php' method='get' class='cf'>
         <select class='select' name='exp1' width='143'>
            <option value=''>Select a Planet</option>
            <option value='mercury'>Mercury</option>
            <option value='venus'>Venus</option>
            <option value='earth'>Earth</option>
            <option value='mars'>Mars</option>
            <option value='jupiter'>Jupiter</option>
            <option value='saturn'>Saturn</option>
         </select>
         <button type='submit'>submit</button>
      </form>

      <h3>デフォルト選択（option@selected）</h3>
      <form action='/content/demo/test.php' method='get' class='cf'>
         <select class='select' name='exp2' width='200'>
            <option value=''>Select a Planet</option>
            <option value='mercury'>Mercury</option>
            <option selected value='venus'>Venus</option>
            <option value='earth'>Earth</option>
            <option value='mars'>Mars</option>
            <option value='jupiter'>Jupiter</option>
            <option value='saturn'>Saturn</option>
         </select>
      </form>

      <h3>ドロップダウンメニューの高さを指定（select@rows）</h3>
      <form action='/content/demo/test.php' method='get' class='cf'>
         <select class='select' name='exp3' rows='6' width='200'>
            <option value=''>Select a Planet</option>
            <option value='mercury'>Mercury</option>
            <option value='venus'>Venus</option>
            <option value='earth'>Earth</option>
            <option value='mars'>Mars</option>
            <option value='jupiter'>Jupiter</option>
            <option value='saturn'>Saturn</option>
            <option value='neptune'>Neptune</option>
            <option value='neptune'>Neptune</option>
            <option value='neptune'>Neptune</option>
            <option value='neptune'>Neptune</option>
            <option value='neptune'>Neptune</option>
            <option value='neptune'>Neptune</option>
            <option value='neptune'>Neptune</option>
            <option value='neptune'>Neptune</option>
            <option value='neptune'>Neptune</option>
            <option value='neptune'>Neptune</option>
            <option value='neptune'>Neptune</option>
            <option value='neptune'>Neptune</option>
         </select>
         <button type='submit'>submit</button>
      </form>

      <h3>ドロップダウンメニューのサイズを指定（select@size）</h3>
      <form action='/content/demo/test.php' method='get' class='cf'>
         <select class='select' name='exp5' size='5' width='200'>
            <option value=''>Select a Planet</option>
            <option value='mercury'>Mercury</option>
            <option value='venus'>Venus</option>
            <option value='earth'>Earth</option>
            <option value='mars'>Mars</option>
            <option value='jupiter'>Jupiter</option>
            <option value='saturn'>Saturn</option>
            <option value='saturn'>Saturn</option>
            <option value='saturn'>Saturn</option>
            <option value='saturn'>Saturn</option>
            <option value='saturn'>Saturn</option>
            <option value='saturn'>Saturn</option>
            <option value='saturn'>Saturn</option>
            <option value='saturn'>Saturn</option>
            <option value='saturn'>Saturn</option>
            <option value='saturn'>Saturn</option>
         </select>
         <button type='submit'>submit</button>
      </form>

      <h3>onchangeイベントに関数を指定（選択時にアラート表示）</h3>
      <form action='/content/demo/test.php' method='get' class='cf'>
         <select class='select' name='exp6' onchange='clickMe()' width='200'>
            <option value=''>Select a Planet</option>
            <option value='mercury'>Mercury</option>
            <option value='venus'>Venus</option>
            <option value='earth'>Earth</option>
            <option value='mars'>Mars</option>
            <option value='jupiter'>Jupiter</option>
            <option value='saturn'>Saturn</option>
            <option value='saturn'>Saturn</option>
            <option value='saturn'>Saturn</option>
            <option value='saturn'>Saturn</option>
            <option value='saturn'>Saturn</option>
            <option value='saturn'>Saturn</option>
         </select>
         <button type='submit'>submit</button>
      </form>

      <h3>コールバック関数</h3>
      <form action='/content/demo/test.php' method='get' class='cf'>
         <select class='select15' name='exp7' size='5' width='200'>
            <option value=''>Select a Planet</option>
            <option value='mercury'>Mercury</option>
            <option value='venus'>Venus</option>
            <option value='earth'>Earth</option>
            <option value='mars'>Mars</option>
            <option value='jupiter'>Jupiter</option>
            <option value='saturn'>Saturn</option>
            <option value='saturn'>Saturn</option>
            <option value='saturn'>Saturn</option>
            <option value='saturn'>Saturn</option>
            <option value='saturn'>Saturn</option>
            <option value='saturn'>Saturn</option>
         </select>
         <button type='submit'>submit</button>
      </form>

      <hr />

      <h2>● エフェクト</h2>
      <h3>スライド・フェード効果</h3>
      <form action='/content/demo/test.php' method='get' class='cf'>
         <select class='select20' name='exp8' width='143'>
            <option value=''>Select a Planet</option>
            <option value='mercury'>Mercury</option>
            <option value='venus'>Venus</option>
            <option value='earth'>Earth</option>
            <option value='mars'>Mars</option>
            <option value='jupiter'>Jupiter</option>
            <option value='saturn'>Saturn</option>
         </select>
         <button type='submit'>submit</button>
      </form>

      <h3>jquery.easing.js使用</h3>
      <form action='/content/demo/test.php' method='get' class='cf'>
         <select class='select21' name='exp9' width='143'>
            <option value=''>Select a Planet</option>
            <option value='mercury'>Mercury</option>
            <option value='venus'>Venus</option>
            <option value='earth'>Earth</option>
            <option value='mars'>Mars</option>
            <option value='jupiter'>Jupiter</option>
            <option value='saturn'>Saturn</option>
         </select>
         <button type='submit'>submit</button>
      </form>

      <hr />

      <h2>● テーマ</h2>
      <h3>blue</h3>
      <form action='/content/demo/test.php' method='get' class='cf'>
         <select class='select30' name='exp10' width='200'>
            <option value=''>Select a Planet</option>
            <option value='mercury'>Mercury</option>
            <option value='venus'>Venus</option>
            <option value='earth'>Earth</option>
            <option value='mars'>Mars</option>
            <option value='jupiter'>Jupiter</option>
            <option value='saturn'>Saturn</option>
         </select>
         <button type='submit'>submit</button>
      </form>
      <style type="text/css">
         /* theme: blue */
         .blue { border:1px solid #84d7ff; font-size:18px; font-weight:bold; color:#0080c0; background-color:#d5f1ff; }
         .blue .menu { border:1px solid #06aeff; }
         .blue-hover { border-color:#06aeff; }
         .blue .current { background-color:#0080c0 !important; color:#fff !important; }
      </style>

      <h3>画像使用</h3>
      <form action='/content/demo/test.php' method='get' class='cf'>
         <select class='select31' name='exp11' width='250'>
            <option value=''>Select a Planet</option>
            <option value='mercury'>Mercury</option>
            <option value='venus'>Venus</option>
            <option value='earth'>Earth</option>
            <option value='mars'>Mars</option>
            <option value='jupiter'>Jupiter</option>
            <option value='saturn'>Saturn</option>
         </select>
         <button type='submit'>submit</button>
      </form>
      <style type="text/css">
         /* theme: mytheme */
         .mytheme{ border:1px solid #668d32; color:#333; font-size:13px; background-color:#e9e9e9; background-image:url('/content/lib/jquery/jcombox/round.gif'); }
         .mytheme-hover{ border-color:#008040;color:#668d32; background-image:url('/content/lib/jquery/jcombox/round_hover.gif'); }
         .mytheme.current{ background-color:#668d32!important; color:#fff!important; }
         .mytheme.menu { border:1pxsolid#668d32; }
      </style>

      <h3>画像使用（Safari風）</h3>
      <form action='/content/demo/test.php' method='get' class='cf'>
         <select class='select32' name='exp12' width='200'>
            <option value=''>Select a Planet</option>
            <option value='mercury'>Mercury</option>
            <option value='venus'>Venus</option>
            <option value='earth'>Earth</option>
            <option value='mars'>Mars</option>
            <option value='jupiter'>Jupiter</option>
            <option value='saturn'>Saturn</option>
         </select>
         <button type='submit'>submit</button>
      </form>
      <style type="text/css">
         /* theme: mytheme */
         .safari { border:1px solid #69a6e4; color:#333; font-size:13px; font-weight:bold; background-color:#e9e9e9; background-image:url('/content/lib/jquery/jcombox/safari.gif'); } 
         .safari-hover { border-color:#69a6e4; color:#2067ae; }
         .safari .current { background-color:#69a6e4 !important; color:#fff !important; }
         .safari .menu { border:1px solid #808080; }
      </style>

      <h3>画像使用（Opera風）</h3>
      <form action='/content/demo/test.php' method='get' class='cf'>
         <select class='select33' name='exp13' width='150'>
            <option value=''>Select a Planet</option>
            <option value='mercury'>Mercury</option>
            <option value='venus'>Venus</option>
            <option value='earth'>Earth</option>
            <option value='mars'>Mars</option>
            <option value='jupiter'>Jupiter</option>
            <option value='saturn'>Saturn</option>
         </select>
         <button type='submit'>submit</button>
      </form>
      <style type="text/css">
         /* theme: opera */
         .opera { border:1px solid #69a6e4; color:#505050; font-size:13px; font-weight:bold; background-color:#e9e9e9; background-image:url('/content/lib/jquery/jcombox/opera.gif'); }
         .opera-hover { border-color:#69a6e4; color:#505050; background-image:url('/content/lib/jquery/jcombox/opera_hover.gif'); }
         .opera .current { background-color:#808080 !important; color:#fff !important; }
         .opera .menu { border:1px solid #494949; }
      </style>

      <hr />

      <h2>● アクション</h2>
      <form action='/content/demo/test.php' method='get' class='cf'>
         <p>
            <a href='#' id='example40Enable'>有効化</a> | <a href='#' id='example40Disable'>無効化</a> | 
            <a href='#' id='example40Selected'>選択されている値を取得</a>
         </p>
         <p>
            <a href='#' id='example40Add'>アイテム追加</a> | <a href='#' id='example40Edit'>アイテムを編集</a> | 
            <a href='#' id='example40Remove'>アイテム削除</a> | <a href='#' id='example40Clear'>アイテムをクリア</a>
         </p>
         <p>
            <select class='select40' name='example40' disabled='disabled'>
               <option value=''>Select a Planet</option>
               <option value='mercury'>Mercury</option>
               <option value='venus'>Venus</option>
               <option value='earth'>Earth</option>
               <option value='mars'>Mars</option>
               <option value='jupiter'>Jupiter</option>
               <option value='saturn'>Saturn</option>
            </select>
            <button type='submit'>submit</button>
         </p>
      </form>
      <script>
      $(function(){ 
         $('.select40').jcombox();
         $('#example40Disable').click(function(){
            $('#example40').jcDisable();
            return false;
         });
         $('#example40Selected').click(function(){
            //passing a true value, returns the selected item text
            alert( $('#example40').jcSelected(1) + ': ' + $('#example40').jcSelected());
            return false;
         });
         $('#example40Enable').click(function(){
            $('#example40').jcEnable();
            return false;
         });
         $('#example40Add').click(function(){
            //passing a true value as the third parameter, selects the item
            $('#example40').jcAdd('uranus', 'Uranus', true);
            return false;
         }); 
         $('#example40Remove').click(function(){
            $('#example40').jcClear();
            return false;
         });
         $('#example40Edit').click(function(){
            $('#example40').jcEdit('pluto', 'Pluto');
            return false;
         }); 
         $('#example40Clear').click(function(){
            //passing a true value to jcClear, just clears the selected item 
            $('#example40').jcClear(1); 
            return false; 
         }); 
      }); 
      </script>
<!-- / CODE -->
   </div>
<!-- / CONTENT -->
</body>
</html>