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でウィンドウサイズによって処理を変える

    JavaScript

    jQueryでsetTimeoutを使えば各要素のアニメーションを実行させる時間を調整できる

    jQueryのsetTimeoutを使えば何秒後に実行するかといったこ…

  2. iziModal

    JavaScript

    エレガント・レスポンシブ・フレキシブルでそのうえ軽量なモーダルウィンドウ「iziModal」

    iziModalはエレガント・レスポンシブ・フレキシブルなモーダルウィ…

  3. gliojs

    JavaScript

    viewportから離れた時にイベントをトリガーしてくれる「gliojs」

    gliojsは、ページを閲覧している時にマウスがviewport(表示…

  4. plusGallery

    JavaScript

    Google+のような画像ギャラリーを実装できる「plusGallery」

    plusGalleryはGoogle+のような画像ギャラリーを実装する…

  5. jQuery Reel Plugin

    JavaScript

    上下左右の色んな角度から画像を回転させて見せることができる「jQuery Reel Plugin」

    これは面白いですね。画像を上下左右と色んな角度から回転させながら見るこ…

最近の記事

  1. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  2. ペットボトルホルスター

アーカイブ

PAGE TOP