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. ssi-modal

    JavaScript

    フレキシブルでパワフルなモーダルウィンドウを実装できる「ssi-modal」

    ssi-modalはカスタマイズ性に優れたフレキシブルでパワフルなモー…

  2. Amigo Sorter Plugin

    JavaScript

    タッチ対応で直感的に並べ替えできるjQueryプラグイン「Amigo Sorter Plugin」

    Amigo Sorter Pluginは、タッチ対応で直感的にリスト項…

  3. PWS Tabs jQuery Plugin
  4. no-image

    JavaScript

    グリッドレイアウトによるシンプルで軽量なギャラリー「Grid Gallery」

    Grid Galleryはグリッドレイアウトによるシンプルで軽量なイメ…

  5. JavaScript

    カスタマイズも自由にできるjQuery「bxSlider」の使い方

    個人的にかなりよさげなjQueryスライダーを使ってみました。その名も…

  6. JavaScript

    回転するアニメーション付きの円形ナビゲーションを実装できる「wheelnav.js」

    wheelnav.jsは回転する円形のナビゲーションを実装することがで…

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP