js組件開發-移動端地區選擇控件mobile-select-area

移動端地區選擇控件mobile-select-area

由於之前的[js開源組件開發]js手機聯動選擇地區仿ios 開源git 很受歡迎，於是我又對其進行了一些優化，包括可選的范圍變大了，添加了默認空首地址的功能，也添加了更多api參數,首先我們先來看下這次的效果圖.

它的github地址請點擊https://github.com/tianxiangbing/mobile-select-area

它的demo演示請點擊 http://www.lovewebgames.com/jsmodule/mobile-select-area.html

這次還是依然引用了dialog這個插件,但刪除了zeptojs，改用成了jquery,因為zepto還是有一些動畫的計算有問題，當然也可以兼容zeptojs，隨你喜歡吧，但去除了tap事件，改用click事件，你可以選擇加載fastclick這個插件來加快點擊速度 。

好了，先來介紹下API

default:0||1

0為空,true時默認選中第一項,默認1

trigger:

觸發彈窗的DOM元素 ，可以是input或其他

value:

初始值,

level: int

級別數，默認是3級的

separator: ,

id值分隔符

eventName:tap|click

觸發事件名稱，默認click,使用zeptojs的可以用tap事件

data:

當data為json對象時可以直接解析,此時直接接收數組
當data為string發送ajax請求后返回json,格式如下：

{
    "data": [{
        "id": 1,
        "name": "浙江省",
        "child": [{
            "id": "1",
            "name": "杭州市",
            "child": [{
                "id": 1,
                "name": "濱江區"
            }]
        }]
    }, {
        "id": 2,
        "name": "江蘇省",
        "child": [{
            "id": "1",
            "name": "南京",
            "child": [{
                "id": 1,
                "name": "解放區"
            }]
        }]
    }, {
        "id": 3,
        "name": "湖北省"
    }]
}

callback:function(scroller,text,value)

第一個是容器，第二個是選中后的text值，第三個參數是選中后的id。
並且this指向當前對象。
選中后的回調，默認有填充trigger的value值，以及賦值它后面緊跟着的hidden的value值，以逗號分隔id，空格分隔文字

通過這個插件，我們還可以通過修改數據源的方式滋生出另一個組件，就是日期選擇組件，如下圖：

JS組件-手機端選擇日期的地址是：http://www.lovewebgames.com/jsmodule/mobile-select-date.html

github源碼地址是：https://github.com/tianxiangbing/mobile-select-date

謝謝觀看!