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. jTableScroll

    JavaScript

    ヘッダーとフッターを固定したままスクロール可能なテーブル「jTableScroll」

    jTableScrollはヘッダーとフッターを固定したままスクロール…

  2. Simple jQuery Slider

    JavaScript

    シンプルなナビ付きのスライダーを実装できる「Simple jQuery Slider」

    シンプルなスライダーを実装できる「Simple jQuery Slid…

  3. Magnific Popup

    JavaScript

    レスポンシブに対応したLightbox風のjQueryプラグイン「Magnific Popup」

    レスポンシブに対応したLightbox風のjQueryプラグイン「Ma…

  4. no-image

    JavaScript

    インスタの写真や動画を表示できる軽量なjQueryプラグイン「Instagram Lite」

    Instagram Liteは指定したユーザーのインスタグラムの写真や…

  5. Mobilepopup

    JavaScript

    軽量でモバイルにも最適なポップアップウィンドウを実装できる「Mobilepopup」

    Mobilepopupは、軽量でカスタマイズ性に優れたモバイルにも最適…

  6. jQuery fullsizable

最近の記事

  1. Apple WatchでのMacロック解除を無効
  2. オータムスイートポテトフラペチーノ
  3. 紅葉
  4. ナノケア EH-NA0E
  5. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP