前言
周五时同事有一个关于弹出层的问题没有解决，但是面临下班问题，我有点不舒服，便叫回去周六过来解决，但是上周六病了，所以请了个假，于是故事发生啦。。。。
今天上班时候，组员们卡到了那个地方，然后结果就是前端组拖慢了进度，额。。。。这是事实。
于是早会结束，我便投入处理这个问题，因为这个项目原来是外包出去的，后面点要重构，现在只是优化工作，我便一直不太关注，有两个同事主要负责。
但是今天一看到代码我就哭了。。。那家伙，这个还不单单是弹出层的问题呢，里面很有点东西！好了我们进入正题，来一起看看这个问题吧。
请用现代浏览器测试
引出问题
有图有真相，我们来看一个智联招聘里面经常出现的图层：
他这个是没有什么问题的，我们来简单看看其实现：
View Code
复制代码
1 <div id="zbwJobSearch">
2 <div style="width: 710px;" class="sPopupDiv">
3 <div class="sPopupTitle213 sPopupTitle">
4 <h1>
5 选择职位</h1>
6 <div class="sButtonBlock">
7 <a onclick="return zbw.PopupDiv.allIns['buttonSelJobType'].fnClickAll()" href="#"
8 class="blueButton">不限</a> <a onclick="return zbw.PopupDiv.allIns['buttonSelJobType'].fnClickClose()"
9 href="#" class="blueButton">关闭</a></div>
10 <div class="clear">
11 </div>
12 </div>
13 <div class="clear">
14 </div>
15 <div class="sPopupBlock">
16 </div>
17 </div>
18 </div>
他一开始便有一个容器在页面上，看着我们这个“zbwJobSearch”的容器，他是一个一般流的东西，里面放了3个绝对定位的东西，从这里看出，他这个不只是用于职位选择还有城市选择什么的。。。。
然后我们把多余的东西给去掉，点击了一下我本来以为会发送http请求什么的，重新获取数据，再生成我们看到的那颗树，但是解压js后发现这个东西好像被写到了js中，基本就是生成了这个东西：
生成的职位列表
他是一个表格，里面有很多事件！！！
我们这个td里面有一个span元素，给span了一个click事件，点击后会弹出我们要的结果：
然后进行最后的操作。
分析问题
好了，到了这里我们不知道我把问题解释清楚没有：
1 点击外部按钮便弹出了我们要的第一个弹出层。
2 点击其中的“加号”或者文字便弹出具有多选框的可选项
3 选择项目点击确定。
以上几个做完，我们的流程便结束了。
优化方案
不知从什么时间开始，我有了一点代码洁癖，看着这个代码我怎么就感觉有点不爽，他这个东西主要有以下问题：
1 table渲染速度慢
2 td/span有太多的事件，过多的事件绑定对我们的性能也有影响。
3 他的click函数全部写到了标签上（仁者见仁，我是非常不喜欢这样做）
其它
我们来看看，他其它地方其实做了一定处理:
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['348','物流/仓储'])" class="availItem">物流/仓储</span>
为了防止命名冲突，我们看看这家伙定义的命名空间可长可长了。长到我都不想看了。。。。
好了暂时其它问题我这里还没发现，只不过我认为其中几个图片按钮相关可以用标签实现啦。。。
既然说都说了这么多，那我们不如先来写一个呗，写了再继续我们的问题吧！
实现职位选择功能
我们现在一起来实现这个职位选择功能，所以我们先分析下我们需要干些什么：
① 点击text在text处出现弹出层
② 弹出层出来后，我们点击其中的“加号”或者文字便弹出第三个弹出层
③ 选择第三个弹出层里面的checkbox项目最后点击确定后便将选择插入text（多项以分号分割）
若是想要优化的话，也许可以尝试点击后再加载数据再生成dom，一旦生成后便将dom缓存起来，我们这里作为demo就不搞那么多事情了。
第一步，准备工作
下拉选择文本
实现功能前，我们先准备一点点小东西，第一个就是长得像下拉菜单的文本框：
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <title></title>
4 <style type="text/css">
5 .dropText { display: inline-block; border: 1px solid #B6B6B6; border-right: none; border-radius: 5px 0 0 5px;
cursor: pointer; margin-right: 20px; }
6 .dropText input { border: none; border-radius: 5px 0 0 5px; cursor: pointer; padding-left: 5px; }
7 .dropText span { display: inline-block; margin-right: -10px; width: 20px; border: 1px solid #B6B6B6;
border-radius: 0 5px 5px 0; margin: -1px -20px -1px 0; text-align: center; padding: 4px 0 4px 8px; }
8 .dropText i { display: inline-block; border: 6px solid black; border-color: black transparent transparent;
border-bottom: none; vertical-align: 3px; }
9 </style>
10 <script src="../../scripts/jquery-1.7.1.js" type="text/javascript"></script>
11 <script type="text/javascript">
12 $(document).ready(function () {
13 });
14 </script>
15 </head>
16 <body>
17 <div style="margin: 100px auto; padding-left: 100px;">
18 <div class="dropText" id="dropText">
19 <input type="text" placeholder="请选择职位" /><span><i></i>&nbsp;</span>
20 </div>
21 <span>dddd</span>
22 </div>
23 </body>
24 </html>
我们来看看我们形成的这个框，这个在现代浏览器还能看，而且各位千万不要小看这个东西，这个东西真不像各位想象那么简单，比如我这个代码就有很大的优化空间！
PS：各位看到我的span里面多了一个&nbsp;我为什么会这么做？不这么做有什么影响？i被设置为inline-block对整体行对齐有什么影响，这块代码还可以如何优化？这个问题暂时留给各位了，我们下来再一起解决，这个对行内元素的理解有莫大的帮助，请各位动手吧。
十字开关
1 <style type="text/css">
2 /*十字开关*/
3 .croSwitch { display: inline-block; border: 1px solid #108efe; border-radius: 4px; width: 16px;
height: 16px; text-align: center; position: relative; cursor: pointer; }
4 .croSwitch i { background-color: #108efe; border-radius: 6px; position: absolute; }
5
6 .croSwitch .horizontal { width: 12px; height: 2px; left: 2px; top: 7px; }
7 .croSwitch .vertical { height: 12px; width: 2px; top: 2px; left: 7px; }
8 .cls .vertical { display: none; }
9 </style>
10
11 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span>
12 <span class="croSwitch cls"><i class="horizontal"></i><i class="vertical"></i></span>
虽然很丑但是很温柔。。。
Ps：请思考若是外层span不设置高度会有什么后果
好啦，小东西大概懂弄好了，我们现在来组织职位的dom结构吧。
职位列表样式
我们首先根据上面的表格，使用jquery操作他生成如下结构：
最新的结构
好了，我们现在来调整一下样式。
由于这个家伙着实太丑了，我放弃了，我这里上传个图片好了。。。。
可运行代码：
基本列表样式
PS：第三个坑，不知道各位发现没，就算使用背景图片，我们的小图片看上去感觉还是有一些问题呢，我们是不是应该看看呢？
好了，我们将我们第一阶段的代码连起来：
带交互代码
结语
那撒。。。小叶确实熬不住了，明天再接着写吧，若您觉得这次这个有点意思请持续关注，届时我们在解释其中的问题。
本文转自叶小钗博客园博客，原文链接：http://www.cnblogs.com/yexiaochai/p/3140859.html，如需转载请自行联系原作者
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)