先睹为快

闲话少说，我们先来看看今天我们研究的控件的最终效果图(参照天猫的送货地址设置的效果)：

“地址选择Web控件”的基本组成：

使用控件举例：

<!--需要加载和引用的文件-->
<link rel="stylesheet" href="css/zlbox.css" type="text/css" media="screen" />
<script src="js/jquery-1.7.1.js"></script>
<script src="js/jquery.zlbox.js"></script><!--控件的HTML代码-->
<div id="company_addr" class="zl_addressbox"><div class="ab_showbar tip"><div class="tip_info">请选择省市区</div><div class="value_info"><!--结果显示容器--></div></div><span class="ab_btn"></span><div class="selectaddr_box"><div class="ab_bar"><ul><li class="sheng current">省份</li><li class="shi">城市</li><li class="qu">区县</li></ul></div><div class="ab_panel"><dl><dd class="sheng current"><div class="ab_group"><span class="ab_shengtitle">A-G</span><ul class="ab_sheng ab_item"><li>北京</li><li>广东</li></ul></div><div class="ab_group"><span class="ab_shengtitle">T-Z</span><ul class="ab_sheng ab_item"><li>浙江</li></ul></div></dd><dd class="shi"><ul class="ab_shi ab_item"><!--市区容器--></ul></dd><dd class="qu"><ul class="ab_qu ab_item"><!--区县容器--></ul></dd></dl></div></div></div><!--End of ZLAddressBox--><script type="text/javascript">//初始化地址控件$('#company_addr').czl_addressbox({});
</script>

为了讲解的方便，控制代码的篇幅，这里仅仅举例了北京、广东、浙江3个省市的“省份/城市/区县”选择，数据完整的“全国地址选择Web控件”还在捣鼓中，出货后再向诸位汇报。

基本功能实现

【HTML代码】

Web控件涉及的HTML代码如下：

<!--ZLAddressBox--><div id="company_addr" class="zl_addressbox"><div class="ab_showbar tip"><div class="tip_info">请选择省市区</div><div class="value_info"><!--结果显示容器--></div></div><span class="ab_btn"></span><div class="selectaddr_box"><div class="ab_bar"><ul><li class="sheng current">省份</li><li class="shi">城市</li><li class="qu">区县</li></ul></div><div class="ab_panel"><dl><dd class="sheng current"><div class="ab_group"><span class="ab_shengtitle">A-G</span><ul class="ab_sheng ab_item"><li>北京</li><li>广东</li></ul></div><div class="ab_group"><span class="ab_shengtitle">T-Z</span><ul class="ab_sheng ab_item"><li>浙江</li></ul></div></dd><dd class="shi"><ul class="ab_shi ab_item"><!--市区容器--></ul></dd><dd class="qu"><ul class="ab_qu ab_item"><!--区县容器--></ul></dd></dl></div></div></div><!--End of ZLAddressBox-->

【CSS代码】

