jQuery Mobile Datums-Plug-in Mobiscroll-Nutzungsanweisungen_jquery

In der jüngsten Mobilentwicklung verwende ich jQuery Mobile. Es gibt nicht so viele mobile Plug-Ins wie Web-Plug-Ins, und es gibt weniger Auswahlmöglichkeiten. Einige davon müssen selbst gepackt werden, aber die Fähigkeiten sind es nicht genug.

JQM bietet auch ein integriertes Datums-Plug-in, aber der Stil sieht nicht gut aus, also musste ich Baidu und Google verwenden und zwei jquery-mobile-datebox und mobiscroll-2.3 finden

jqueryMobileDatebox funktioniert auf dem Board nicht gut und ist etwas langsam

Die Leistung von Mobiscroll ist besser als die erstere, der Effekt ist einfacher und das Wischen ist flüssiger

Lassen Sie uns sie miteinander vergleichen

Liebe Leserinnen und Leser, welches sieht Ihrer Meinung nach besser aus

Wie auch immer, ich denke, Mobiscroll ist effektiver. Schauen wir uns einige Möglichkeiten an, diesen Kerl zu verwenden

Schritt eins: Gehen Sie zur offiziellen Website, um ein komprimiertes Paket herunterzuladen. Sie müssen sich vor dem Herunterladen registrieren. Beim Herunterladen können Sie das von Ihnen verwendete Framework und den Skin-Stil auswählen, siehe Bild unten

Es wird davon ausgegangen, dass Sie sich erfolgreich registriert und heruntergeladen haben

Der zweite Schritt besteht darin, eine neue HTML5-Datei zu erstellen, jquery.js, jquerymobile.js und andere notwendige Dateien zu importieren und den folgenden Code in Ihre Datei zu schreiben:

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

Wir können die Datumssteuerung wie folgt initialisieren:

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

Schauen Sie sich eine Vorschau an, um zu sehen, ob es einsatzbereit ist! Nur diese Schnittstelle ist auf Englisch, was für Chinesen etwas unbequem ist, und die offizielle Website bietet kein chinesisches Sprachpaket, aber das spielt keine Rolle. Die API der offiziellen Website ist immer noch gut Verwendete Attribute, um es an das herkömmliche Datumsformat anzupassen.

//初始化日期控件
  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);

Das ist es. Werfen wir einen Blick auf die Renderings

Sie können es jetzt deutlich sehen. Ich werde es nicht aufschreiben, sondern nur so viel. Die DOCS auf der offiziellen Website sind sehr detailliert, daher werde ich sie hier nicht einzeln auflisten. Freunde, die interessiert sind, können sie studieren.