Heim > Web-Frontend > js-Tutorial > Hauptteil

Mobiles Datums- und Auswahl-Plug-in mobiscroll

不言
Freigeben: 2018-07-09 17:30:27
Original
3719 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich das mobile Datums- und Auswahl-Plug-in mobiscroll vor. Es hat einen gewissen Referenzwert. Jetzt können Freunde in Not darauf verweisen.

In vielen Formen können wir es verwenden -Ins werden häufig verwendet. Es gibt viele solcher Plug-Ins. Hier ist ein sehr nützliches Plug-In für mobile Daten: mobiscroll

Führen Sie zunächst Plug-In-bezogene Dateien ein

<link href="css/mobiscroll.css" rel="stylesheet" />
<link href="css/mobiscroll_date.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script> 
<script src="js/mobiscroll_date.js"></script> 
<script src="js/mobiscroll.js"></script>
Nach dem Login kopieren

Finden Sie das Datumselement div, das eingefügt werden muss

<input style="display:inline-block;width: 72%;height: 0.6rem;border:1px solid #ccc;text-align: left;font-size:0.24rem;" name="page1_time" type="text" name="USER_AGE" id="USER_AGE" readonly class="input" />
Nach dem Login kopieren

Initialisieren

$(document).ready(function() {
    var currYear = (new Date()).getFullYear();    
    var opt={};
    opt.date = {preset : &#39;date&#39;};
    opt.datetime = {preset : &#39;datetime&#39;};
    opt.time = {preset : &#39;time&#39;};
    opt.default = {
        theme: &#39;android-ics light&#39;, //皮肤样式
        display: &#39;modal&#39;, //显示方式 
        mode: &#39;scroller&#39;, //日期选择模式
        dateFormat: &#39;yyyy-mm-dd&#39;,
        lang: &#39;zh&#39;,
        showNow: true,
        nowText: "今天",
        startYear: currYear - 50, //开始年份
        endYear: currYear + 10 //结束年份
    };    
    $("#USER_AGE").mobiscroll($.extend(opt[&#39;date&#39;],opt[&#39;default&#39;]));
});
Nach dem Login kopieren

Die Darstellungen sind wie folgt:

Das Plug-In verfügt auch über eine Auswahlfunktion. Sie können die offizielle Website des JQ-Plug-Ins überprüfen

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für alle nützlich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

js verschiebt jedes Element an eine bestimmte Position

Über die Implementierung der JS-Effektfunktion

Das obige ist der detaillierte Inhalt vonMobiles Datums- und Auswahl-Plug-in mobiscroll. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage