利用jQuery實現遮罩彈出省市區城市代碼



13 51 18



特效描述:利用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>



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


熱門標簽: 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 切換按鈕 表單 表單美化 表單插件 表單美化插件 lightbox 城市選擇 城市選擇器
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子 重庆时时现场直播视频 十一运夺金开奖结果查询 重庆时时彩前三组三遗漏统计 青海快3开奖直播 瑜伽赚钱不 重庆时时彩官方开奖 江苏11选5任三 印尼分分彩预测计划 什么香烟最赚钱 128彩网游戏 新快3新快三开奖查询 陕西快乐10分走势表 中国福利彩票双色球开奖时间 能赚钱不封号 福彩25选5基本走势图 新浪彩票25选7开奖结果