热门关键字:
jquery > jquery插件 > jquery下拉菜单 > 分享一款省市地区三级联动弹出层Jquery特效

分享一款省市地区三级联动弹出层Jquery特效

79006
所属分类:jquery下拉菜单
发布时间:2013/1/4 11:44:27
下载量:18149
评论数:23
转载请自觉注明原文:http://www.jq-school.com/Detail.aspx?id=64
Jquery特效是一款非常实用的功能,它摆脱了通俗的下拉框联动效果,直接弹出一个层让你选择,增强用户体验效果,带有4个选项卡,分别为热门城市、省份、城市、区县,点击省列表自动跳到城市列表,列表多的话会自动分页,可以左右滚动翻页,引入了3个省、市、区JSON数据包,使用非常简单,引入相关的文件即可,讲这么多大家都流口水了吧,不说了看效果吧
 
主要功能代码如下:
(function() {
    $(".proCitySelAll").click(function(event) {
        if ($("body").data("CitysAll") == null) {
            sendAllCitiesAjax();
        }
        $(this).select();
        $(".provinceCity").hide();
        $(".provinceCityAll").hide();
        $("#dimCityQuery").hide();
        var o2 = $(this).offset();
        var l2 = o2.left;
        var t2 = o2.top;
        var h2 = $(this).height();
        $(".provinceCityAll").css("top", t2 + h2 - 1).css("left", l2).toggle();
        $(".provinceCityAll").click(function(event) {
            event.stopPropagation();
        });
        event.stopPropagation();
        $("html").click(function() {
            $(".provinceCityAll").hide();
        });
        $("input.proCitySelAll").removeClass("current2");
        $(this).addClass("current2");
        $(".provinceCityAll").find(".tabs").find("a").removeClass("current");
        $(".provinceCityAll").find(".tabs").find("a[tb=hotCityAll]").addClass("current");
        $(".provinceCityAll").find(".con").children().hide();
        $(".provinceCityAll").find(".con").find(".hotCityAll").show();
        if ($("body").data("allProvinces") == null) {
            sendAllProvinceAjax();
        }
        if ($("body").data("allCountys") == null) {
            sendAllCountiesAjax();
        }
        $(".provinceCityAll").find(".tabs").find("a").click(function() {
            if ($(this).attr("tb") == "cityAll" && $(".provinceAll .list .current").val() == null) {
                return;
            };
            if ($(this).attr("tb") == "countyAll" && $(".cityAll .list .current").val() == null && $(".hotCityAll .list .current").val() == null) {
                return;
            };
            $(".provinceCityAll").find(".tabs").find("a").removeClass("current");
            $(this).addClass("current");
            var tb = $(this).attr("tb");
            $(".provinceCityAll").find(".con").children().hide();
            $(".provinceCityAll").find(".con").find("." + tb).show();
        });
    });
})();
 
 
效果如下:
 




如果您觉得本作品对您的学习有所帮助:支付鼓励



关键字:层特效 三级联动 二级菜单 省市区 选项卡 选择城市 导航菜单 json数据解析
  • 分享一款省市地区三级联动弹出层Jquery特效如果你喜欢学院的资源就下载吧,亲,谢谢!
  • 分享一款省市地区三级联动弹出层Jquery特效
  • 分享一款省市地区三级联动弹出层Jquery特效
  • 提示:如果网络问题无法下载,请多尝试几次,与 网站管理员联系 或 本站留言 !

声明: 本站内容均为网友原创或整理于互联网,版权归作品最初创作人,转载请注明(出处)原文链接,转载前请邮件至磐temdy@qq.com,一旦发现造成侵权行为,后果自负。。

友荐云推荐