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. Glide.js
  2. WEB TICKER

    JavaScript

    テキストや画像を無限にスクロールさせれるティッカー実装「WEB TICKER」

    WEB TICKERは、テキストや画像、リストなどさまざまなコンテンツ…

  3. no-image

    JavaScript

    シンプルな円形のカラーピッカーを実装できる「jQuery-Colorwheel」

    jQuery-Colorwheelはシンプルな円形によるカラーピッカー…

  4. Tooltipster

    JavaScript

    シンプルで使い勝手がとてもいいツールチップを実装できるjQueryプラグイン「Tooltipster…

    シンプルで使い勝手がとてもいいツールチップを実装できるjQueryプラ…

  5. JavaScript

    レスポンシブ対応で画像やテキストも自由にスライドできるjQueryスライダー「Responsly.j…

    スマホにも対応したレスポンシブのjQueryスライダー「Respons…

  6. autoscroll.js

    JavaScript

    コンテンツを自動でスクロールしてくれるjQueryプラグイン「autoscroll.js」

    autoscroll.jsはwebページ内のコンテンツを自動でスクロー…

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6

アーカイブ

PAGE TOP