【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>
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中,基本就是生成了这个东西:
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><iclass="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><iclass="vertical"></i></span> 物流/仓储</label><label><span class="croSwitch"><i class="horizontal"></i><iclass="vertical"></i></span> 技工</label><label><span class="croSwitch"><i class="horizontal"></i><iclass="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><iclass="vertical"></i></span> 农/林/牧/渔业</label><label><span class="croSwitch"><i class="horizontal"></i><iclass="vertical"></i></span> 毕业生/实习生/培训生</label><label><span class="croSwitch"><iclass="horizontal"></i><i class="vertical"></i></span> 兼职/临时</label><label><spanclass="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(https://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(https://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>
带交互代码
结语
那撒。。。小叶确实熬不住了,明天再接着写吧,若您觉得这次这个有点意思请持续关注,届时我们在解释其中的问题。
【position也可以很复杂】当弹出层遇上了鼠标定位(上)相关推荐
- 【position也可以很复杂】当弹出层遇上了鼠标定位(下)
前言 接着昨天的内容写,为了保证内容连续性,这里还是把昨天的内容拷了过来. 请用现代浏览器测试 引出问题 有图有真相,我们来看一个智联招聘里面经常出现的图层: 他这个是没有什么问题的,我们来简单看看其 ...
- jbox弹窗_jbox很好的弹出层 很好的弹出层 - 下载 - 搜珍网
压缩包 : jbox-v2.3.rar 列表 jBox/i18n/jquery.jBox-zh-CN.js jBox/jquery-1.4.2.min.js jBox/jquery.jBox-2.3. ...
- 初探弹出层的实现原理
首先用几句话来描述一下实现过程,好有个思路嘛^^:(1)先创建一个div层将整个屏幕罩住(所谓的遮罩层),可设置该层的属性,例如透明度(2)在遮罩层内创建div来展示内容(这里暂时称为内容展示层),在 ...
- ios11,弹出层内的input框光标错位 键盘弹出时,输入信息,光标一直乱跳
之前开发了一个微信项目,维护期中苹果手机突然出现光标错位现象,经过排查,发现是最新的ios11系统的锅. 具体情况:弹出层使用position: fixed:弹出层内附带input/textarea输 ...
- 一个简单的遮罩弹出层效果
为什么80%的码农都做不了架构师?>>> 打酱油的日子就是要多学习下,最近在学写JS类库,虽然有面对对象语言的基础,但是感觉入手前端还是压力很大,就JS来说,干了半年了,水准还 ...
- AlertBox 弹出层(信息提示框)效果
弹出层(弹窗)就是相对文档或窗口定位的一个层,一般用来显示提示信息.广告等内容,还可以配合覆盖层来锁定页面. 在仿Lightbox效果中,已经基本实现了这个效果,这次主要改进了ie6在fixed时的抖 ...
- html5相对父元素定位,layer弹出层设置相对父级元素定位
layer弹出层默认是相对body固定定位的,可是项目中一般需要相对某个盒子相对定位,下面是个加载弹层例子: var loadIndex = layer.open({ type: 3, //3 表示加 ...
- 微信小程序项目实战知识点总结(swiper组件自适应高度,自定义弹出层,悬浮按钮,虚拟键盘)...
1.小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度 height:100vh; 2.微信小程序自定义弹出层,参考网址:https://blog.cs ...
- 使用layui的layer组件做弹出层
官方文档地址: http://www.layui.com/doc/modules/layer.html 本例演示效果: 当点击申请提现时,出现申请提现框,并根据用户输入进行一些判断,给出友好提示,比如 ...
最新文章
- java 泛型对象实例化_在java中实例化泛型类型
- B 站校招面试官“炫耀资产、贬低应试者”?当事人发长文回应,北邮学子要求向学校道歉
- tf.trainable_variables() and tf.all_variables()
- 如何预编译 Android 模拟器专用内核
- 用过的jQuery记录
- zipkin brave mysql_Zipkin和Brave实现http服务调用的跟踪
- [python][os]分离文件目录,文件名以及文件后缀
- dhl:搜狗五笔输入法
- java可视化tiff转pdf工具
- 【SpringBoot整合缓存】-----jetcache以及j2cache篇
- windows 8 下五笔98版和新世纪版的解决方案
- jlink接口定义(jlink接口定义 swd4线)
- 百度有道谷歌api集成批量翻译器
- django如何连接Mysql中已有的数据库
- 全民写作一夜成名 Web2.0:作家造富路线图
- Matlab--优化工具箱
- 计算机图形学中需要掌握的数学基础知识有哪些?
- Opencv学习笔记5:Opencv处理彩虹图、铜色图、灰度反转图
- YUTUc++沙盒小游戏5.0(亲测可运行)
- LIN总线协议详解10(LIN的API)
热门文章
- 服务器保存excel文件慢,从使用IE的服务器缓慢地保存Excel文件
- 暖通lisp快捷键_CAD 快捷键一览
- python条形码识别系统_Python识别处理照片中的条形码
- 信息系统项目管理师真题及答案
- 信息系统项目管理师:第6章:项目进度管理(2)-章节重点汇总
- 笔记-高项案例题-2015年下-需求管理
- el-table中怎样设置标题栏颜色以及每一行颜色交替不同的效果
- Vue中组态实现方案-BaseMap的使用
- ElementUI中的el-select中多选回显数据后没法重新选择和更改
- VMware10.0中安装CentOS8时提示客户机操作系统已禁用CPU,请关闭或重置虚拟机