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

関連記事

  1. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでreplaceWithやreplaceAllを使って要素を置き換えてみる

    jQueryでreplaceWithやreplaceAllを使えば好き…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでJavaScriptのfor…inを使ってオブジェクトから値を1つずつ取り…

    JavaScriptにはfor...inというプロパティの数だけ繰り返…

  3. stacky

    JavaScript

    スライドダウン・スライドアップしてコンテンツを整理できるjQueryプラグイン「stacky」

    stackyというjQueryプラグインを使えばコンテンツをスライドダ…

  4. CSS Emoticons
  5. JavaScript

    カスタマイズ性に優れたタグ入力ができるJSライブラリ・insignia

    insigniaはカスタマイズ性に優れたタグ入力を実装することができる…

  6. no-image

    JavaScript

    レスポンシブ対応のシンプルなLightboxプラグイン

    レスポンシブに対応したシンプルなLightboxプラグインを紹介します…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP