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

    JavaScript

    フォトアルバム(ブック)に最適なjQueryプラグイン「OneBook3d」

    OneBook3dはブラウザ上でフォトアルバム(ブック)を作るのにとて…

  2. SWAPMYLI

    JavaScript

    スライドが切り替わるタイミングも分かりやすく表示させるギャラリーを実装できるjQueryプラグイン「…

    シンプルでよさそうだったのでメモしときます。スライドが切り替わるタイミ…

  3. Text Effects

    JavaScript

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

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

  4. Turntable.js

    JavaScript

    画像を使ってストップモーション動画のような効果を実装できる「Turntable.js」

    Turntable.jsは複数の画像を使ってストップモーション動画のよ…

  5. jQuery.GI.TheWall.js
  6. pagePiling.js

    JavaScript

    垂直にスライドするようなスクロールを実装できるjQueryプラグイン「pagePiling.js」

    pagePiling.jsは垂直にスライドするようなスクロール機能を実…

最近の記事

  1. 長十郎
  2. COMOLI シルクネルシャツ
  3. WiMAX
  4. 甘柿
PAGE TOP