Multipicker

JavaScript

要素を選択するときに直感的な操作を実現する「Multipicker」

Multipickerは、日付や曜日、番号、その他さまざまな要素を選択した際に直感的にその選択が表示されるjQueryプラグインです。見た目のイメージは、問い合わせ画面や予約画面でよく見られる、チェックボックスやラジオボタンなどです。つまり、選択のルールは択一である場合と、複数の場合とに対応しています。Multipickerを導入すれば、クリックやドラッグのようなユーザーの簡単なアクションによりそれらを表現できます。

Multipicker

デモ

  • NPMを使用する
  • bowerを使用する
  • zipファイルをダウンロードする

一般的にはzipファイルのダウンロード(解凍・展開で使用)が簡単だと思います。そして、最新バージョンのjQueryをダウンロードしてHTMLファイルに読み込んでください。

基本的なソースは下記のようになります。こちらは曜日の選択を前提としています。ul要素でli要素を囲んでマークアップします。

<ul id="days">
    <li>Su</li>
    <li>Mo</li>
    <li>Tu</li>
    <li>We</li>
    <li>Th</li>
    <li>Fr</li>
    <li>Sa</li>
</ul>

JavaScriptの記述は下記のようになります。id属性の[days]のliを選択要素とするという記述です。

 $("#days").multiPicker({ selector : "li" });
  • vertical・・・ピッカー(選択欄のこと)の垂直表示。デフォルト:false
  • quadratic・・・表示されるピッカーの形。デフォルト:false(角丸で丸みを帯びた状態がデフォルト)
  • size・・・ピッカーのサイズ small/medium/largeから選択。デフォルト:medium

Multipicker

関連記事

  1. DarkTooltip

    JavaScript

    色んなパターンのツールチップを実装できるjQueryプラグイン「DarkTooltip」

    DarkTooltipというjQueryプラグインを使えば、色んなパタ…

  2. no-image

    JavaScript

    タブやアコーディオンを実装できるjQueryプラグイン「jpix」

    jpixはシンプルなタブやアコーディオンを実装することができるjQue…

  3. JavaScript

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

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

  4. jquery-confirm

    JavaScript

    アラートやダイアログなどさまざまな機能を実装できる「jquery-confirm」

    jquery-confirmはアラートやconfirm、ダイアログなど…

  5. Text Effects

    JavaScript

    テキストがカシャカシャ切り替わって表示するjQueryプラグイン「Text Effects」

    Text EffectsというjQueryプラグインを使えば、テキスト…

  6. JavaScript

    レンガ風に要素を綺麗に並べてグリッドレイアウトが作れる「The Wookmark jQuery pl…

    Pinterestのように高さの異なる要素をレンガ風に綺麗に並べて、簡…

最近の記事

  1. ペーストしてスタイルを合わせる
  2. Hermèsオレンジスポーツバンド
  3. GoPro HERO8 Black

アーカイブ

PAGE TOP