前言
進行前端開發工作也有一段時間了，一直以來都是渣渣，以前開通博客寫過一段時間但是沒堅持下來，現在想有時候還是得寫寫什么吧，自己遇到的新東西寫寫歸納總結一下總歸是好的，並且能夠與更多人交流分享，相互進步，總是美好的事情。
前幾天做開發遇到一個需求要做一個地址聯動選擇，找了找發現了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等平台。
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) } }); }
貼一個最終實現的效果圖:
