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

gliojsviewportから離れた時にイベントをトリガーしてくれる「gliojs」前のページ

プリロードやローディング画面を実装できるjQueryプラグイン「preload」次のページpreload

関連記事

  1. JavaScript

    レスポンシブに対応している軽量のjQueryスライダー「Unslider」

    とても軽量でレスポンシブにも対応しているjQueryスライダー「Uns…

  2. JQuery Portfolio
  3. Foxholder
  4. no-image

    JavaScript

    シンプル・軽量なアナログ時計を実装できる「jsRapClock」

    jsRapClockはシンプルで軽量なアナログ時計を実装できるjQue…

  5. no-image

    JavaScript

    シンプルなイメージカルーセルを実装できる「Boishakh carousel」

    Boishakh carouselはシンプルなイメージカルーセルを実装…

  6. jQuery fullsizable

最近の記事

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

アーカイブ

PAGE TOP