【position也可以很复杂】当弹出层遇上了鼠标定位（下）
前言
接着昨天的内容写，为了保证内容连续性，这里还是把昨天的内容拷了过来。
请用现代浏览器测试
引出问题
有图有真相，我们来看一个智联招聘里面经常出现的图层：
他这个是没有什么问题的，我们来简单看看其实现：
<div id="zbwJobSearch"> <div style="width: 710px;" class="sPopupDiv"> <div class="sPopupTitle213 sPopupTitle"> <h1> 选择职位</h1> <div class="sButtonBlock"> <a onclick="return zbw.PopupDiv.allIns['buttonSelJobType'].fnClickAll()" href="#" class="blueButton">不限</a> <a onclick="return zbw.PopupDiv.allIns['buttonSelJobType'].fnClickClose()" href="#" class="blueButton">关闭</a></div> <div class="clear"> </div> </div> <div class="clear"> </div> <div class="sPopupBlock"> </div> </div> <div style="width: 710px;" class="sPopupDiv"> <div class="sPopupTitle213 sPopupTitle"> <h1> 选择行业</h1> <div class="sButtonBlock"> <a onclick="return zbw.PopupDiv.allIns['buttonSelIndustry'].fnClickOk()" href="#" class="orgButton">确认</a> <a onclick="return zbw.PopupDiv.allIns['buttonSelIndustry'].fnClickClose()" href="#" class="blueButton">取消</a></div> <div class="clear"> </div> </div> <div class="clear"> </div> <div class="sPopupBlock"> </div> </div> <div style="width: 480px;" class="sPopupDiv"> <div class="sPopupTitle213 sPopupTitle"> <h1> 选择城市</h1> <div class="sButtonBlock"> <a onclick="return zbw.PopupDiv.allIns['JobLocation'].fnClickClose()" href="#" class="blueButton">关闭</a></div> <div class="clear"> </div> </div> <div class="clear"> </div> <div class="sPopupBlock"> </div> </div> </div>
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中，基本就是生成了这个东西：
1 <table width="100%" cellspacing="0" cellpadding="0" border="0" id="jobTab"> 2 <tbody> 3 <tr class="zebraCol0"> 4 <td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla"> 5 销售|客服|采购 6 </td> 7 <td class="jobtypeItems"> 8 <table width="100%" cellspacing="0" cellpadding="0" border="0"> 9 <tbody> 10 <tr> 11 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 12 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'817')" 13 class="blurItem"> 14 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['817','销售业务'])" 15 class="availItem">销售业务</span> 16 </td> 17 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 18 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'828')" 19 class="blurItem"> 20 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['828','销售管理'])" 21 class="availItem">销售管理</span> 22 </td> 23 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 24 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'842')" 25 class="blurItem"> 26 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['842','销售支持/商务'])" 27 class="availItem">销售支持/商务</span> 28 </td> 29 </tr> 30 <tr> 31 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 32 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'852')" 33 class="blurItem"> 34 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['852','客户服务/售前/售后/技术支持'])" 35 class="availItem">客户服务/售前/售后/技术支持</span> 36 </td> 37 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 38 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'862')" 39 class="blurItem"> 40 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['862','采购/贸易'])" 41 class="availItem">采购/贸易</span> 42 </td> 43 <td> 44 </td> 45 </tr> 46 </tbody> 47 </table> 48 </td> 49 </tr> 50 <tr class="zebraCol1"> 51 <td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla"> 52 财会|金融 53 </td> 54 <td class="jobtypeItems"> 55 <table width="100%" cellspacing="0" cellpadding="0" border="0"> 56 <tbody> 57 <tr> 58 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 59 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'738')" 60 class="blurItem"> 61 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['738','财务/审计/税务'])" 62 class="availItem">财务/审计/税务</span> 63 </td> 64 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 65 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'761')" 66 class="blurItem"> 67 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['761','银行'])" 68 class="availItem">银行</span> 69 </td> 70 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 71 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'780')" 72 class="blurItem"> 73 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['780','金融/证券/期货/投资'])" 74 class="availItem">金融/证券/期货/投资</span> 75 </td> 76 </tr> 77 <tr> 78 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 79 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'799')" 80 class="blurItem"> 81 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['799','保险'])" 82 class="availItem">保险</span> 83 </td> 84 <td> 85 </td> 86 <td> 87 </td> 88 </tr> 89 </tbody> 90 </table> 91 </td> 92 </tr> 93 <tr class="zebraCol1"> 94 <td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla"> 95 汽车|工程机械 96 </td> 97 <td class="jobtypeItems"> 98 <table width="100%" cellspacing="0" cellpadding="0" border="0"> 99 <tbody> 100 <tr> 101 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 102 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'257')" 103 class="blurItem"> 104 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['257','汽车/摩托车制造'])" 105 class="availItem">汽车/摩托车制造</span> 106 </td> 107 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 108 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'268')" 109 class="blurItem"> 110 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['268','汽车销售与服务'])" 111 class="availItem">汽车销售与服务</span> 112 </td> 113 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 114 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'280')" 115 class="blurItem"> 116 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['280','工程机械'])" 117 class="availItem">工程机械</span> 118 </td> 119 </tr> 120 </tbody> 121 </table> 122 </td> 123 </tr> 124 <tr class="zebraCol0"> 125 <td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla"> 126 消费品|生产|物流 127 </td> 128 <td class="jobtypeItems"> 129 <table width="100%" cellspacing="0" cellpadding="0" border="0"> 130 <tbody> 131 <tr> 132 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 133 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'306')" 134 class="blurItem"> 135 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['306','生产/加工/制造'])" 136 class="availItem">生产/加工/制造</span> 137 </td> 138 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 139 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'324')" 140 class="blurItem"> 141 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['324','交通运输服务'])" 142 class="availItem">交通运输服务</span> 143 </td> 144 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 145 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'333')" 146 class="blurItem"> 147 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['333','服装/纺织/食品饮料/皮革'])" 148 class="availItem">服装/纺织/食品饮料/皮革</span> 149 </td> 150 </tr> 151 <tr> 152 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 153 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'348')" 154 class="blurItem"> 155 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['348','物流/仓储'])" 156 class="availItem">物流/仓储</span> 157 </td> 158 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 159 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'366')" 160 class="blurItem"> 161 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['366','技工'])" 162 class="availItem">技工</span> 163 </td> 164 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 165 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'378')" 166 class="blurItem"> 167 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['378','质量管理/安全防护'])" 168 class="availItem">质量管理/安全防护</span> 169 </td> 170 </tr> 171 </tbody> 172 </table> 173 </td> 174 </tr> 175 <tr class="zebraCol1"> 176 <td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla"> 177 市场|媒介|设计 178 </td> 179 <td class="jobtypeItems"> 180 <table width="100%" cellspacing="0" cellpadding="0" border="0"> 181 <tbody> 182 <tr> 183 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 184 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'389')" 185 class="blurItem"> 186 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['389','市场/营销'])" 187 class="availItem">市场/营销</span> 188 </td> 189 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 190 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'409')" 191 class="blurItem"> 192 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['409','公关/媒介'])" 193 class="availItem">公关/媒介</span> 194 </td> 195 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 196 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'420')" 197 class="blurItem"> 198 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['420','美术/设计/创意'])" 199 class="availItem">美术/设计/创意</span> 200 </td> 201 </tr> 202 <tr> 203 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 204 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'441')" 205 class="blurItem"> 206 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['441','广告/会展'])" 207 class="availItem">广告/会展</span> 208 </td> 209 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 210 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'463')" 211 class="blurItem"> 212 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['463','传媒/影视/报刊/出版/印刷'])" 213 class="availItem">传媒/影视/报刊/出版/印刷</span> 214 </td> 215 <td> 216 </td> 217 </tr> 218 </tbody> 219 </table> 220 </td> 221 </tr> 222 <tr class="zebraCol0"> 223 <td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla"> 224 医药|化工|能源|环保 225 </td> 226 <td class="jobtypeItems"> 227 <table width="100%" cellspacing="0" cellpadding="0" border="0"> 228 <tbody> 229 <tr> 230 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 231 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'482')" 232 class="blurItem"> 233 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['482','生物/制药/医疗器械'])" 234 class="availItem">生物/制药/医疗器械</span> 235 </td> 236 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 237 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'506')" 238 class="blurItem"> 239 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['506','化工'])" 240 class="availItem">化工</span> 241 </td> 242 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 243 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'518')" 244 class="blurItem"> 245 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['518','环境科学/环保'])" 246 class="availItem">环境科学/环保</span> 247 </td> 248 </tr> 249 <tr> 250 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 251 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'525')" 252 class="blurItem"> 253 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['525','能源/矿产/地质勘查'])" 254 class="availItem">能源/矿产/地质勘查</span> 255 </td> 256 <td> 257 </td> 258 <td> 259 </td> 260 </tr> 261 </tbody> 262 </table> 263 </td> 264 </tr> 265 <tr class="zebraCol1"> 266 <td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla"> 267 管理|人力资源|行政 268 </td> 269 <td class="jobtypeItems"> 270 <table width="100%" cellspacing="0" cellpadding="0" border="0"> 271 <tbody> 272 <tr> 273 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 274 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'534')" 275 class="blurItem"> 276 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['534','高级管理'])" 277 class="availItem">高级管理</span> 278 </td> 279 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 280 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'546')" 281 class="blurItem"> 282 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['546','人力资源'])" 283 class="availItem">人力资源</span> 284 </td> 285 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 286 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'563')" 287 class="blurItem"> 288 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['563','行政/后勤/文秘'])" 289 class="availItem">行政/后勤/文秘</span> 290 </td> 291 </tr> 292 </tbody> 293 </table> 294 </td> 295 </tr> 296 <tr class="zebraCol0"> 297 <td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla"> 298 咨询|法律|教育|翻译 299 </td> 300 <td class="jobtypeItems"> 301 <table width="100%" cellspacing="0" cellpadding="0" border="0"> 302 <tbody> 303 <tr> 304 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 305 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'575')" 306 class="blurItem"> 307 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['575','咨询/顾问'])" 308 class="availItem">咨询/顾问</span> 309 </td> 310 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 311 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'589')" 312 class="blurItem"> 313 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['589','教育/培训'])" 314 class="availItem">教育/培训</span> 315 </td> 316 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 317 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'613')" 318 class="blurItem"> 319 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['613','律师/法务/合规'])" 320 class="availItem">律师/法务/合规</span> 321 </td> 322 </tr> 323 <tr> 324 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 325 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'621')" 326 class="blurItem"> 327 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['621','翻译（口译与笔译）'])" 328 class="availItem">翻译（口译与笔译）</span> 329 </td> 330 <td> 331 </td> 332 <td> 333 </td> 334 </tr> 335 </tbody> 336 </table> 337 </td> 338 </tr> 339 <tr class="zebraCol1"> 340 <td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla"> 341 服务业 342 </td> 343 <td class="jobtypeItems"> 344 <table width="100%" cellspacing="0" cellpadding="0" border="0"> 345 <tbody> 346 <tr> 347 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 348 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'633')" 349 class="blurItem"> 350 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['633','零售/百货/连锁/超市'])" 351 class="availItem">零售/百货/连锁/超市</span> 352 </td> 353 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 354 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'647')" 355 class="blurItem"> 356 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['647','酒店/餐饮/旅游/娱乐'])" 357 class="availItem">酒店/餐饮/旅游/娱乐</span> 358 </td> 359 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 360 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'671')" 361 class="blurItem"> 362 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['671','保健/美容/美发/健身'])" 363 class="availItem">保健/美容/美发/健身</span> 364 </td> 365 </tr> 366 <tr> 367 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 368 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'680')" 369 class="blurItem"> 370 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['680','医院/医疗/护理'])" 371 class="availItem">医院/医疗/护理</span> 372 </td> 373 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 374 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'700')" 375 class="blurItem"> 376 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['700','保安/家政/普通劳动力'])" 377 class="availItem">保安/家政/普通劳动力</span> 378 </td> 379 <td> 380 </td> 381 </tr> 382 </tbody> 383 </table> 384 </td> 385 </tr> 386 <tr class="zebraCol0"> 387 <td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla"> 388 机关单位|学生|其他 389 </td> 390 <td class="jobtypeItems"> 391 <table width="100%" cellspacing="0" cellpadding="0" border="0"> 392 <tbody> 393 <tr> 394 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 395 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'709')" 396 class="blurItem"> 397 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['709','公务员/事业单位/科研机构'])" 398 class="availItem">公务员/事业单位/科研机构</span> 399 </td> 400 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 401 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'719')" 402 class="blurItem"> 403 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['719','农/林/牧/渔业'])" 404 class="availItem">农/林/牧/渔业</span> 405 </td> 406 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 407 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'725')" 408 class="blurItem"> 409 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['725','毕业生/实习生/培训生'])" 410 class="availItem">毕业生/实习生/培训生</span> 411 </td> 412 </tr> 413 <tr> 414 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 415 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'732')" 416 class="blurItem"> 417 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['732','兼职/临时'])" 418 class="availItem">兼职/临时</span> 419 </td> 420 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 421 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'736')" 422 class="blurItem"> 423 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['736','其他'])" 424 class="availItem">其他</span> 425 </td> 426 </tr> 427 </tbody> 428 </table> 429 </td> 430 </tr> 431 </tbody> 432 </table>
他是一个表格，里面有很多事件！！！
我们这个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> </span> 20 </div> 21 <span>dddd</span> 22 </div> 23 </body> 24 </html>
我们来看看我们形成的这个框，这个在现代浏览器还能看，而且各位千万不要小看这个东西，这个东西真不像各位想象那么简单，比如我这个代码就有很大的优化空间！
PS：各位看到我的span里面多了一个 我为什么会这么做？不这么做有什么影响？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操作他生成如下结构：
<div id="jobList"> <div class="item_0 "> <span class="title">销售|客服|采购 </span> <div class="items"> <label> <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 销售业务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 销售管理</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 销售支持/商务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 客户服务/售前/售后/技术支持</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 采购/贸易</label></div> </div> <div class="item_1 alt "> <span class="title">财会|金融 </span> <div class="items"> <label> <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 财务/审计/税务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 银行</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 金融/证券/期货/投资</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 保险</label></div> </div> <div class="item_2 "> <span class="title">汽车|工程机械 </span> <div class="items"> <label> <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 汽车/摩托车制造</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 汽车销售与服务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 工程机械</label></div> </div> <div class="item_3 alt "> <span class="title">消费品|生产|物流 </span> <div class="items"> <label> <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 生产/加工/制造</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 交通运输服务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 服装/纺织/食品饮料/皮革</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 物流/仓储</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 技工</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 质量管理/安全防护</label></div> </div> <div class="item_4 "> <span class="title">市场|媒介|设计 </span> <div class="items"> <label> <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 市场/营销</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 公关/媒介</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 美术/设计/创意</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 广告/会展</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 传媒/影视/报刊/出版/印刷</label></div> </div> <div class="item_5 alt "> <span class="title">医药|化工|能源|环保 </span> <div class="items"> <label> <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 生物/制药/医疗器械</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 化工</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 环境科学/环保</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 能源/矿产/地质勘查</label></div> </div> <div class="item_6 "> <span class="title">管理|人力资源|行政 </span> <div class="items"> <label> <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 高级管理</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 人力资源</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 行政/后勤/文秘</label></div> </div> <div class="item_7 alt "> <span class="title">咨询|法律|教育|翻译 </span> <div class="items"> <label> <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 咨询/顾问</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 教育/培训</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 律师/法务/合规</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 翻译（口译与笔译）</label></div> </div> <div class="item_8 "> <span class="title">服务业 </span> <div class="items"> <label> <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 零售/百货/连锁/超市</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 酒店/餐饮/旅游/娱乐</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 保健/美容/美发/健身</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 医院/医疗/护理</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 保安/家政/普通劳动力</label></div> </div> <div class="item_9 alt "> <span class="title">机关单位|学生|其他 </span> <div class="items"> <label> <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 公务员/事业单位/科研机构</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 农/林/牧/渔业</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 毕业生/实习生/培训生</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 兼职/临时</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 其他</label></div> </div> </div>
好了，我们现在来调整一下样式。
由于这个家伙着实太丑了，我放弃了，我这里上传个图片好了。。。。
可运行代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 body, input, textarea, select, small, a { font-family: Arial, "宋体"; font-size: 12px; } 7 /*下拉文本样式*/ 8 .dropText { display: inline-block; border: 1px solid #B6B6B6; border-right: none; border-radius: 5px 0 0 5px; cursor: pointer; margin-right: 20px; } 9 .dropText input { border: none; border-radius: 5px 0 0 5px; cursor: pointer; padding-left: 5px; } 10 .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; } 11 .dropText i { display: inline-block; border: 6px solid black; border-color: black transparent transparent; border-bottom: none; vertical-align: 3px; } 12 13 /*职位列表样式*/ 14 .jobList { border: 1px solid #8A9FA4; position: absolute; width: 710px; left: 100px; top: 60px; } 15 .jobList > div { padding: 2px; } 16 17 .jobList .title { display: inline-block; width: 120px; text-align: right; font-weight: bold; margin-right: 20px; } 18 .jobList .items { display: inline-block; padding: 2px; width: 550px; } 19 .jobList .items label { background: url(//images0.cnblogs.com/blog/294743/201306/17235544-3da2f08fa48147c9a8fa4a25e98a4632.gif) no-repeat; width: 165px; display: inline-block; padding-left: 18px; margin: 2px 0; cursor: pointer; } 20 .alt { background-color: #EFF6FF; } 21 22 .jobList .toolBar { display: block; position: absolute; background-color: White; border: 1px solid #8A9FA4; border-bottom: none; height: 25px; top: -30px; left: -1px; padding: 4px 10px 0 4px; } 23 .jobList .toolBar h2 { display: inline-block; font-size: 12px; margin: 0; padding: 2px 50px 2px 10px; } 24 .jobList .toolBar .bts { display: inline-block; } 25 .jobList .toolBar .bts a { display: inline-block; border-radius: 2px; text-decoration: none; color: #1b6f8b; background-color: cfe2f4; border: 1px solid #98bed8; padding: 2px 6px; } 26 27 </style> 28 </head> 29 <body> 30 <div id="jobList" class="jobList"> 31 <div class="toolBar"> 32 <h2>请选择职位</h2> 33 <div class="bts"><a href="#" id="btUnLess">不限</a> <a href="#" id="btCls">关闭</a></div> 34 </div> 35 <div class="item_0 "> 36 <span class="title">销售|客服|采购 </span> 37 <div class="items"> 38 <label> 39 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 40 销售业务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 41 销售管理</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 42 销售支持/商务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 43 客户服务/售前/售后/技术支持</label><label><span class="croSwitch"><i class="horizontal"></i><i 44 class="vertical"></i></span> 采购/贸易</label></div> 45 </div> 46 <div class="item_1 alt "> 47 <span class="title">财会|金融 </span> 48 <div class="items"> 49 <label> 50 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 51 财务/审计/税务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 52 银行</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 53 金融/证券/期货/投资</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 54 保险</label></div> 55 </div> 56 <div class="item_2 "> 57 <span class="title">汽车|工程机械 </span> 58 <div class="items"> 59 <label> 60 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 61 汽车/摩托车制造</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 62 汽车销售与服务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 63 工程机械</label></div> 64 </div> 65 <div class="item_3 alt "> 66 <span class="title">消费品|生产|物流 </span> 67 <div class="items"> 68 <label> 69 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 70 生产/加工/制造</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 71 交通运输服务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 72 服装/纺织/食品饮料/皮革</label><label><span class="croSwitch"><i class="horizontal"></i><i 73 class="vertical"></i></span> 物流/仓储</label><label><span class="croSwitch"><i class="horizontal"></i><i 74 class="vertical"></i></span> 技工</label><label><span class="croSwitch"><i class="horizontal"></i><i 75 class="vertical"></i></span> 质量管理/安全防护</label></div> 76 </div> 77 <div class="item_4 "> 78 <span class="title">市场|媒介|设计 </span> 79 <div class="items"> 80 <label> 81 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 82 市场/营销</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 83 公关/媒介</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 84 美术/设计/创意</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 85 广告/会展</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 86 传媒/影视/报刊/出版/印刷</label></div> 87 </div> 88 <div class="item_5 alt "> 89 <span class="title">医药|化工|能源|环保 </span> 90 <div class="items"> 91 <label> 92 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 93 生物/制药/医疗器械</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 94 化工</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 95 环境科学/环保</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 96 能源/矿产/地质勘查</label></div> 97 </div> 98 <div class="item_6 "> 99 <span class="title">管理|人力资源|行政 </span> 100 <div class="items"> 101 <label> 102 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 103 高级管理</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 104 人力资源</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 105 行政/后勤/文秘</label></div> 106 </div> 107 <div class="item_7 alt "> 108 <span class="title">咨询|法律|教育|翻译 </span> 109 <div class="items"> 110 <label> 111 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 112 咨询/顾问</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 113 教育/培训</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 114 律师/法务/合规</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 115 翻译（口译与笔译）</label></div> 116 </div> 117 <div class="item_8 "> 118 <span class="title">服务业 </span> 119 <div class="items"> 120 <label> 121 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 122 零售/百货/连锁/超市</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 123 酒店/餐饮/旅游/娱乐</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 124 保健/美容/美发/健身</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 125 医院/医疗/护理</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 126 保安/家政/普通劳动力</label></div> 127 </div> 128 <div class="item_9 alt "> 129 <span class="title">机关单位|学生|其他 </span> 130 <div class="items"> 131 <label> 132 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 133 公务员/事业单位/科研机构</label><label><span class="croSwitch"><i class="horizontal"></i><i 134 class="vertical"></i></span> 农/林/牧/渔业</label><label><span class="croSwitch"><i class="horizontal"></i><i 135 class="vertical"></i></span> 毕业生/实习生/培训生</label><label><span class="croSwitch"><i 136 class="horizontal"></i><i class="vertical"></i></span> 兼职/临时</label><label><span 137 class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 其他</label></div> 138 </div> 139 </div> 140 </body> 141 </html>
PS：第三个坑，不知道各位发现没，就算使用背景图片，我们的小图片看上去感觉还是有一些问题呢，我们是不是应该看看呢？
好了，我们将我们第一阶段的代码连起来：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 body, input, textarea, select, small, a { font-family: Arial, "宋体"; font-size: 12px; } 7 /*下拉文本样式*/ 8 .dropText { display: inline-block; border: 1px solid #B6B6B6; border-right: none; border-radius: 5px 0 0 5px; cursor: pointer; margin-right: 20px; } 9 .dropText input { border: none; border-radius: 5px 0 0 5px; cursor: pointer; padding-left: 5px; } 10 .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; } 11 .dropText i { display: inline-block; border: 6px solid black; border-color: black transparent transparent; border-bottom: none; vertical-align: 2px; } 12 13 /*职位列表样式*/ 14 .jobList { border: 1px solid #8A9FA4; position: absolute; width: 710px; left: 100px; top: 60px; display: none; z-index: 100; background-color: White; } 15 .jobList > div { padding: 2px; } 16 17 .jobList .title { display: inline-block; width: 120px; text-align: right; font-weight: bold; margin-right: 20px; } 18 .jobList .items { display: inline-block; padding: 2px; width: 550px; } 19 .jobList .items label { background: url(//images0.cnblogs.com/blog/294743/201306/17235544-3da2f08fa48147c9a8fa4a25e98a4632.gif) no-repeat; width: 165px; display: inline-block; padding-left: 18px; margin: 2px 0; cursor: pointer; } 20 .alt { background-color: #EFF6FF; } 21 22 .jobList .toolBar { display: block; position: absolute; background-color: White; border: 1px solid #8A9FA4; border-bottom: none; height: 25px; top: -30px; left: -1px; padding: 4px 10px 0 4px; } 23 .jobList .toolBar h2 { display: inline-block; font-size: 12px; margin: 0; padding: 2px 50px 2px 10px; } 24 .jobList .toolBar .bts { display: inline-block; } 25 .jobList .toolBar .bts a { display: inline-block; border-radius: 2px; text-decoration: none; color: #1b6f8b; background-color: cfe2f4; border: 1px solid #98bed8; padding: 2px 6px; } 26 </style> 27 </head> 28 <body> 29 <div style="margin: 100px auto; padding-left: 100px;"> 30 <div class="dropText" id="dropText"> 31 <input type="text" placeholder="请选择职位" /><span><i></i> </span> 32 </div> 33 <span>dddd</span> 34 </div> 35 <div id="jobList" class="jobList"> 36 <div class="toolBar"> 37 <h2> 38 请选择职位</h2> 39 <div class="bts"> 40 <a href="#" id="btUnLess">不限</a> <a href="#" id="btCls">关闭</a></div> 41 </div> 42 <div class="item_0 "> 43 <span class="title">销售|客服|采购 </span> 44 <div class="items"> 45 <label> 46 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 47 销售业务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 48 销售管理</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 49 销售支持/商务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 50 客户服务/售前/售后/技术支持</label><label><span class="croSwitch"><i class="horizontal"></i><i 51 class="vertical"></i></span> 采购/贸易</label></div> 52 </div> 53 <div class="item_1 alt "> 54 <span class="title">财会|金融 </span> 55 <div class="items"> 56 <label> 57 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 58 财务/审计/税务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 59 银行</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 60 金融/证券/期货/投资</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 61 保险</label></div> 62 </div> 63 <div class="item_2 "> 64 <span class="title">汽车|工程机械 </span> 65 <div class="items"> 66 <label> 67 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 68 汽车/摩托车制造</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 69 汽车销售与服务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 70 工程机械</label></div> 71 </div> 72 <div class="item_3 alt "> 73 <span class="title">消费品|生产|物流 </span> 74 <div class="items"> 75 <label> 76 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 77 生产/加工/制造</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 78 交通运输服务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 79 服装/纺织/食品饮料/皮革</label><label><span class="croSwitch"><i class="horizontal"></i><i 80 class="vertical"></i></span> 物流/仓储</label><label><span class="croSwitch"><i class="horizontal"></i><i 81 class="vertical"></i></span> 技工</label><label><span class="croSwitch"><i class="horizontal"></i><i 82 class="vertical"></i></span> 质量管理/安全防护</label></div> 83 </div> 84 <div class="item_4 "> 85 <span class="title">市场|媒介|设计 </span> 86 <div class="items"> 87 <label> 88 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 89 市场/营销</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 90 公关/媒介</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 91 美术/设计/创意</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 92 广告/会展</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 93 传媒/影视/报刊/出版/印刷</label></div> 94 </div> 95 <div class="item_5 alt "> 96 <span class="title">医药|化工|能源|环保 </span> 97 <div class="items"> 98 <label> 99 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 100 生物/制药/医疗器械</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 101 化工</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 102 环境科学/环保</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 103 能源/矿产/地质勘查</label></div> 104 </div> 105 <div class="item_6 "> 106 <span class="title">管理|人力资源|行政 </span> 107 <div class="items"> 108 <label> 109 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 110 高级管理</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 111 人力资源</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 112 行政/后勤/文秘</label></div> 113 </div> 114 <div class="item_7 alt "> 115 <span class="title">咨询|法律|教育|翻译 </span> 116 <div class="items"> 117 <label> 118 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 119 咨询/顾问</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 120 教育/培训</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 121 律师/法务/合规</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 122 翻译（口译与笔译）</label></div> 123 </div> 124 <div class="item_8 "> 125 <span class="title">服务业 </span> 126 <div class="items"> 127 <label> 128 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 129 零售/百货/连锁/超市</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 130 酒店/餐饮/旅游/娱乐</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 131 保健/美容/美发/健身</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 132 医院/医疗/护理</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 133 保安/家政/普通劳动力</label></div> 134 </div> 135 <div class="item_9 alt "> 136 <span class="title">机关单位|学生|其他 </span> 137 <div class="items"> 138 <label> 139 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 140 公务员/事业单位/科研机构</label><label><span class="croSwitch"><i class="horizontal"></i><i 141 class="vertical"></i></span> 农/林/牧/渔业</label><label><span class="croSwitch"><i class="horizontal"></i><i 142 class="vertical"></i></span> 毕业生/实习生/培训生</label><label><span class="croSwitch"><i 143 class="horizontal"></i><i class="vertical"></i></span> 兼职/临时</label><label><span 144 class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 其他</label></div> 145 </div> 146 </div> 147 148 <script src="../../scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 149 <script type="text/javascript"> 150 $(document).ready(function () { 151 152 var dropText = $('#dropText'); 153 var jobList = $('#jobList'); 154 dropText.click(function () { 155 var el = $(this); 156 var offset = el.offset(); 157 jobList.css({ 'top': (offset.top + 25) + 'px', 'left': (offset.left) + 'px' }); 158 jobList.show(); 159 160 }); 161 162 $('#btCls').click(function () { 163 jobList.hide(); 164 }); 165 166 }); 167 </script> 168 </body> 169 </html>
三层弹出：
我们在样式上做一点优化，加上鼠标hover效果，其它暂时不管。于是我们来看看他点击时候再弹出功能如何实现呢？我们这里看看原来的代码：
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['306','生产/加工/制造'])" class="availItem">生产/加工/制造</span>
我们看着，他这里有一个id，所以我这里有这样一个实现思路：
① 这个id必定对应着自己的id，我们根据此id可以选出其子项（根据省id可以得出市id）
② 由于他这个数据是一次性读出的，所以父级id对应子项应该已经缓存起来了，可以是字符串，也可以是dom结构
③ 然后我们这里先预先定义一个这样的结构：
1 var jobListObj = { 2 '1': 'dom', 3 '2': 'dom', 4 '3': 'dom', 5 '4': 'dom' 6 }
现在的逻辑便是，我们点击“加号”或者文字，从而获取我们的id（1-4），我们根据id获取dom，我们再定位我们的dom在应该出现的位置，整个逻辑结束。
于是我们来测试下我们的思路是否正确，因为原来就没有绑定id上，我们现在为四个角搞一个id即可，四个方向上能正常显示，我们这里就不管了。
PS：写到这里其实已经离题了，想说的问题还没说呢，我们其实没必要实现这个功能的，但是都走到这一步了只能硬着头皮写下去了。。。
最后形成的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> body, input, textarea, select, small, a { font-family: Arial, "宋体"; font-size: 12px; } /*下拉文本样式*/ .dropText { display: inline-block; border: 1px solid #B6B6B6; border-right: none; border-radius: 5px 0 0 5px; cursor: pointer; margin-right: 20px; } .dropText input { border: none; border-radius: 5px 0 0 5px; cursor: pointer; padding-left: 5px; } .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; } .dropText i { display: inline-block; border: 6px solid black; border-color: black transparent transparent; border-bottom: none; vertical-align: 2px; } /*职位列表样式*/ .jobList { border: 1px solid #8A9FA4; position: absolute; width: 710px; left: 100px; top: 60px; display: none; z-index: 100; background-color: White; } .jobList > div { padding: 2px; } .jobList .title { display: inline-block; width: 120px; text-align: right; font-weight: bold; margin-right: 20px; } .jobList .items { display: inline-block; padding: 2px; width: 555px; } .jobList .items label { background: url(//images0.cnblogs.com/blog/294743/201306/17235544-3da2f08fa48147c9a8fa4a25e98a4632.gif) no-repeat 5px 5px; width: 155px; display: inline-block; padding: 4px 1px 4px 22px; margin: 2px; cursor: pointer; } .jobList .items label.cls { background: #ffffff url(//images0.cnblogs.com/blog/294743/201306/18090058-4de319626b6f46adbb3871292dca97b6.gif) no-repeat 4px 4px; border: 1px solid #C7C7C7; padding: 3px 0 3px 21px; } .alt { background-color: #EFF6FF; } .jobList .toolBar { display: block; position: absolute; background-color: White; border: 1px solid #8A9FA4; border-bottom: none; height: 25px; top: -30px; left: -1px; padding: 4px 10px 0 4px; } .jobList .toolBar h2 { display: inline-block; font-size: 12px; margin: 0; padding: 2px 50px 2px 10px; } .jobList .toolBar .bts { display: inline-block; } .jobList .toolBar .bts a { display: inline-block; border-radius: 2px; text-decoration: none; color: #1b6f8b; background-color: #cfe2f4; border: 1px solid #98bed8; padding: 2px 6px; } .jobItem { background-color: White; width: 360px; border: 1px solid #C7C7C7; padding: 5px; position: absolute; z-index: 200; display: none; } .jobItem label { display: inline-block; width: 170px; color: #3059A8; } .jobItem label input { vertical-align: -2px; } .btBlock { border-top: 1px solid #C7C7C7; margin-top: 10px; padding: 5px 0; } .jobItem .bgLine { background: #C7C7C7; height: 1px; position: absolute; width: 194px; } .button { display: inline-block; border-radius: 2px; text-decoration: none; color: #1b6f8b; background-color: #cfe2f4; border: 1px solid #98bed8; padding: 2px 10px; } </style> <script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script> </head> <body> <div style="margin: 100px auto; padding-left: 100px;"> <div class="dropText" id="dropText"> <input type="text" placeholder="请选择职位" /><span><i></i> </span> </div> </div> <div id="jobList" class="jobList"> <div class="toolBar"> <h2> 请选择职位</h2> <div class="bts"> <a href="#" id="btUnLess">不限</a> <a href="#" id="btCls">关闭</a></div> </div> <div class="item_0 "> <span class="title">销售|客服|采购 </span> <div class="items"> <label> 销售业务</label><label> 销售管理</label><label> 销售支持/商务</label><label> 客户服务/售前/售后/技术支持</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 采购/贸易</label></div> </div> <div class="item_1 alt "> <span class="title">财会|金融 </span> <div class="items"> <label> 财务/审计/税务</label><label> 银行</label><label> 金融/证券/期货/投资</label><label> 保险</label></div> </div> <div class="item_2 "> <span class="title">汽车|工程机械 </span> <div class="items"> <label> 汽车/摩托车制造</label><label> 汽车销售与服务</label><label> 工程机械</label></div> </div> <div class="item_3 alt "> <span class="title">消费品|生产|物流 </span> <div class="items"> <label> 生产/加工/制造</label><label> 交通运输服务</label><label> 服装/纺织/食品饮料/皮革</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 物流/仓储</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 技工</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 质量管理/安全防护</label></div> </div> <div class="item_4 "> <span class="title">市场|媒介|设计 </span> <div class="items"> <label> 市场/营销</label><label> 公关/媒介</label><label> 美术/设计/创意</label><label> 广告/会展</label><label> 传媒/影视/报刊/出版/印刷</label></div> </div> <div class="item_5 alt "> <span class="title">医药|化工|能源|环保 </span> <div class="items"> <label> 生物/制药/医疗器械</label><label> 化工</label><label> 环境科学/环保</label><label> 能源/矿产/地质勘查</label></div> </div> <div class="item_6 "> <span class="title">管理|人力资源|行政 </span> <div class="items"> <label> 高级管理</label><label> 人力资源</label><label> 行政/后勤/文秘</label></div> </div> <div class="item_7 alt "> <span class="title">咨询|法律|教育|翻译 </span> <div class="items"> <label> 咨询/顾问</label><label> 教育/培训</label><label> 律师/法务/合规</label><label> 翻译（口译与笔译）</label></div> </div> <div class="item_8 "> <span class="title">服务业 </span> <div class="items"> <label> 零售/百货/连锁/超市</label><label> 酒店/餐饮/旅游/娱乐</label><label> 保健/美容/美发/健身</label><label> 医院/医疗/护理</label><label> 保安/家政/普通劳动力</label></div> </div> <div class="item_9 alt "> <span class="title">机关单位|学生|其他 </span> <div class="items"> <label> 公务员/事业单位/科研机构</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 农/林/牧/渔业</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 毕业生/实习生/培训生</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 兼职/临时</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 其他</label></div> </div> </div> <div id="jobItem0" class="jobItem"> <div class="bgLine"> </div> <label> <input type="checkbox" name="chItem_0"><span>销售代表</span></label><label><input type="checkbox" name="chItem_0"><span>客户代表</span></label><label><input type="checkbox" name="chItem_0"><span>电话销售</span></label><label><input type="checkbox" name="chItem_0"><span>销售工程师</span></label><label><input type="checkbox" name="chItem_0"><span>渠道/分销专员</span></label><label><input type="checkbox" name="chItem_0"><span>医药销售代表</span></label><label><input type="checkbox" name="chItem_0"><span>经销商</span></label><label><input type="checkbox" name="chItem_0"><span>网站推广</span></label><label><input type="checkbox" name="chItem_0"><span>团购业务员</span></label><label><input type="checkbox" name="chItem_0"><span>其他</span></label> <div class="btBlock"> <label> <input type="checkbox"><span>全选</span></label> <a href="#" class="ok button">确认</a> <a href="#" class="cancel button">取消</a> </div> </div> <script type="text/javascript"> $(document).ready(function () { var timer = null; var dropText = $('#dropText'); var jobList = $('#jobList'); var jobItem0 = $('#jobItem0'); dropText.click(function () { var el = $(this); var offset = el.offset(); jobList.css({ 'top': (offset.top + 25) + 'px', 'left': (offset.left) + 'px' }); jobList.show(); }); //点击关闭 $('#btCls').click(function () { jobList.hide(); }); jobItem0.mouseenter(function () { if (timer) clearTimeout(timer); }); //点击展开三级菜单 $('#jobList').delegate(' .items label', 'click', function (e) { var el = $(this); if (el.hasClass('cls')) { el.removeClass('cls'); clsJobList(); } else { el.addClass('cls'); var bgLine = jobItem0.find('.bgLine'); //获取作为客户端判断点 var x = e.clientX; var y = e.clientY; var offset = el.offset(); var height = parseInt(el.outerHeight()); var width = parseInt(el.outerWidth()); jobItem0.css('border', '1px solid #C7C7C7'); jobItem0.show(); //向上 if (y > 300 && false) { jobItem0.css({ 'top': (offset.top - height - 1) + 'px', 'border-bottom': 'none' }); bgLine.css('bottom', '1px'); } else { jobItem0.css({ 'top': (offset.top + height - 1) + 'px', 'border-top': 'none' }); bgLine.css('top', '-1px'); } //向左 if (x > 500) { jobItem0.css({ 'left': (offset.left - width - 16) + 'px' }); bgLine.css('right', '177px'); } else { jobItem0.css({ 'left': offset.left + 'px' }); bgLine.css('right', '0'); } var s = ''; el.unbind('mouseout').mouseout(function () { if (timer) clearTimeout(timer); timer = setTimeout(clsJobList, 100) }); jobItem0.mouseleave(clsJobList); } function clsJobList() { el.removeClass('cls'); jobItem0.hide(); el.unbind('mouseout'); } }); }); </script> </body> </html>
演示效果，可运行（友情提示请使用IE9+）
咳咳，离题离的离谱
昨天最初想写的东西和以上的东西没有多大关联，偏题偏得离谱啊！！！
我当时很臭屁的认为自己能1,2个小时完成这个功能来着，最后发现这家伙还真不是那么简单的。。。这不，今天又花了2个小时才搞出这么一个四不像的东西，而且我也不想继续搞这个了，因为这次的主题不是这个，职位选择框我们暂时就这个样式吧，以后有机会再形成插件。
现在我们开始进行下一步探讨，看看问题出现在哪。
正文开始
我们看到，这个职位选择框，其实本身没有什么问题，但是卡了组员1.5天的东西到底是什么呢？
其实是需求，因为需求变更，原来放在页面上，好好的元素，现在被放在了一个弹出层里面，于是各种各样的问题都出来了。。。。
① 弹出层的遮盖层z-index过大，遮盖了我们的职位层
② 弹出层本身的z-index过大，也遮盖了我们的职位层
但是以上两个问题都比较好处理，比较难处理的出来了：
这个项目之前的项目人员并不是像我这样将各个弹出层独立出来，都是以body为包含快（containing block），而是放在了一个div里面
并且将这个div放进了弹出层那个容器里面，于是我们来看看可能出现的问题：
① 由于absolute的包含快有所不同，其依赖最近的布局元素，所以之前js计算位置的方法可能失效
② 不知道原来处于什么考虑，代码中div容器布局为relative。。。。。其定位方法十分诡异
③ 奇怪的现象就是二级弹出层正常显示，三级弹出层你压根找不到！！！
以上便是组员遇到的问题，还有一个客观的因素就是原来的js依次分布到三个不同的地方，然后代码又全部压缩过了，我处理的时候还需要解压什么的，而且原来的代码中有很多地方没有分号，没有报错真是个奇迹（其实经常出现莫名的js错误啦，总之坑很多）。
我看着代码后不一会就发现了问题所在，问题本身并不难，解决也比较轻易，但是知不知道就很重要了。
原来实现思路：
① 由于装第一个弹出层的div是relative定位的，所以他定位到下拉框的实现方法和我们想象的不一样，是相对于div的位置，而不是body
他这个实现方案，我们不予评价，但是就这种方法要伤害多少我多少脑细胞，我就确实不想去想了。。。这里我居然还有点佩服原来开发的思维能力了。。。
② 他第一步，弹出层居然还能精准定位到下拉文本，但是当他再点击弹出层里面的文字准备弹出最终的东西时，终于开始悲剧了。。。
我那两个倒霉的组员要干神马事情呢，他们面临的又是什么呢：
① 在绝对定位弹出层上面（parent）有个正常流文本下拉文本框与div容器（div），并且该容器是relative定位的
② div中有2块弹出层（tan1，tan2），点击parent上面的下拉文本便弹出tan1，并且其定位必须精准，1像素只差都会很难看
③ 在tan1出来后，便点击tan1中的文字，根据该文字元素定位tan2
PS：不知道你们晕没有，反正我是晕了
人家这个插件本来是用于普通流的，其根元素为body，但是现在搞到弹出层里面来了，所以出现了这些问题。
我最后就直接总结了一下他这个最大的问题，就是实现过于复杂，所以昨天才忍不住自己写了一个（虽然效果不好。。。）
当然，最后我的解决方案更加诡异，这里就不说明了，因为没有什么意义，但是根据这个东西，我却提炼了一点点很有意思的东西与大家分享呢。这也是组员找不到问题的原因。
relative与鼠标点的定位
有例子有真相！！！
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 body { font: 12px 'PTSansRegular',Arial,Helvetica,sans-serif; background: #D1D1D1; } 7 ul, li { margin: 0; padding: 0} 8 li { list-style: none; } 9 10 #tabs_container { width: 400px; height: 200px; background: white;} 11 #tabs { border-bottom: 1px solid #1C87D5; padding: 5px 5px 0; width: 690px; margin: 0 auto; } 12 #tabs li { padding: 5px 10px; cursor: pointer; display: inline-block; background: #1C87D5; color: White; } 13 #tabs li.sec { color: black;} 14 15 #parent { width: 700px; height: 400px; background: white; margin: 0 auto; position: relative; } 16 #parent div { filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; font-weight:bold; background: red; position: absolute; } 17 </style> 18 </head> 19 <body> 20 <ul id="tabs" > 21 <li type="draw" class="sec">画矩形框</li> 22 <li type="drag">拖到矩形框</li> 23 </ul> 24 <div id="parent"> 25 </div> 26 <div id="state"></div> 27 <script type="text/javascript"> 28 var parent = document.getElementById('parent'), 29 tabs = document.getElementById('tabs'), 30 state = document.getElementById('state'), 31 con = document.getElementById('content'), 32 li = tabs.getElementsByTagName('li'), 33 type = 'draw'; //drag 34 35 tabs.addEventListener('click', function (e) { 36 for (var i = 0; i < li.length; i++) { 37 var el = li[i]; 38 el.className = ''; 39 var s = ''; 40 } 41 var cur_el = e.target; 42 cur_el.className = 'sec'; 43 type = cur_el.type; 44 45 var s = ''; 46 }, false); 47 48 parent.addEventListener('mousedown', function (e) { 49 var scope = this; 50 if (type == 'draw') { 51 (function () { 52 var el = e.target, //当前点击元素，父div或者拖到div 53 x = e.clientX, 54 y = e.clientY, 55 offsetTop = scope.offsetTop, 56 offsetLeft = scope.offsetLeft; 57 var div_x = x - offsetLeft, 58 div_y = y - offsetTop; 59 var div = document.createElement('div'); 60 var style = 'left: ' + div_x + 'px; top: ' + div_y + 'px;'; 61 div.setAttribute('style', style); 62 div.innerHTML = scope.getElementsByTagName('div').length; 63 scope.appendChild(div); 64 var func_move = function (ee) { 65 var x1 = ee.clientX, 66 y1 = ee.clientY; 67 var w = x1 - x; 68 var h = y1 - y; 69 if (w > 5 || h > 5) { 70 div.setAttribute('style', style + 'width: ' + w + 'px; height: ' + h + 'px;'); 71 } 72 }; 73 var func_up = function (ee) { 74 document.removeEventListener('mousemove', func_move, false); 75 document.removeEventListener('mouseup', func_up, false); 76 }; 77 document.addEventListener('mousemove', func_move, false); 78 document.addEventListener('mouseup', func_up, false); 79 })(); 80 81 } else { 82 (function () { 83 var el = e.target; //当前点击元素，父div或者拖到div 84 var x1 = e.clientX - el.offsetLeft; 85 var y1 = e.clientY - el.offsetTop; 86 87 var func_move = function (ee) { 88 var cur_el = ee.target; 89 if (cur_el.id && cur_el.id == 'parent') return false; 90 var x2 = 0; 91 var y2 = 0; 92 93 x2 = ee.clientX - x1 ; 94 y2 = ee.clientY - y1 ; 95 x2 = x2 > 0 ? x2 : 0; 96 y2 = y2 > 0 ? y2 : 0; 97 98 if (Math.abs(x2) > 5 || Math.abs(y2) > 5) { 99 cur_el.style.top = (y2) + 'px'; 100 cur_el.style.left = (x2) + 'px'; 101 } 102 }; 103 104 var func_up = function (ee) { 105 el.removeEventListener('mousemove', func_move, false); 106 el.removeEventListener('mouseup', func_up, false); 107 }; 108 el.addEventListener('mousemove', func_move, false); 109 el.addEventListener('mouseup', func_up, false); 110 })(); 111 } 112 113 }, false); 114 </script> 115 </body> 116 </html>
各位看看我们这个代码干的事情：
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title></title> 4 <style type="text/css"> 5 body { font: 12px 'PTSansRegular',Arial,Helvetica,sans-serif; background: #D1D1D1; } 6 ul, li { margin: 0; padding: 0} 7 li { list-style: none; } 8 9 #tabs_container { width: 400px; height: 200px; background: white;} 10 #tabs { border-bottom: 1px solid #1C87D5; padding: 5px 5px 0; width: 690px; margin: 0 auto; } 11 #tabs li { padding: 5px 10px; cursor: pointer; display: inline-block; background: #1C87D5; color: White; } 12 #tabs li.sec { color: black;} 13 14 #parent { width: 700px; height: 400px; background: white; margin: 0 auto; position: relative; } 15 #parent div { filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; font-weight:bold; background: red; position: absolute; } 16 </style> 17 </head> 18 <body> 19 <ul id="tabs" > 20 <li type="draw" class="sec">画矩形框</li> 21 <li type="drag">拖到矩形框</li> 22 </ul> 23 <div id="parent"> 24 </div> 25 <div id="state"></div> 26 </body> 27 </html>
① parent容器的定位是relative
② 我们在parent里面画的div是absolute
③ 但是，我们div定位是根据鼠标的x/y确定的，而这个是相对于body的，所以我们这里会错位（因为div是相对于parent布局，不是body）
④ 为了解决错位问题，我们便要用x/y减去parent的offset top与left
此块单独处理问题不大，就怕页面中弹出层过多时候导致你已经分不清谁是谁的包含快了，所以便会出现错位问题，这也是同事迟迟不能解决问题的症结点。
z-index
扩展知识：http://www.qianduan.net/that-thing-on-the-z-index.html
说道定位就不得不提z-index，这个家伙在IE7以下又是一个坑爹的货，了不起哪天各位又会碰到，反正我组员就碰到了，在IE7下，这个就是个混蛋！！！
关于html堆栈的那块，各位可以看看博客园寒冬的博客，堆栈顺序对z-index影响很大，我这里就不描述了。
我们遇到z-index时候，会很天真的认为z-index设置的越大时候，便应该更靠近我们，但是定位元素多了后，却总是发现这样那样的bug一大堆！！！（IE7以下尤其恶心），具体这块的拓展可以看看聂微东大哥的博客，关于z-index的描述已经十分详尽了，我这里简单说下：
每一个定位元素都有其根元素，当根元素为定位元素时，该元素的子元素若是也出现定位元素，子元素将受到父元素z-index的制约。
借用东哥一句话，元素要靠前也是拼爹的！
inline与inline-block
关于PS中的问题，感觉没人关注，我这里也不花精力去描述了，但是有个东西应该提出来：
我们上次说了，其实IE6/7是支持inline-block的，只不过块级元素对其支持不是很好罢了，但是我这里想把inline-block再一次提出来说一下，因为我们可能被他的名字迷惑了！！！
inline-block便应该包含inline与block的特性，对不！
是的，他包含了block的特性，但是我不认为他包含了inline的特性，因为inline的特性的核心是inline boxes，那么我们的inline-block拥有吗？
PS：答案是拥有的，我私下搞了半个小时，昨天以为没有inline boxes，以为发现新大陆了，丢人啦，，，，
结语
我今天又唧唧歪歪说了一大堆，也不知道各位有没有什么收获呢，明天我们还是一起来研究点有意义的事情吧，我感觉我对行内元素还是不够熟悉，明天我们就一起看看行内元素哇？
很多朋友说我传图，不穿美女，其实不是我不传美女，而是我传了怕你们受不了啊！！！