Web控件涉及到的CSS代码(zlbox.css)如下：

  1 /**全国地址选择控件**/2 .zl_addressbox{3     position:relative;4     width:370px;5     background-color:#F08;6 }7 .zl_addressbox .ab_showbar{8     width:100%;9     height:30px;10     line-height:30px;11     border:#A9A9A9 1px solid;12     background-color:#FFF;    13 }14 .zl_addressbox .ab_btn{15     position:absolute;16     right:0px;17     top:1px;18     width:30px;19     height:30px;20     background:#FFF url('img/cb_btn_down.png') no-repeat center center;21 }22 /**地址选择面板**/23 .zl_addressbox .selectaddr_box{24     display:none;25     position:absolute;26     left:0px;27     right:0px;28     top:32px;29     width:100%;30     line-height:30px;31     background-color:#FFF;32     z-index:888;33 }34 .zl_addressbox .ab_bar{35     width:100%;36     height:40px;37 }38 .zl_addressbox .ab_bar:after{39     clear:both;40     content:'';41     display:table;42 }43 .zl_addressbox .ab_bar li{44     float:left;45     width:122px;     /**这里如果要调整容器大小，需要同步调整**/46     height:40px;47     line-height:40px;48     text-align:center;49     background-color:#F0F0F0;50     border-left:#CCC 1px solid;51     border-bottom:transparent 1px solid ;52     cursor:pointer;53 }54 .zl_addressbox .ab_bar li:first-child{55     border-left:none;56 }57 .zl_addressbox .ab_bar li.current{58     color:#009AFD;59     background-color:#FFF;60     cursor:none;61 }62 .zl_addressbox .ab_panel{63     position:relative;64     width:100%;65 }66 .zl_addressbox .ab_panel dd{67     display:none;68     position:relative;69     width:100%;70 }71 .zl_addressbox .ab_panel dd.current{72     display:block;73 }74 /**省份面板中的分组**/75 .zl_addressbox .ab_panel dd .ab_group{76     position:relative;77     width:100%;78     margin-bottom:20px;79 }80 .zl_addressbox .ab_panel dd .ab_group span.ab_shengtitle{81     display:block;82     position:absolute;83     top:0px;84     width:60px;85     height:30px;86     line-height:30px;87     text-align:center;88     font-size:0.8em;89     color:#009AFD;90 }91 .zl_addressbox .ab_panel dd .ab_group .ab_sheng{92     margin-left:40px;93 }94 .zl_addressbox .ab_panel dd ul.ab_item{95     margin-top:10px;96     margin-bottom:5px;97 }98 .zl_addressbox .ab_panel dd ul.ab_item:after{99     clear:both;
100     display:table;
101     content:'';
102 }
103 .zl_addressbox .ab_panel dd ul.ab_item li{
104     float:left;
105     height:30px;
106     line-height:30px;
107     padding:0px 10px;
108     margin-left:10px;
109     cursor:pointer;
110 } 
111 .zl_addressbox .ab_panel dd ul.ab_item li:hover{
112     color:#009AFD;
113 }
114 .zl_addressbox .ab_panel dd ul.ab_item li.current{
115     border-radius:6px;
116     color:#FFF;
117     background-color:#009AFD;
118 }
119 .zl_addressbox.selected .selectaddr_box{
120     display:block;
121     border-left:1px #CCCCCC solid;
122     border-right:1px #CCCCCC solid;
123     border-bottom:1px #CCCCCC solid;
124     padding-bottom:10px;
125 }
126 .zl_addressbox.selected  .ab_btn{
127     background:#FFF url('img/cb_btn_up.png') no-repeat center center;
128 }
129 /**提示状态**/
130 .zl_addressbox .ab_showbar .tip_info{
131     display:none;
132     width:90%;
133     padding-left:5px;
134     color:#CCCCCC;
135 }
136 .zl_addressbox .ab_showbar .value_info{
137     display:block;
138     width:90%;
139     padding-left:5px;
140 }
141 .zl_addressbox .ab_showbar .value_info span.sep{
142     color:#CCC;
143     font-size:0.8em;
144 }
145 
146 .zl_addressbox .ab_showbar.tip .value_info{
147     display:none;
148 }
149 .zl_addressbox .ab_showbar.tip .tip_info{
150     display:block;
151 }

结合我们的功能诉求，一级前面介绍的控件的组成，将HTML代码与CSS代码对照起来理解应该比较好理解，所以，关于控件涉及到的布局、样式等细节，就不展开赘述，我们把重点放到JavaScript的代码部分。开发Web控件的基本套路与前一篇博文：ZLComboBox自定义控件开发详解类似，本文就着重讲解控件的业务需求以及与ZLComboBox控件开发不一样的地方。

JavaScript--闭包实现

与ZLComboBox控件不同，本文我们采用闭包的方式来构建我们的控件对象，jQuery插件的基本代码如下：

