参照:jCombox: jQuery HTML Select Tag Plugin 1.0b
<!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 & 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>