萬盛學電腦網 >> 腳本專題 >> javascript >> js實現仿阿裡巴巴城市選擇框效果實例
js實現仿阿裡巴巴城市選擇框效果實例
本文實例講述了js實現仿阿裡巴巴城市選擇框效果。分享給大家供大家參考。具體分析如下：
這並不是一個城市選擇插件，在這裡介紹只是為了mark一下二級聯動的方法，此效果適用於有二級子菜單的效果，如導航欄、城市選擇、類別選擇等等。
樣式效果是基於阿裡的樣式，懶得做其他調整，在area.css中僅僅是為了修改浏覽器兼容性略做了一點調整。
城市數據是通過js構造，當然也可以通過後端取得數據，不過感覺沒必要。
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <!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代碼如下：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 .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代碼如下：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 var cityInit = ['請選擇省份'];javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved