JSタッチスクリーンウェブ版のapp風ポップアップ型スクロールリスト選択器/日付選択器

モバイル端末のウェブ版アプリでリストボックスを使用する際、伝統的なリストボックスは使いにくく、一般的に少し良いインタラクション機能のインターフェースは直接リストボックスを使用しません。したがって、アプリの原生リストボックスはポップアップリスト選択です。ウェブ型アプリもユーザーエクスペリエンスを考慮すると、当然そのように作成されるべきです。最近、ウェブ版アプリの開発中にこのようなニーズに直面しました。日付選択器だけでなく、データリスト、変数リスト選択など、リストボックス型のニーズも多く、ネットで探してみると、mobiscrollという非常に良いものを見つけましたが、ダウンロードが面倒で、不思議なことにjquery.mobile、jeasyui.mobileはこのようなコントロールを提供していません。なぜでしょうか？フロントエンド開発に特化していない私は、ほぼ全機能型の私はそれほど難しくないと感じています。家で一晩中試してみて、いくつかの方法を試して、ほぼ完璧な方法を見つけました！その後の使用で不断完善し、今や多くのプログラマーに公開しています。

まずは効果図を見てみましょう：

このコントロールのスクロールはdivの原生スクロールメソッドを使用しており、タッチスクリーンで使用すると惯性スクロール効果があります。マウスでの操作も可能ですが、惯性スクロール効果は実装されていません。このコントロールはタッチスクリーンに主に向けられており、タッチスクリーンでの使用が完璧であれば良いので、マウス版のエフェクトに手を出すのは面倒なのでしょう。このコントロールはjQueryプラグインとして封装されており、ボーダーはありません。100%幅で非常に使いやすいです。例えば、ポップアップウィンドウに適用すると上の図の効果になります。

コードの使用方法は以下の通りです：

$("#scrollbox").EasyScrollBox({
fontSize: 32,
fontFamily: '',
color: '#000',
lineHeight: 1.5,
 2,
value: '4',
data: data1,
textFiled: 'txt',
valueFiled: 'id',
onSelected: function (index, value) {
$("#Text1").val(value);
}
});

使用弹出窗口的完整使用方法コードは以下の通りです。効果は上の図のようになります：

!-- ui-dialog -->
<div id="dialog" class="easyui-dialog" style="padding:20px 6px;width:80%;" データ-options="inline:true,modal:true,closed:true,title:'設定値'">
<div id="scrollbox"></div>
<div class="dialog-button">
<a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%;height:35px" onclick="$('#dialog').dialog('close')">確 定</a>
</div>
</div>
<script type="text/javascript">
$(function () {
//オブジェクトデータ
var data = [];
for (var i = 0; i < 100; i++) {
var m = {};
m.id = i;
m.txt = "データ" + i;
data.push(m);
}
$("#dialog").dialog();
// ダイアログを開くリンク
$("#dialog-link").click(function (event) {
$("#dialog").dialog("open").dialog('center');
//再割り当て
$("#scrollbox").EasyScrollBox({
fontSize: 32,
fontFamily: '',
color: '#000',
lineHeight: 1.5,
 2,
value: '4',
data: data,
textFiled: 'txt',
valueFiled: 'id',
onSelected: function (index, value) {
$("#Text1").val(value.id);
}
});
event.preventDefault();
});
});
</script>

こんな感じでも使えます：

//文字データ
var data1 = [];
for (var i = 0; i < 100; i++) {
data1.push(i);
}
$("#scrollbox").EasyScrollBox({
fontSize: 32,
fontFamily: '',
color: '#000',
lineHeight: 1.5,
 2,
value: '4',
data: data1,
onSelected: function (index, value) {
$("#Text1").val(value);
}
});
$("#dialog-link1").click(function (event) {
$("#dialog").dialog("open").dialog('center');
event.preventDefault();
});

　もし少し立体効果が欲しい場合は、スタイルを直接追加してください：

#cover_top_EasyScrollBox{
background: -ms-linear-gradient(top, #000000, #ccc); /* IE 10 */
background:-moz-linear-gradient(top,#000000,#ccc);/*Firefox*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#ccc));/*Google*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#ccc)); /* Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(top, #000000, #ccc); /*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(top, #000000, #ccc); /*Opera 11.10+*/
}
#cover_bottom_EasyScrollBox{
background: -ms-linear-gradient(top, #ccc, #000000); /* IE 10 */
background:-moz-linear-gradient(top, #ccc, #0000ff);/*Firefox*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#000000));/*Google*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#000000)); /* Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(top, #ccc, #000000); /*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(top, #ccc, #000000); /*Opera 11.10+*/
}

以上は、編集者が皆様に紹介したjs開発タッチスクリーンウェブ版appエミュレーションポップアップ型スクロールリスト選択器です/日付選択器、皆様に役立つことを願っています。何かご不明な点があれば、コメントを残してください。編集者は迅速に回答します。皆様の呐喊教程サイトへのサポートに感謝します！

声明：本文の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、本サイトは所有権を持ちません。また、人工的な編集は行われていません。著作権侵害を疑う内容があれば、メールを送信してください：notice#oldtoolbag.com（メールを送信する際には、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認がついたら、本サイトは即座に侵害を疑われるコンテンツを削除します。）