猿记录

一个记录、分享的博客

您的位置:主页 > 资源分享 > 资源下载 >

移动端select 日期插件mobiscroll

2017-02-24 13:46:17 作者:yxl 次阅读 资源下载

mobiscroll简介

绝大多数人使用mobiscroll都将其作为一款日期和时间选择器(data&time),其实除了这个功能,它还有其他非常多的功能,比如color、select、form、number、range。。。还有今天我为大家介绍的地址联动。

mobiscroll支持各功能单独下载使用,这里附上官网上列出的功能
官网:https://mobiscroll.com/

1.html调用

下载引入就不详细说了,说下tree页面调用

复制代码
<ul id="areaList" style="display:none;">
                          <li>
                            <span data-id="1">北京</span>
                            <ul>
                              <li data-id="2">北京市</li>
                            </ul>
                          </li>
                          <li  class="dw-sel">
                            <span data-id="21"  class="dw-sel">天津</span>
                            <ul>
                              <li data-id="22">天津市</li>
                            </ul>
                          </li>
                          <li>
                            <span data-id="40">上海</span>
                            <ul>
                              <li data-id="41">上海市</li>
                            </ul>
                          </li>
                          <li>
                            <span data-id="61">重庆</span>
                            <ul>
                              <li data-id="62">重庆市</li>
                            </ul>
                          </li>
                          <li>
                            <span data-id="102">河北省</span>
                            <ul>
                              <li data-id="103">石家庄</li>
                              <li data-id="128">唐山</li>
                              <li data-id="144">秦皇岛</li>
                              <li data-id="153">邯郸</li>
                              <li data-id="174">邢台</li>
                              <li data-id="195">保定</li>
                              <li data-id="222">张家口</li>
                              <li data-id="241">承德</li>
                              <li data-id="254">沧州</li>
                              <li data-id="272">廊坊</li>
                              <li data-id="284">衡水</li>
                            </ul>
                          </li>
                          <li>
                            <span data-id="297">山西省</span>
                            <ul>
                              <li data-id="298">太原</li>
                              <li data-id="310">大同</li>
                              <li data-id="323">阳泉</li>
                              <li data-id="330">长治</li>
                              <li data-id="345">晋城</li>
                              <li data-id="353">朔州</li>
                              <li data-id="361">晋中</li>
                              <li data-id="374">运城</li>
                              <li data-id="389">忻州</li>
                              <li data-id="405">临汾</li>
                              <li data-id="424">吕梁</li>
                            </ul>
                          </li>
                          <li>
                            <span data-id="439">内蒙古区</span>
                            <ul>
                              <li data-id="440">呼和浩特</li>
                              <li data-id="451">包头</li>
                              <li data-id="462">乌海</li>
                              <li data-id="467">赤峰</li>
                              <li data-id="481">通辽</li>
                              <li data-id="491">鄂尔多斯</li>
                              <li data-id="500">呼伦贝尔</li>
                              <li data-id="515">巴彦淖尔</li>
                              <li data-id="524">乌兰察布</li>
                              <li data-id="537">兴安盟</li>
                              <li data-id="544">锡林郭勒盟</li>
                              <li data-id="557">阿拉善盟</li>
                            </ul>
                          </li>
</ul>
 <input type="hidden" name="province" value="">
 <input type="hidden" name="city" value="">
 <input type="hidden" name="arry" value=""> 
复制代码

官网上每一种调用方法都有一个demo,只是打开比较慢,不知道是不是我网络的原因。

2.js调用

 

复制代码
$('#areaList').mobiscroll().treelist({
                    theme: 'android-holo-light',//样式  
                    lang: 'zh',//语言  
                    display: 'bottom',//指定显示模式  
                    fixedWidth: [100,100],//2组滚动框的宽度  
                    placeholder: '请选择开户行地区',//placeholder
                    inputClass:'ui-input', //为插件生成的input添加样式
                    inputName:'111',
                    btnClass:'', //设置按钮显示的样式
            labels: ['省', '市'],
                    headerText:function(valueText){return "请选择地区"},
                    rows:5,//滚动区域内的行数  
//                    showLabel:true,//是否显示labels  
                    onSelect:function(valueText,inst){
                       
                    },
                    onShow:showDialog,
                    defaultValue: [5,1],//设置初始值  
                    formatResult: function (array) { //返回自定义格式结果                          
                    
                    }
                });
复制代码

下载地址

点击下载

凡本站注明“本站”或“投稿”的所有文章,版权均属于本站或投稿人,未经本站授权不得转载、摘编或利用其它方式使用上述作品。

编辑:yxl 关键词:
0

网友评论