jQuery Mobile 日付プラグイン Mobiscroll の使用方法_jquery

最近のモバイル開発では、jQuery Mobile が使用されています。モバイル プラグインは Web プラグインほど多くはなく、一部は自分でパッケージ化する必要がありますが、スキルは必要です。足りない。

JQM には組み込みの日付プラグインも提供されていますが、スタイルがあまり良くないため、Baidu と Google を使用する必要があり、2 つの jquery-mobile-datebox と mobiscroll-2.3 を見つけました

jqueryMobileDatebox はボード上で良好なパフォーマンスを発揮せず、パフォーマンスが少し遅い

mobiscroll のパフォーマンスは前者よりも優れており、効果はよりシンプルで、スワイプはよりスムーズです

一緒に比較してみましょう

読者の皆様、どちらが似合うと思いますか?

とにかく、mobiscroll の方が効果的だと思います。では、こいつの使い方をいくつか見てみましょう。

ステップ 1: 公式 Web サイトにアクセスして、圧縮パッケージをダウンロードします。ダウンロードする前に登録する必要があります。ダウンロードするときに、使用するフレームワークとスキン スタイルを選択できます。下の画像を参照してください

登録とダウンロードが正常に完了したものとします

2 番目のステップでは、新しい HTML5 ファイルを作成し、jquery.js、jquerymobile.js およびその他の必要なファイルをインポートし、次のコードをファイルに書き込みます。

 <div data-role="fieldcontain">
     <label for="txtBirthday">出生日期：</label>
     <input type="text" data-role="datebox"  id="txtBirthday" name="birthday" />
 </div>

次のように日付コントロールを初期化できます:

$('input:jqmData(role="datebox")').mobiscroll().date();

プレビューして、使用する準備ができているかどうかを確認してください。このインターフェイスだけが英語で、中国人にとっては少し不快です。公式 Web サイトには中国語の言語パックが提供されていませんが、公式 Web サイトの API はいくつかの共通設定ができるので問題ありません。従来の日付形式に準拠させるために属性を使用しました。

//初始化日期控件
  var opt = {
    preset: 'date', //日期
    theme: 'jqm', //皮肤样式
    display: 'modal', //显示方式 
    mode: 'clickpick', //日期选择模式
    dateFormat: 'yy-mm-dd', // 日期格式
    setText: '确定', //确认按钮名称
    cancelText: '取消',//取消按钮名籍我
    dateOrder: 'yymmdd', //面板中日期排列格式
    dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字
    endYear:2020 //结束年份
  };
  
  $('input:jqmData(role="datebox")').mobiscroll(opt);

レンダリングを見てみましょう

今でははっきりとわかります。公式ウェブサイトの DOCS は非常に詳細なので、ここでは詳しく説明しません。興味がある人は調べてください。