[JS]フォームのselect要素をHTMLの変更無しで、ミニマルに美しく使いやすくするスクリプト -Minimalect

フォームのselect要素をHTMLには手を加えずに、美しいミニマルなデザインを適用し、使いやすさもアップさせるjQueryのプラグインを紹介します。

デザインのテーマも用意されており、オリジナルのテーマをスタイルシートベースでつくることもできます。

サイトのキャプチャ

Minimalect

Minimalectの特徴

  • select要素を洗練されたデザインに置き換えます。
  • optgroupsのサポート。
  • フィルタリングのサポート。
  • キーボードナビゲーション。
  • テーマのサポート。

Minimalectのデモ

HTMLの変更は無しで、select要素を美しく、そして使いやすくしたデモがあります。
まずは、一つ目。

デモのキャプチャ

デモ

見た目だけでも、ミニマルな美しいデザインが適用されています。

各アイテムも美しくデザインされており、optgroupsにも対応しています。

デモのキャプチャ

optgroupsもサポート

文字を入力してのフィルタリングもサポートしています。
「s」をタイプすると、その文字でフィルタリングします。

デモのキャプチャ

フィルタリングもサポート

デモではもう一つテーマがあり、下記はバブルのテーマです。
吹き出し状のデザインがかわいいですね。

デモのキャプチャ

バブルのテーマ

Minimalectの使い方

実装は簡単で、HTMLは変更の必要はありません。

Step 1: 外部ファイル

head内にスクリプトとスタイルシートを外部ファイルとして記述します。

<head>
    <link rel="stylesheet" type="text/css" href="stylesheets/minimalect.css" media="screen" />

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="javascripts/minimalect.js"></script>
</head>

Step 2: JavaScript

あとはjQueryのセレクタで適用するselect要素を指定し、スクリプトを実行するだけです。

<script>
    $(document).ready(function(){
        $("select").minimalect();
    });
</script>

select要素にclass, idを指定し、個別に適用することも可能です。
また、テーマを変更する時はオプションで指定します。

<script>
    $(document).ready(function(){
        $("#select1").minimalect({ theme: "bubble", placeholder: "Select a dessert" });
    });
</script>

top of page

©2017 coliss