js实现仿阿里巴巴城市选择框效果实例


Posted in Javascript onJune 24, 2015

本文实例讲述了js实现仿阿里巴巴城市选择框效果。分享给大家供大家参考。具体分析如下:

这并不是一个城市选择插件,在这里介绍只是为了mark一下二级联动的方法,此效果适用于有二级子菜单的效果,如导航栏、城市选择、类别选择等等。

样式效果是基于阿里的样式,懒得做其他调整,在area.css中仅仅是为了修改浏览器兼容性略做了一点调整。

城市数据是通过js构造,当然也可以通过后端取得数据,不过感觉没必要。

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script> 
<script type="text/javascript" src="area.js"></script> 
<link rel="stylesheet" href="area.css" type="text/css" /> 
<style type="text/css"> 
/*reset css*/ 
*{margin:0;padding:0;} 
a{text-decoration: none;} 
/*appearence css*/ 
.area{height: 32px;line-height: 32px;font-size: 12px;background-color: #f8f8f8;border: 1px solid #ccc;border-top: 2px solid #ff8033;} 
.area b{color: #333;margin: 0 13px 0 10px;float: left;} 
.def_box{display: block;float: left;background-color: #fff;padding: 0 18px 0 10px;border: 1px solid #ccc;height: 20px;margin-top: 5px;line-height: 20px;cursor: pointer;position: relative;z-index: 300;}
</style> 
</head> 
<body> 
  <div class="area"> 
    <b>地区:</b> 
    <span class="def_box">选择地区</span> 
  </div> 
</body> 
</html>

area.css代码如下:

.sw-ui-area-box{position:absolute;left:0px;top:20px;width:446px;padding:3px;padding-top:2px;line-height:22px;z-index:88;background:#fff;border:1px solid #b2b2b2;box-shadow:0 0 3px #a8a8a8;} 
.sw-ui-area-bg{position:absolute;left:0;top:0;width:100%;_padding:3px;height:100%;*height:265px;} 
.sw-ui-area-body{background:#fff;position:relative;z-index:2;*zoom:1;padding:0 4px;} 
.sw-ui-area-box-link, 
.sw-ui-area-box-link:link,.sw-ui-area-box-link:visited{display:block;min-width:54px;padding-left:8px;color:#333;} 
.sw-ui-area-box-focus, 
.sw-ui-area-box-link:hover{background-color:#f5f5f5;color:#333;} 
.sw-ui-area-box-focus{background-color:#e6e6e6!important;} 
.sw-ui-area-box-nfocus{color:#f77400!important;background-color:#ffebd8!important;} 
.sw-ui-area-box-item{float:left;list-style-type: none;margin-bottom: 4px;display: inline-block;height:22px;line-height:22px!important;} 
.sw-ui-area-ab-all, 
.sw-ui-area-abArea, 
.sw-ui-area-ab-prov{padding:6px 0 6px 2px;} 
.sw-ui-area-ab-all{position:relative;*zoom:1;z-index:20;} 
.sw-area-abAll-link{padding-left:8px;} 
.sw-ui-area-abArea{overflow:hidden;border-bottom:1px dashed #ddd;*zoom:1;} 
.sw-ui-area-industryDistrict-area{overflow:hidden;border-bottom:1px dashed #ddd;padding-bottom:6px;padding-top:6px;*zoom:1;} 
.sw-ui-area-industryDistrict{color:#CB7575;font-weight:bold;padding-top:12px;padding-left:8px;padding-bottom:0;} 
.sw-ui-area-abArea-item{float:left;width:60px;line-height:20px;margin-right:24px;padding:1px 0;_display:inline;} 
.sw-ui-area-ab-prov, 
.sw-ui-area-ab-prov-items{*zoom:1;} 
.sw-ui-area-ab-prov:after, 
.sw-ui-area-ab-prov-items:after{content:".";display:block;height:0;clear:both;visibility: hidden;} 
.sw-ui-area-abProv-im{position:relative;float:left;margin-right:24px;width:60px;padding:2px 0;_display:inline;} 
.sw-ui-area-abAll-nearArea{position:absolute;top:6px;left:255px;} 
.sw-ui-area-abAll-abpd{padding:0px;position:absolute;top:6px;left:320px;}
.sw-ui-area-abAll-abpd-item{padding:0px;} 
.sw-ui-area-abAll-abpd-city{font-weight:700;} 
.sw-ui-area-ab-prov-itemLink{color:#333 !important;background:url(/static/img/filter.png) no-repeat 36px -72px;}
.sw-ui-area-ab-prov-itemLink:hover{background-color:#f5f5f5;} 
.sw-ui-area-ab-prov-show{z-index:99;} 
.sw-ui-area-ab-prov-show .sw-ui-area-ab-prov-items{display:block !important;} 
.sw-ui-area-ab-prov-items{display:none;width:188px;position:absolute;left:0px;top:24px;background:#f8f8f8;border:1px solid #a4a4a4;padding:6px;z-index:110;} 
.sm-mod-currentType .sw-ui-area-ab-prov-items{left:6px;} 
.sw-ui-area-ab-prov-item{float:left;width:64px;overflow:hidden;padding:2px 0;} 
.sw-ui-area-abProv-itemsubLink{color:#333 !important;overflow:hidden;height:22px;} 
.sw-ui-area-abProv-itemsubLink:hover{background:#f5f5f5;color:#333 !important;}

area.js代码如下:

var cityInit = ['请选择省份']; 
var cityArr = new Array();  
//cityArr[0] = new Array("北京","东城|西城|崇文|宣武|朝阳|丰台|石景山|海淀|门头沟|房山|通州|顺义|昌平|大兴|平谷|怀柔|密云|延庆");  
//cityArr[1] = new Array("上海","黄浦|卢湾|徐汇|长宁|静安|普陀|闸北|虹口|杨浦|闵行|宝山|嘉定|浦东|金山|松江|青浦|南汇|奉贤|崇明");  
//cityArr[2] = new Array("天津","和平|东丽|河东|西青|河西|津南|南开|北辰|河北|武清|红挢|塘沽|汉沽|大港|宁河|静海|宝坻|蓟县");  
//cityArr[3] = new Array("重庆","万州|涪陵|渝中|大渡口|江北|沙坪坝|九龙坡|南岸|北碚|万盛|双挢|渝北|巴南|黔江|长寿|綦江|潼南|铜梁 |大足|荣昌|壁山|梁平|城口|丰都|垫江|武隆|忠县|开县|云阳|奉节|巫山|巫溪|石柱|秀山|酉阳|彭水|江津|合川|永川|南川");  
cityArr[0] = new Array("北京","北京"); 
cityArr[1] = new Array("上海","上海"); 
cityArr[2] = new Array("天津","天津"); 
cityArr[3] = new Array("重庆","重庆"); 
cityArr[4] = new Array("河北","石家庄|邯郸|邢台|保定|张家口|承德|廊坊|唐山|秦皇岛|沧州|衡水");  
cityArr[5] = new Array("山西","太原|大同|阳泉|长治|晋城|朔州|吕梁|忻州|晋中|临汾|运城");  
cityArr[6] = new Array("陕西","西安|宝鸡|咸阳|铜川|渭南|延安|榆林|汉中|安康|商洛");   
cityArr[7] = new Array("辽宁","沈阳|大连|鞍山|抚顺|本溪|丹东|锦州|营口|阜新|辽阳|盘锦|铁岭|朝阳|葫芦岛");  
cityArr[8] = new Array("吉林","长春|吉林|四平|辽源|通化|白山|松原|白城|延边");  
cityArr[9] = new Array("黑龙江","哈尔滨|齐齐哈尔|牡丹江|佳木斯|大庆|绥化|鹤岗|鸡西|黑河|双鸭山|伊春|七台河|大兴安岭");  
cityArr[10] = new Array("江苏","南京|镇江|苏州|南通|扬州|盐城|徐州|连云港|常州|无锡|宿迁|泰州|淮安");  
cityArr[11] = new Array("浙江","杭州|宁波|温州|嘉兴|湖州|绍兴|金华|衢州|舟山|台州|丽水");  
cityArr[12] = new Array("安徽","合肥|芜湖|蚌埠|马鞍山|淮北|铜陵|安庆|黄山|滁州|宿州|池州|淮南|巢湖|阜阳|六安|宣城|亳州");  
cityArr[13] = new Array("福建","福州|厦门|莆田|三明|泉州|漳州|南平|龙岩|宁德");  
cityArr[14] = new Array("江西","南昌市|景德镇|九江|鹰潭|萍乡|新馀|赣州|吉安|宜春|抚州|上饶");  
cityArr[15] = new Array("山东","济南|青岛|淄博|枣庄|东营|烟台|潍坊|济宁|泰安|威海|日照|莱芜|临沂|德州|聊城|滨州|菏泽");  
cityArr[16] = new Array("河南","郑州|开封|洛阳|平顶山|安阳|鹤壁|新乡|焦作|濮阳|许昌|漯河|三门峡|南阳|商丘|信阳|周口|驻马店|济源");  
cityArr[17] = new Array("湖北","武汉|宜昌|荆州|襄樊|黄石|荆门|黄冈|十堰|恩施|潜江|天门|仙桃|随州|咸宁|孝感|鄂州");  
cityArr[18] = new Array("湖南","长沙|常德|株洲|湘潭|衡阳|岳阳|邵阳|益阳|娄底|怀化|郴州|永州|湘西|张家界");  
cityArr[19] = new Array("广东","广州|深圳|珠海|汕头|东莞|中山|佛山|韶关|江门|湛江|茂名|肇庆|惠州|梅州|汕尾|河源|阳江|清远|潮州|揭阳|云浮");  
cityArr[20] = new Array("广西","南宁|柳州|桂林|梧州|北海|防城港|钦州|贵港|玉林|南宁地区|柳州地区|贺州|百色|河池");  
cityArr[21] = new Array("海南","海口|三亚");  
cityArr[22] = new Array("四川","成都|绵阳|德阳|自贡|攀枝花|广元|内江|乐山|南充|宜宾|广安|达川|雅安|眉山|甘孜|凉山|泸州");  
cityArr[23] = new Array("贵州","贵阳|六盘水|遵义|安顺|铜仁|黔西南|毕节|黔东南|黔南");  
cityArr[24] = new Array("云南","昆明|大理|曲靖|玉溪|昭通|楚雄|红河|文山|思茅|西双版纳|保山|德宏|丽江|怒江|迪庆|临沧");  
cityArr[25] = new Array("西藏","拉萨|日喀则|山南|林芝|昌都|阿里|那曲");
cityArr[26] = new Array("甘肃","兰州|嘉峪关|金昌|白银|天水|酒泉|张掖|武威|定西|陇南|平凉|庆阳|临夏|甘南");  
cityArr[27] = new Array("宁夏","银川|石嘴山|吴忠|固原");  
cityArr[28] = new Array("青海","西宁|海东|海南|海北|黄南|玉树|果洛|海西");  
cityArr[29] = new Array("内蒙古","呼和浩特|包头|乌海|赤峰|呼伦贝尔盟|阿拉善盟|哲里木盟|兴安盟|乌兰察布盟|锡林郭勒盟|巴彦淖尔盟|伊克昭盟");  
cityArr[30] = new Array("新疆","乌鲁木齐|石河子|克拉玛依|伊犁|巴音郭勒|昌吉|克孜勒苏柯尔克孜|博尔塔拉|吐鲁番|哈密|喀什|和田|阿克苏");  
cityArr[31] = new Array("香港","香港");  
cityArr[32] = new Array("澳门","澳门");  
cityArr[33] = new Array("台湾","台北|高雄|台中|台南|屏东|南投|云林|新竹|彰化|苗栗|嘉义|花莲|桃园|宜兰|基隆|台东|金门|马祖|澎湖");  
var Search = function(){ 
  return { 
    initArea : function(){ 
      var provinceLen = cityArr.length;//共多少个省市自治区 
      var areaArr = []; 
      var provinceArr = []; 
      areaArr.push('<div class="sw-ui-area-box"><div class="sw-ui-area-bg"></div><div class="sw-ui-area-body"><div class="sw-ui-area-ab-all">'); 
      areaArr.push('<ul class="sw-ui-area-ab-prov">');//构造省 
      for(var i = 0; i< provinceLen; i ++){ 
        var p = cityArr[i][0]; 
        var pArr = new Array(); 
        var csArr = cityArr[i][1].split("|"); 
        var csLen = csArr.length; 
        pArr.push('<li class="sw-ui-area-box-item sw-ui-area-abProv-im">'); 
        pArr.push('<a class="sw-ui-area-box-link sw-ui-area-ab-prov-itemLink " href="#" p="'+p+'" c="" v="'+p+'">'+p+'</a>'); 
        pArr.push('<ul class="sw-ui-area-ab-prov-items">'); 
        for(var j = 0;j < csLen ;j++){//构造市 
          var c = csArr[j]; 
          pArr.push('<li class="sw-ui-area-box-item">'); 
          pArr.push('<a class="sw-ui-area-box-link sw-ui-area-abProv-itemsubLink " href="#" p="'+p+'" c="'+c+'" v="'+c+'">'+c+'</a>'); 
          pArr.push('</li>'); 
        } 
        pArr.push('</ul>'); 
        var pStr = pArr.join(""); 
        areaArr.push(pStr); 
      }//end for 
      areaArr.push('</ul>');//结束省 
      areaArr.push('</div></div></div>'); 
      var areaStr = areaArr.join(""); 
      $(".area .def_box").append(areaStr); 
    }, 
    //选择地区 
    areaEffect : function(){ 
      //显示全部区域及省份 
      $(".def_box").hover(function(){ 
        $(this).find(".sw-ui-area-box").show(); 
      },function(){ 
        $(this).find(".sw-ui-area-box").hide(); 
      }); 
      //显示省级以下的市级城市 
      $(".sw-ui-area-box-item").hover(function(){ 
        $(this).css("z-index","90").find(".sw-ui-area-ab-prov-items").show(); 
      },function(){ 
        $(this).css("z-index","0").find(".sw-ui-area-ab-prov-items").hide(); 
      }); 
    } 
  } 
}(); 
$(function(){ 
  Search.initArea(); 
  Search.areaEffect(); 
})

效果图:

js实现仿阿里巴巴城市选择框效果实例

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Javascript中的相等与不等运算
Apr 25 Javascript
让IE6支持min-width和max-width的方法
Jun 25 Javascript
javascript 函数及作用域总结介绍
Nov 12 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
javascript元素动态创建实现方法
May 13 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
纯CSS3代码实现滑动开关效果
Aug 19 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
Jul 13 Javascript
JS函数进阶之继承用法实例分析
Jan 15 Javascript
Javascript常用小技巧汇总
Jun 24 #Javascript
js实现的倒计时按钮实例
Jun 24 #Javascript
js实现大转盘抽奖游戏实例
Jun 24 #Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 #Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 #Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
Jun 24 #Javascript
介绍一个简单的JavaScript类框架
Jun 24 #Javascript
You might like
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
yii框架中的Url生产问题小结
2012/01/16 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
php实现指定字符串中查找子字符串的方法
2015/03/17 PHP
php创建无限级树型菜单
2015/11/05 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
python调用新浪微博API项目实践
2014/07/28 Python
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
EJB发布WEB服务一般步骤
2012/10/31 面试题
程序员求职信
2014/04/16 职场文书
主题实践活动总结
2014/05/08 职场文书
股权转让协议书
2014/12/07 职场文书
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技