jquery.customSelectの使い方
- GitHubのページ右下の「Douwload ZIP」よりファイル1式をダウンロード。
- ダウンロードしたファイルを任意の場所にコピー。
- 動作させるファイル(サンプルではindex.html)にコードを記述。
<パスは上記ファイル構成の場合なので環境にあわせて変更>
・head部分にcssファイルを読み込ませるためのコードを記述。<head> <!--jquery.customSelect用に作成したファイル--> <link rel="stylesheet" href="css/jquery.customSelect.css"> </head>
サンプルのcssコード
/*ページ設定部分(style.cssなどで設定していれば削除する)*/ * { margin: 0; padding: 0; } body { background: #fff; font-family: Arial; } #container { width: 300px; margin: 20px auto; } a { color: #333; text-decoration: none; } a:hover { color: #ff0000; text-decoration: underline; } /*ここまでページ設定部分*/ /*ここからjquery.customSelectの設定*/ .ctSelect { background: url(../images/arrow.png) right center no-repeat; background-color: #fff; padding: 0 10px; border: 1px solid #dcdcdc; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; font-size: 1em; width: 90%; height: 40px; line-height: 40px; }
・</body>の直前にjsファイルを読み込ませるためのコードを記述。<!--googleのCDN(ネットワーク経由でコンテンツを提供するサービス)よりjqueryをロード--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <!--ダウンロードしたファイル--> <script type="text/javascript" src="js/jquery.customSelect.min.js"></script> <!--javascript追記--> <script type="text/javascript"> $(function() { $('.ctSelect').customSelect() }); </script>
・<body></body>内にコードを記述<select class="ctSelect"< <option value="~10代"<~10代</option< <option value="20代"<20代</option< <option value="30代"<30代</option< <option value="40代"<40代</option< <option value="50代"<50代</option< <option value="60代"<60代</option< <option value="70代"<70代~</option< </select<
サンプルのhtmlコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="css/jquery.customSelect.css"> </head> <body> <div id="container"> <select class="ctSelect"> <option value="~10代">~10代</option> <option value="20代">20代</option> <option value="30代">30代</option> <option value="40代">40代</option> <option value="50代">50代</option> <option value="60代">60代</option> <option value="70代">70代~</option> </select> </div> <!--googleのCDN(ネットワーク経由でコンテンツを提供するサービス)よりjqueryをロード--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <!--ダウンロードしたファイル--> <script type="text/javascript" src="js/jquery.customSelect.min.js"></script> <!--javascript追記--> <script type="text/javascript"> $(function() { $('.ctSelect').customSelect() }); </script> </body> </html>
- ファイル1式をサーバーにアップロードして設置完了。