【jQuery】動的でモバイルフレンドリーなjQueryデータピッカープラグインios.picker.js

jQuery

jquery.ios.picker.3d.js

March 5, 2018

jquery.ios.picker.3d.jsは、動的でモバイルフレンドリーなjQueryデータピッカープラグイン

How to use it

iOSデータピッカーのメインスタイルシートをインクルード

<link href="index.css" rel="stylesheet">

データピッカーを配置するコンテナを作成

<div id="example-picker"></div>

ファイルをHTMLページの一番下に置きます。

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.ios.picker.js"></script>

iOSデータピッカーを有効にして、データ配列に独自のデータを定義

$("#example-picker").picker({
  data: ['jQuery', 'Script', 'Net', 'AngularJS', 'ReactJS', 'VueJS', 'React Native']
}

行の高さを設定

$("#example-picker").picker({
  lineHeight: 50, // default: 30
}

選択された項目を設定

$("#example-picker").picker({
  selected: 0
}

ユーザーが選択したアイテムを取得して出力

<div class="output"></div>
$("#example-picker").picker({
  data: ['jQuery', 'Script', 'Net', 'AngularJS', 'ReactJS', 'VueJS', 'React Native'],
  lineHeight: 30,
  selected: 0
}, function (s) {
  $(".output").html(s);
  $(".example-picker").data("value", s);
});

Latest Posts

Related Posts