如何使用jQuerymobile插件——Mobiscroll-创新互联-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

如何使用jQuerymobile插件——Mobiscroll-创新互联

Mobiscroll是一款手机的日期控件,相当于PC端的my97datepicker,虽然说my97datepicker在移动端也能使用,但是总感觉看起来不太好啦,废话不多说,开始看看Mobiscroll怎么使用吧

首先让大家看看Mobiscroll的界面是什么样的如何使用jQuery mobile插件——Mobiscroll,是不是很像闹钟呀?这种效果是怎么做出来的呢?

专注于为中小企业提供成都做网站、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业甘南免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上1000+企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

先下载Mobiscroll,然后把其中的css和js文件导入,注意:图片要和css在同一个目录下,不然会找不到的如何使用jQuery mobile插件——Mobiscroll当然,都说了是移动端的插件,肯定不要忘记导入jQuery Mobile中的文件啦,具体要导入的文件如下如何使用jQuery mobile插件——Mobiscroll,好啦,文件引入完全啦,空间代码:

    
Select Date:    
    

还没完呢,还要初始化日期控件


$(document).ready(function(){
    $('input:jqmData(role="datebox")').mobiscroll().date();
});

当然,这个还不能满足我们中国人的使用,要是想习惯我们中国人的习惯,还是要加上一下代码


$(document).ready(function(){
    var opt = {
                preset: 'date', //日期
                display: 'modal', //显示方式 
                dateFormat: 'yy-mm-dd', // 日期格式
                setText: '确定', //确认按钮名称
                cancelText: '取消',//取消按钮名籍我
                dateOrder: 'yymmdd', //面板中日期排列格式
                dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字
                endYear:2020 //结束年份
            };
            $('input:jqmData(role="datebox")').mobiscroll().date(opt);
});

这样的话就适合中国人使用啦,啊哈哈!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


文章名称:如何使用jQuerymobile插件——Mobiscroll-创新互联
文章链接:http://kswsj.cn/article/eocgs.html

其他资讯