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

Complexifyパスワードの強さを視覚的にフィードバックしてくれる「Complexify」前のページ

オシャレなスクロールエフェクトを実装できる「jQuery Smoove」次のページno-image

関連記事

  1. Siema

    JavaScript

    軽量でシンプルで依存性のないカルーセルを実装できる「Siema」

    Siemaは軽量でシンプル、そしてjQueryなどの依存性のないカルー…

  2. A simple jQuery Accordion with unlimited nesting

    JavaScript

    シンプルなアコーディオンを実装する「A simple jQuery Accordion with u…

    シンプルで見やすいアコーディオンを実装することができる「A simpl…

  3. JavaScript

    リストのテキストを1つずつ垂直にスライドさせていくjQueryのティッカー「Totem Ticker…

    おもしろいですね、これ。リスト化したli要素を1つずつ垂直方向にスライ…

  4. jQuery Tags Input

    JavaScript

    シンプルでお洒落なタグを入力することができるjQueryプラグイン「jQuery Tags Inpu…

    とても便利で面白いjQueryプラグインがあったのでご紹介します。シン…

  5. Raindrops.js

    JavaScript

    水面に雨粒が落ちてくるエフェクトが素敵なjQueryプラグイン「Raindrops.js」

    Raindrops.jsは水面に雨粒が落ちてくる素敵なエフェクトを実装…

  6. ScrollMenu.js

    JavaScript

    縦横配置やナビメニューと統合できる便利なスクロールバー「ScrollMenu.js」

    ScrollMenu.jsは通常の味気ないスクロールバーを便利で新しい…

最近の記事

  1. ゴムの耳栓
  2. ライオンコーヒー(バニラマカダミア)
PAGE TOP