[JS]フォームのselect要素をHTMLの変更無しで、ミニマルに美しく使いやすくするスクリプト -Minimalect
Post on:2013年6月5日
sponsors
フォームのselect要素をHTMLには手を加えずに、美しいミニマルなデザインを適用し、使いやすさもアップさせるjQueryのプラグインを紹介します。
デザインのテーマも用意されており、オリジナルのテーマをスタイルシートベースでつくることもできます。
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>
sponsors