$.fn.czl_addressbox = function( options ){this.each( function()  {var instance = $.data( this , 'czl_addressbox' );if( !instance ){$.data( this, 'czl_addressbox' , $.createAddressBox( options , this ) );  });//end of eachreturn this;  //支持链式操作};

控件对象通过createAddressBox()来返回一个控件对象，下面我们重点来分析一下createAddressBox()的基本组成。

整个控件对象基于地址的'三级'目录树，以id来进行各级行政单位的标识与处理。

整个控件对外的接口：

1> 创建控件时，可以传入一个对象字面量(options)，用于设置默认选中的地址。

2> 返回当前选中地址的对象字面量：get_addr_obj()。

3> 传入一个地址对象字面量：set_addr_obj( new_addr_obj )。

业务流程分析：

1> 默认情况下，控件显示'请选择省市区'的提示信息。

2> 单击控件'地址栏'，显示下拉的'地址选择面板'；再次单击'地址栏'，隐藏下拉的'地址选择面板'；下拉的'地址选择面板'反映当前的选择状态。

3> 在'省份'面板中选中一个'省级单位'后，自动显示选中省级单位下的'市级'行政区。

在'城市'面板中选中一个'市级单位'后，自动显示选中市级单位下的'区级'行政区。

在'区县'面板中选中一个'区级单位'后，自动隐藏'地址选择面板'。

所有的选择结果，都会实时在控件'地址栏'中显示出来。

4> 只有选中了'省级'单位之后，才能单击'市级'单位的页签，

只有选中了'市级'单位之后，才能单击'区级'单位的页签。

5> 当更改了某一级别的选择结果之后，将它的下一级单位的选择清空。

例如：已经选择了"广东/深圳"，这时候单击"省份"面板中的"浙江"，则原来"城市面板"中的内容被清空，重新设置为"浙江"所包含的城市。

综合业务需求，闭包中的成员可以包括：

私有属性

保存了'三级地址信息'的对象字面量：addr_box_data
用于记录选择结果的对象字面量：addr_obj
一些HTML元素的引用等：例如；地址栏元素ab_showbar

私有函数

选中某个'省级单位','市级单位'和'区级单位'之后的响应函数。

_selectShengId( sheng_index )

_selectShiId( shi_index )

_selectQuId( qu_index )

更新地址栏信息的函数：_updateAddrValue( )
创建控件时，要执行的初始化函数：_init( options )
相关控件的注册函数：_loadEvents( )，这个函数应该在_init()中被调用。

因为整个架构都是基于id来创建，而从界面呈现来看，我们更习惯于'地址名称'，

例如："浙江省"的id是多少？不去翻阅addr_box_data，我们是回答不上来的。

所以，增加一个辅助函数：getShengIDFromName( sheng_name )

控件对外提供的接口函数

获得当前选中的地址信息的对象字面量：get_addr_obj()
设置默认选中的地址信息：set_addr_obj:function( a_obj )

控件提供的HTML接口

每次更新addr_obj的时候，同步将地址的信息更新到 HTML 元素的data属性中，名称为：addr_value。

例如：如果依次选中了：'浙江>杭州>滨江'，那么，addr_value的值为：'浙江_杭州_滨江'。

这种方式的好处是：在应用中直接用$('.zl_addressbox').czl_addressbox({}); 就把所有的addressbox控件都初始化了。后续要取值时，直接从对应元素的data属性中获取即可，而不用去分析如何调用控件对象。

综合以上分析，createAddressBox()代码的基本框架如下：

$.createAddressBox = function( options , element ){//私有成员声明var addr_box = $( element );//相关的HTML组件//......//省份的选择控件var ab_sheng_item = addr_box.find( '.ab_sheng>li' );//保存了'三级地址信息'的对象字面量var addr_box_data = {} ;       //用于记录选择结果的对象字面量var addr_obj = {};//私有函数声明var _init = function( options ){//加载事件注册_loadEvents();

            addr_box.data( 'addr_value' , '' );

//...};//依据a_obj的值初始化控件的状态var _init_addr_obj = function( a_obj ){//......}//更新地址栏中的值var _updateAddrValue = function(){//......};//选择序号为sheng_id的省份之后的响应事件var _selectShengId = function( sheng_index ){//......};//选择序号为shi_index的城市之后的响应事件var _selectShiId = function( shi_index ){//......};//选择序号为qu_index的区县之后的响应事件var _selectQuId = function( qu_index ){//......};//根据省份的名称，选择对应的idvar getShengIDFromName = function( sheng_name ){//......}//注册事件var _loadEvents = function(){//......    };//执行初始化函数_init( options );//创建对象var that = {get_addr_obj:function(){return addr_obj;},set_addr_obj:function( a_obj ){_init_addr_obj( a_obj );return ;}};//返回对象return that ;}

JavaScript--事件冒泡

重点看一下'市级'面板和'区级'面板相关选项的单击事件处理。根据前面的分析，我们发现这两个面板的选项，是动态变化的，那我们应该如何处理呢？

这让我们想到了事件的'冒泡'机制，只要注册相关容器的单击事件，当选中某个选项时，自然会冒泡到'容器'的处理函数那里。不难，直接上代码：

        //注册事件var _loadEvents = function(){//......//单击'市'下面的选项的响应事件ab_shi_databox.on( 'click' , function( event ){//阻止事件冒泡event.stopPropagation();var $target = $( event.target );if( $target.attr( 'tagName' ) === 'li' ){var shi_item = $target ;//如果当前的'市'选项就是选中的选项，则不响应事件，直接返回if( shi_item.hasClass('current') ){return ;}//获得省份对应的id的值var shi_id = shi_item.index();//响应选中城市之后的响应函数_selectShiId( shi_id );//标记当前选中的"城市"shi_item.addClass('current').siblings().removeClass( 'current' );}//如果是子元素li上触发的事件return ;});//单击'区'下面的选项的响应事件ab_qu_databox.on( 'click' , function( event ){//阻止事件冒泡event.stopPropagation();var $target = $( event.target );if( $target.attr( 'tagName' ) === 'li' ){var qu_item = $target ;if( qu_item.hasClass('current') ){return ;}//获得省份对应的id的值var qu_id = qu_item.index();//响应选中城市之后的响应函数_selectQuId( qu_id );qu_item.addClass('current').siblings().removeClass( 'current' );return ;}});};

优化控件：

到目前为止，我们的控件已经能够工作了，但是，还有一些可以优化地方，我们一起来分析一下。

JavaScript--单例模式

每次我们使用控件的时候，都要执行createAddressBox()创建一个对象，根据闭包的特性，每次创建时，闭包中的私有属性成员都会被单独创建，作为一个完整的工作区占据内存空间。我们注意到包含"三级地址信息"的addr_box_data也是一个'私有属性'，而这个对象字面量所占的内存空间非常大，如果每次调用createAddressBox()都占用一段大内存空间，从性能上来看，显然不是一个好的设计。

因为addr_box_data的内容是固定的，所以，可以把"三级地址信息"保存到一个单独的全局空间中，

而仅仅在createAddressBox()中引用这个全局空间即可。

优化方式如下：

a. 创建一个全局变量：$.zl_addr_box_data。

b. 在createAddressBox中引用这个全局变量。

特殊情况处理：

我们注意到，像北京、上海、天津这些直辖市，虽然是省级单位，但是它的下面直接就是包含了各个区的"区级单位"，为了保证'三级地址结构'的一致性，我们给它补上'市级单位'，名称也是北京市。但是，在用户选择的时候，如果还要按"北京 > 北京 > 海淀"这样的方式，就显得太麻烦了，所以，我们做如下的优化：

a. 当用户选中一个'省级单位'时，如果它下面只有一个'市级单位'，就直接跳过这个'市级单位'。

比如：用户选中'北京'之后，就直接显示'朝阳'、'海淀'等'区级单位'

b. 优化显示结果：

如果发现用户选中的'省级单位'与'市级单位'的名称一样，就只显示省级单位。

例如：北京/石景山

优化的相关代码如下：

   $.createAddressBox = function( options , element ){//......//选择序号为sheng_id的省份之后的响应事件var _selectShengId = function( sheng_index ){//......//判断是否是'北京'、'上海'、天津、重庆等直辖市var shi_list_id = '0_'+sheng_index;//这里处理需要跳过'市'这一级别的处理if( addr_box_data[shi_list_id].length === 1 ){//更新地址的值addr_obj.sheng = sheng_name;addr_obj.shi = '' + addr_box_data['0_'+sheng_index+'_0'] ;addr_obj.qu = '' ;addr_obj.sheng_id = ''+sheng_index;addr_obj.shi_id = '0' ;addr_obj.qu_id = '' ;//更新地址栏中的值_updateAddrValue( );//触发选中了区的选项卡_selectShiId( 0 );}//......}//更新地址栏中的值var _updateAddrValue = function(){//......if( addr_obj.shi !== '' &&  addr_obj.shi === addr_obj.sheng){if( addr_obj.qu !== '' ){ab_vauleinfo.append( '<span class="sep">/</span><span>'+addr_obj.qu+'</span>' );}
                  }//......}}

小节：

本文所论述的是地址控件的业务原理，在真正的生产环境中使用时，也许还需要结合控件的使用场景，

公司的业务规范来进行优化，比如思考以下几个方面：

a. 安全性：我们当前的设计，是将'三级地址信息'直接放到JS脚本中，在实际的业务场景中，你或许需要将这个信息放到'云端'，用到时才从'云端'动态加载。

这样做的另外一个好处就是，当信息发生变化时(例如：行政区域发生变更)，只要更新'云端'的数据就可以了。

b. 移动化：我们当前的设计，是将'地址选择面板'进行'悬挂式'设计，即：显示'地址选择面板'时，并不会影响原来的布局流。这个在某些使用场景时可能会出现问题，例如：如果这个控件放置在页面的底部，就不能完整的显示整个'地址选择面板'，这个在'移动化'应用设计中会遇到比较多，这时候，也许将它修改成'抽屉式'设计更合理一些。

'悬挂式'设计和'抽屉式'设计的示意图如下：