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

Relax Melodies48種類のリラックスサウンドで睡眠時や作業中のBGMに最適なMacアプリ「Relax Melodies」前のページ

水平・垂直に対応したカルーセルスライドショー「jCarousel」次のページno-image

関連記事

  1. JavaScript

    スクロールしても固定表示されてついてくるjQueryプラグイン「Sticky」

    StickyというjQueryプラグインを使えば、スクロールしても固定…

  2. JavaScript

    ページ内のリンクをスムーズに移動できるsmoothScroll.jsを使ってみた

    ページ内のリンクをスムーズに移動してくれる「smoothScroll.…

  3. JavaScript

    レスポンシブなLightbox風のギャラリーを実装できるjQueryプラグイン「anoFlow」

    anoFlowというjQueryプラグインを使えば、レスポンシブなLi…

  4. Scrollgress

    JavaScript

    スクロールに連動するプログレスバーを実装できる「Scrollgress」

    Scrollgressはスクロールに連動するシンプルで軽量なプログレス…

  5. flexible-bootstrap-carousel
  6. pixelate.js

最近の記事

  1. 高輪ゲートウェイ駅のスタバ
  2. 新幹線
  3. リッチモンドホテル
  4. ハーブバターチキン 石窯フィローネとドリップコーヒー
  5. 中洞牧場 グラスフェッド牛乳

アーカイブ

PAGE TOP