Picker

JavaScript

iOSのようなピッカーを実装できるJSライブラリ「Picker」

Pickerは、iOSのUIのようなピッカーを実装することができるJSライブラリです。選択画面のアイテムリストはとても滑らかに動作します。特にスマホやタブレットからの操作は快適です。

複数の列にも対応

デモ

デモページでは、各項目をクリックするとアイテムを選択する画面が下からスライドで表示されます。選択画面の領域以外の場所にはオーバーレイがかかるので、アイテムを選択することに集中しやすいです。

スマホからの場合は、タッチに対応しているのでアイテムも直感的に上下に動かすことができます。パソコンからの場合はドラッグしながら上下にアイテムを動かすことが可能です。

任意のアイテムを選択したら、選択画面の右上にある「確定」をクリックすればOKです。キャンセルする場合は左上にある「取消」を選択します。

シンプルなデザイン&レイアウトで動作もとても滑らかなので、特にスマホやタブレットでは直感的に操作できると思います。

オプションには、options.title (String)、options.data (Array)、options.selectedIndex (Array)が用意されているほか、picker.change、picker.select、picker.cancel、picker.valuechangeといったイベントのセッティングなども可能です。

また、選択する列も単一だけではなく複数の列にも対応しています。カスタマイズ性にも優れているiOSライクなピッカーを実装したいという人は、ぜひ「Picker」をチェックしてみてください。

Picker

関連記事

  1. no-image

    JavaScript

    多彩な方向に表示できるツールチップ「jq-tooltip」

    jq-tooltipは多彩な方向に表示可能なツールチップを実装できるj…

  2. no-image
  3. simpler-sidebar

    JavaScript

    シンプルでスタイリッシュなサイドナビゲーション「simpler-sidebar」

    simpler-sidebarは、シンプルでスタイリッシュなサイドナビ…

  4. Multi-Level Menu

    JavaScript

    流れるような遅延アニメーションが美しい階層化メニュー実装「Multi-Level Menu」

    Multi-Level Menuは流れるような遅延アニメーションが美し…

  5. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで紹介したjQueryプラグイン12選のまとめ 2012/08 – 2012/0…

    2012年8月〜2012月9月までの当ブログで紹介したjQueryプラ…

  6. Zoom Slider

    JavaScript

    ズーム機能を備えたシンプルなコンテンツスライダー「Zoom Slider」

    Zoom Sliderは奥行き感を演出したズーム機能を備えたシンプルな…

最近の記事

  1. Soundcore Liberty Neo(第2世代)
  2. EH-NA0B
  3. KPS-88
  4. Happy Plugs AIR1
  5. cheero Stream 10000mAh

アーカイブ

PAGE TOP