首頁 > web前端 > js教程 > 主體

mobile-select-area插件的使用方法

PHP中文网
發布: 2018-05-10 14:42:53
原創
2691 人瀏覽過

顧名思義,mobile-select-area插件就是使用在行動端上的進行地區選擇的插件,而且使用方法簡單,我就說我是怎麼用的吧

#一、準備工作

#首先肯定要下載外掛程式對應的css+js檔,

#當你下載好這些東西之後就是萬事俱備只欠東風->寫程式碼。 。 。 。首先這個是使用在行動端上的插件,就必須把視角控制在行動端上,不然可能在瀏覽器上看的舒舒服服,變成手機端怎麼就不好看了

然後按順序引入你下載好的文件,這個我就截圖一下好了

#可能有朋友會有疑問這個dialog.js是幹嘛的?這也是必須的,他是用來實現在你點擊文字框時候的出現彈窗內容,讓你能選擇地區;

二、實現方法+效果

外掛API的一些介紹,API的介紹轉自#這裡#裡面也有GitHUb位址可以下載資源

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,空格分隔文字
登入後複製

我就放前端核心程式碼,基本上複製了就能使用,想做成什麼樣式,就需要自己去設計和實現,我就不提供了

<p class="shopaddress spaing">
<i></i>
<input type="text" placeholder="地址:请选择省市区" id="check_area" >
<span id="_check" class="check"><i></i></span>
<script>
var selectArea = new MobileSelectArea();
selectArea.init({trigger:&#39;#check_area&#39;,data:&#39;js/data.json&#39;,default:1,level:3});
</script>
</p>
登入後複製

大家應該看到js那段了,使用方法就是這麼簡單,新建一個對象,然後透過API進行設定,我這段程式碼是透過input裡面的id控制輸出位置,透過trigger設定ID值確認地區輸出位置,data是放置彈跳視窗出來時候的地區資訊,default:0或1,就是是否預設選擇第一行,level就是輸出地區等級,3:省-市-區; 2:省-市;1:市;

############以下是具體的實現效果################ ############## ###

以上是mobile-select-area插件的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板