jQuery點擊按鈕遮罩彈出省市地區三級聯動



87 346 116



特效描述:jQuery 點擊按鈕 遮罩彈出 省市地區 三級聯動,jQuery點擊按鈕遮罩彈出省市地區三級聯動

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/thr-linkage.css">

2. 引入JS

<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/thr-linkage-1.0.js"></script>
<script type="text/javascript" src="js/areaData.js"></script>

3. HTML代碼

<br>
<div class="form-div" style="text-align: center;">
    <input type="button" value="示例1:地區三級聯動" id="thisBind1">
    <br>
    <br>
    <input type="button" value="示例2:地區二級聯動" id="thisBind2">
    <br>
    <br>
    <input type="button" value="示例3:注入默認選中項" id="thisBind3">
</div>
<!-- 請在html加載完成后引入插件 -->
<script type="text/javascript">
    $(function () {
        var thisThr1 = $.linkAgeInit({
            shade:0.4,
            dataIndex:3,
            dataModel:'data',
            dataSource:app_area_data,
            showSelectHtml:'<li data-id="{code}" data-route="{route}" class="">{area}</li>',
            showCheckHtml:'<dd data-id="{code}" data-route="{route}" class="{_on_}">{area}</dd>',
            dataOnePid:1,
            dataIdKey:'code',
            closeCallBack:function (data) {
                console.log('你點擊了關閉!' , data);
            },
            confirmCallBack:function (data) {
                console.log('你點擊了確定!' , data);
            }
        });
        var thisThr2 = $.linkAgeInit({
            shade:0.4,
            dataIndex:2,
            dataModel:'data',
            dataSource:app_area_data,
            showSelectHtml:'<li data-id="{code}" data-route="{route}" class="">{area}</li>',
            showCheckHtml:'<dd data-id="{code}" data-route="{route}" class="{_on_}">{area}</dd>',
            dataOnePid:1,
            dataIdKey:'code',
            closeCallBack:function (data) {
                console.log('你點擊了關閉!' , data);
            },
            confirmCallBack:function (data) {
                console.log('你點擊了確定!' , data);
            }
        });
        $("#thisBind1").click(function () {
            thisThr1.open('.form-div');
        })
        $("#thisBind2").click(function () {
            thisThr2.open('.form-div');
        })
        $("#thisBind3").click(function () {
            thisThr1.set([
                {id:442001001,name:'石岐區街道'},
                {id:442001006,name:'五桂山街道'},
                {id:442001004,name:'西區街道'}
            ]);
            thisThr1.open('.form-div');
        })
    })
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 浮動提示框 切換按鈕 表單 表單美化 表單插件 表單美化插件 浮動菜單 浮動導航 提示框/彈出層 復選框 復選按鈕 復選框美化 三級聯動 城市選擇 城市選擇器 添加標簽
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表