フォームを格好良くするUIコンポーネント2選


自分が気に入っているUIコンポーネント2つを紹介します。
最近のフロントエンド開発ではBootstrapなどのCSSフレームワークを使用することが多いですが、もちろん併用することができます。
入れない理由がなかったらとりあえず入れちゃいますね。

1.選択肢(select要素)を格好良くするselect2

select2というjQueryプラグインがオススメです。
ただ単に見た目を改善しただけでなく、選択肢を文字列で検索できるようになっているのが機能的にもいい感じですね。

bowerでインストールできます。

bower install select2 --save

使うとselect要素がこんな感じになります。

スクリーンショット 2016-05-13 18.41.37

select2公式(英語)

公式はjQueryに依存しますが、AngularJSのディレクティブも存在します。
angularJS版

2.入力要素の編集を格好良くするx-editable

x-editableというjQueryプラグインがイケてます。

bowerでインストールできます。

bower install x-editable --save

編集可能にしたい要素をなどで囲い、
$(‘.app-editable’).editable();

でx-editableを適用することができます。

スクリーンショット 2016-05-13 18.52.56

x-editable公式(英語)

こちらも公式はjQueryに依存しますが、AngularJSのディレクティブも存在します。
angularJS版x-editable