Choice.js

JavaScript

Vanilla JSによる軽量なセレクトボックス、テキスト入力を実装できる「Choice.js」

Choice.jsはVanilla JSを使用した軽量のセレクトボックスやテキスト入力を実装できるスクリプトです。jQueryに依存することなく使えるのがいいですね。ブログや画像ギャラリーのタグ付けなどにはピッタリの機能になるのではないでしょうか。

カスタマイズ性に優れさまざまなパターンが可能

デモ

Text inputsという項目のなかでは、いろんなテキスト入力を試すことができます。最大で5つしか入力できなかったり、削減ボタンがついていたり、メールアドレスの形式でないと入力できなかったりと、さまざまなパターンが用意されています。

同様に、Multiple select inputという項目でもDefaultのものからオプショングループごとに選択肢が整理されているものまでいくつかのデモに触れることができます。

そのほか、Single select inputという項目にもさまざまなデモがあります。Multiple select inputは、セレクトボックスから選択したものをタグ付けするように複数選べるのが特徴ですが、Single select inputは一般的なセレクトボックスのように一つしか選べないようになっています。

また、選択後はタグ付けのようなスタイルではなく、シンプルにテキストが表示されている感じです。

webページやコンテンツに応じてうまく使い分けできるのがいいですね。オプションもかなり豊富なので、カスタマイズしたい人にもうれしい仕様になっているはず。

Vanilla JSで軽量ながらも、多彩な機能を備えたセレクトボックス、テキスト入力を取り入れたい人は、ぜひChoice.jsを活用してみてください。

Choice.js

Expandy Menuマウスオーバーで広がるメニューパネル「Expandy Menu」前のページ

プログレッシブ形式で画像表示時間を短縮してくれる「Pilpil」次のページPilpil

関連記事

  1. jQuery Responsive Tabs
  2. ScrollMenu.js

    JavaScript

    縦横配置やナビメニューと統合できる便利なスクロールバー「ScrollMenu.js」

    ScrollMenu.jsは通常の味気ないスクロールバーを便利で新しい…

  3. JavaScript

    Lightbox風のjQueryプラグインColorBoxの使い方

    綺麗なイメージギャラリーを簡単に設置できるColorBoxの使い方の紹…

  4. Crosscover

    JavaScript

    多彩なアニメーションがいい!シンプルで使いやすいjQueryイメージカルーセル「Crosscover…

    Crosscoverはシンプルで多彩なアニメーションが魅力的なイメージ…

  5. PleaseWait

    JavaScript

    ローディングアイコンをオシャレに実装することができる「PleaseWait」

    PleaseWaitはローディングアイコンをオシャレに見せることができ…

  6. OverlayScrollbars

最近の記事

  1. 有栖川公園
  2. グーディオ オーガニックチョコレート(ミント)
  3. チキンバターマサラとシュリンプバターマサラ
  4. 恵比寿のダ・ミケーレのピザ
  5. ハムエッグホットサンドとドリップコーヒー

アーカイブ

PAGE TOP