zoukankan      html  css  js  c++  java
  • mobiscroll之treelist使用

    前言

    进行前端开发工作也有一段时间了,一直以来都是渣渣,以前开通博客写过一段时间但是没坚持下来,现在想有时候还是得写写什么吧,自己遇到的新东西写写归纳总结一下总归是好的,并且能够与更多人交流分享,相互进步,总是美好的事情。

    前几天做开发遇到一个需求要做一个地址联动选择,找了找发现了mobiscroll,非常不错的一款控件,便研究了一下API,使用了起来。

    mobiscroll简介

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

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

    支持的框架:这里有官网上的截图,可以看到jQuery、 jQuery Mobile, Zepto.JS等都完美支持

    跨平台:可以在主流的移动和桌面浏览器上工作。支持iOS, Android, Windows Phone 8, Windows8, Blackberry, Amazon Kindle等平台。

    官网:https://mobiscroll.com/

    miboscroll使用

    我这里分享一个百度网盘的下载地址 http://pan.baidu.com/s/1c1VLZKO,大家可以下载使用。

    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) { //返回自定义格式结果
         } });
    复制代码

    3.options

    这里说一下animate,官网是这样描述的,默认值是undefiend,类型是String、Boolean。一般不设置animate属性,除非你需要。

    还有theme,官网上现在有这么一些样式,需要什么样的可以从头到尾试一试看看效果:

    还有display,控制显示的一个模式:

    如果里面的按钮不够,我们需要再添加按钮怎么办,这里可以添加buttons属性设置文字样式,点击执行事件:

    4.events

    这里我列举一下treelist包含的事件并简单的描述一下。

    (1)onBeforeClose(valueText, btn, inst)

    描述:在list关闭之前执行,如果返回false则不会关闭list。

    demo:

    $('#mobiscroll').mobiscroll().list({
        onBeforeClose: function (valueText, btn, inst) {
        }
    });

    (2)onBeforeShow(inst)

    描述:在list显示之前执行的事件,一样如果返回false则list不会显示。

    demo:

    $('#mobiscroll').mobiscroll().list({
        onBeforeShow: function (inst) {
        }
    });

    (3)onCancel(valueText, inst)

    描述:当取消按钮被点击的时候执行的事件。

    demo:

    $('#mobiscroll').mobiscroll().list({
        onCancel: function (valueText, inst) {
        }
    });

    (4)onChange(valueText, inst)

    描述:当value值改变的时候执行

    demo:

    $('#mobiscroll').mobiscroll().list({
        onChange: function (valueText, inst) {
        }
    });

    (5)onClosed(valueText, inst)

    描述:当list关闭的时候执行的回调函数

    demo:

    $('#mobiscroll').mobiscroll().list({
        onClosed: function (valueText, inst) {
        }
    });

    (6)onDestroy(inst)

    描述:当miboscroll实例被destoroy的时候回调

    demo:

    $('#mobiscroll').mobiscroll().list({
        onDestroy: function (inst) {
        }
    });

    (7)onHide(inst)

    描述:list 关闭的动画执行完毕后回调

    demo:

    $('#mobiscroll').mobiscroll().list({
        onHide: function (inst) {
        }
    });

    (8)onInit(inst)

    描述:mobiscroll实例初始化完成后执行

    demo:

    $('#mobiscroll').mobiscroll().list({
        onInit: function (inst) {
        }
    });

    (9)onMarkupReady(html, inst)

    描述:list的html代码已经生成,但是还没有显示到页面中的时候,这个时候可以进行标签的修改。例如添加自定义元素。它会在定位完成前执行。

    demo:

    $('#mobiscroll').mobiscroll().list({
        onMarkupReady: function (html, inst) {
        }
    });

    (10)onPosition(html, windowWidth, windowHeight, inst)

    描述:list定位完成后调用(包括初始化完成以及大小/方向调整之后)

    demo:

    $('#mobiscroll').mobiscroll().list({
        onPosition: function (html, windowWidth, windowHeight, inst) {
        }
    });

    (11)onSelect(valueText, inst)

    描述:当value被设置的时候,简单理解就是选择好了原始点击确定之后

    demo:

    $('#mobiscroll').mobiscroll().list({
        onSelect: function (valueText, inst) {
        }
    });

    (12)onShow(html, valueText, inst)

    描述:当list出现的时候

    demo:

    $('#mobiscroll').mobiscroll().list({
        onShow: function (html, valueText, inst) {
        }
    });

    (13)onValueTap(item, inst)

    描述:当用户点击list上面的值是调用

    demo:

    $('#mobiscroll').mobiscroll().list({
        onValueTap: function (item, inst) {
        }
    });

    4.实现

    通过上面的介绍,实现我们想要的效果基本是没有问题了。

    只是上面js代码中formatResult返回自定义格式结果还没有写好,是没有效果的,这里贴出代码:

    复制代码
    formatResult: function (array) { //返回自定义格式结果                          
                              province = $('#areaList>li').eq(array[0]).children('span');
                              city = $('#areaList>li').eq(array[0]).find('ul li').eq(array[1]);
                              $("input[name='province']").val(province.attr('data-id'))
                              $("input[name='city']").val(city.attr('data-id'))
                              $("input[name='arry']").val(array)
                              return  province.text() + ' ' + (city.text() == null ? "" : city.text())                   
                        }
    复制代码

    这里我将data-id取出来放在了两个hidden里面。

    大家可能看到代码里面执行了一个onShow:showDialog,这里是因为插件默认的确定在左边,取消在右边,UI说不对,必须要换个位置,所以写了一个这样的函数,这里也贴出来:

    复制代码
    function showDialog(){ 
                        var s=$('div.dwb-s').html(),c=$('div.dwb-c').html();                    
                        //dialog显示的内容  
                        $("div.dwbw").each(function(i,dom){  
                            var that= $(this);                     
                            //将确定按钮与取消按钮交换位置  
                            if(that.hasClass("dwb-s")){  
                                that.removeClass("dwb-s").addClass("dwb-c");  
                                that.html(c)
                            }else{  
                                that.removeClass("dwb-c").addClass("dwb-s");  
                                that.html(s)
                            }  
                        });  
                    }
    复制代码

    贴一个最终实现的效果图:

  • 相关阅读:
    hdu 4710 Balls Rearrangement()
    hdu 4707 Pet(DFS水过)
    hdu 4706 Children's Day(模拟)
    hdu 4712 Hamming Distance(随机函数暴力)
    csu 1305 Substring (后缀数组)
    csu 1306 Manor(优先队列)
    csu 1312 榜单(模拟题)
    csu 1303 Decimal (数论题)
    网络爬虫
    Python处理微信利器——itchat
  • 原文地址:https://www.cnblogs.com/xiaoleiel/p/8316426.html
Copyright © 2011-2022 走看看