Saetl.net

Simple And Easy TempLate

jquery.customSelectの使い方

  1. GitHubのページ右下の「Douwload ZIP」よりファイル1式をダウンロード。
  2. ダウンロードしたファイルを任意の場所にコピー。
    ファイル構成
  3. 動作させるファイル(サンプルでは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="http://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="http://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>
    
  4. ファイル1式をサーバーにアップロードして設置完了。
    サンプル