no-image

JavaScript

シンプルでパワフルなセレクトボックスを実装できる「SelectPage」

SelectPageはシンプルながらも高いカスタマイズ性を備えたパワフルなセレクトボックスを実装できるjQueryプラグインです。ページネーションやキーボード操作、多言語対応などハイクオリティなセレクト機能を取り入れたい場合に最適なプラグインになります。

SelectPage

デモ

デモではページネーション付きのベーシックなものからセレクトオンリーのモード、選択済みのもの、複数選択ができるモード、選択できる数の上限が決まっているタイプ、Ajax使用のものなど、さまざまな種類のサンプルが用意されています。

例えば、ベーシックタイプでは「input to search」という項目をクリックすると、アイテムを選択できるボックスが表示されます。ボックス下部にはページネーションも設置されていて、矢印をクリックすることで次のページに移ることができるほか、キーボード操作にも対応していることから左右の矢印キーからでもページを切り替えることが可能です。

また、複数選択モードでは選択されたアイテムがタグのように表示されます。各アイテムの横にはバツ印が付いていて、ここから選択を外すことが可能です。ちなみに複数選択を有効にするにはオプションのmultipleという項目の値をtrueに設定してあげればOKです。さらに選択できるアイテム数の上限を設定したい場合はmaxSelectLimitから設定できます。例えば、選択可能なアイテム数を3つまでにしたい場合は、ここの値を3に設定します。

SelectPageは複数言語にも対応していて、こちらはオプションのlangから指定可能です。chinese、english、german、spanish、japanse、Brazilian Portugueseの6つの言語から選択できます。コードはchineseがcn、englishがen、germanがde、spanishがes、japanseがja、Brazilian Portugueseがpt-brです。

オプションには他にも、data、pagination、listSize、multipleControlbar、selectToCloseList、initRecord、dbTable、keyField、showField、searchField、andOr、orderBy、pageSize、params……など、たくさんの種類が用意されています。

SelectPage

関連記事

  1. Prism Effect Slider

    JavaScript

    プリズム効果を実装することができるスライダー「Prism Effect Slider」

    おもしろいスライダーがあったのでご紹介します。Prism Effect…

  2. no-image

    JavaScript

    多彩な方向に表示できるツールチップ「jq-tooltip」

    jq-tooltipは多彩な方向に表示可能なツールチップを実装できるj…

  3. Hamburger Icon Menu
  4. Squishy

    JavaScript

    テキストをコンテナに合わせて自動でサイズ変更してくれるjQueryプラグイン「Squishy」

    SquishyというjQueryプラグインを使えばテキストをコンテナに…

  5. JavaScript

    レスポンシブなテキストを実装できるjQueryプラグイン「Responsive Text」

    Responsive TextというjQueryプラグインを使えば、と…

  6. Jquery Line Progress Bar

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP