接上次的话题，仍然是团队近期将会有大变化，最近确实有点蛋疼，对以后的规划神马的乱成一团，晚上也不想学习神马的了，有时候就什么都不做发现一晚上就莫名其妙的过去了......
但是上班时候不行，没事必须找点事情来做，反正现在做的东西多少有点......，所以闲暇中提炼了**过程中觉得有意义的东西。
上一版本
上周这个东东就基本完成了，反正也是菜鸟水平的东西，献丑什么的也没时间怕了，这次就上次留下的几个问题做了简单处理，形成了今天的东西，若是再优化的话应该是性能上的东西了吧。
① 菜单在窗口最下方拉长窗口问题:
解决后：
② 关于异步数据加载的问题：
比如一个表格数据，每次鼠标移动上去才加载数据，生成菜单；我们知道一旦涉及异步操作往往破坏原有程序逻辑，这块处理上我还没有好的方法。
③ 为类添加方法
最后我发现使用时候不能每次都指定id，很多时候会用class选择器，所以有了以下事情，但是这块仍然是后续优化重点，事实上他还是依赖于id......
1 initNewDrop({ 2 klass: 'show_info', 3 open: '1', 4 close: '1', 5 asyncDataLoad: function (el) { 6 //el为鼠标滑动元素 7 var asyncObj = {}; 8 asyncObj.url = 'Handler.ashx'; 9 asyncObj.param = { 'act_id': el.find('ul').attr('act_id') }; 10 asyncObj.getDropItem = function (data) { 11 //data为异步请求获取后的数据 12 if (data && typeof data == 'string') { 13 data = eval('(' + data + ')'); 14 } 15 data = data.data; 16 var type = data.notice; 17 if (type == 0) { 18 msg = '不发送短信'; 19 } else if (type == 1) { 20 msg = '自动短信'; 21 } else if (type == 3) { 22 msg = '手动短信'; 23 } 24 var param = [ 25 ['活动id：' + data.act_id], 26 ['报名人数：' + data.reg_num], 27 ['短信类型：' + msg], 28 ['<a href="#">自动短信条数：' + data.sms_auto_count + '</a>'], 29 ['<a href="http://www.baidu.com/" target="_blank">手动短信条数：' + data.sms_manual_count] 30 ]; 31 return param; 32 }; 33 return asyncObj; 34 }, 35 func: function (e, scope, listEl, toggleEl) { 36 var el = $(this); 37 scope.closeList(); 38 alert(el.html()); 39 return false; 40 } 41 });
1 function initNewDrop(opts) { 2 if (opts.klass) { 3 $('.' + opts.klass).each(function (k, v) { 4 var el = $(this); 5 var id = new Date().getTime() + '_' + k; 6 if (el.attr('id')) { 7 id = el.attr('id'); 8 } else { 9 el.attr('id', id); 10 } 11 opts.id = id; 12 new DropList(opts); 13 }); 14 } else { 15 new DropList(opts); 16 } 17 }
④ 级联菜单
异步加载
关于异步加载一直是我一个比较头疼的问题，这里大概是这样处理的，先贴上关键代码：
1 前台调用：
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 <link href="my_drop.css" rel="stylesheet" type="text/css" /> 6 <style type="text/css"> 7 .show_info 8 { 9 width:100px; 10 } 11 12 </style> 13 <script type="text/javascript" src="http://www.cnblogs.com/jquery-1.7.1.min.js"></script> 14 <script src="DropList.js" type="text/javascript"></script> 15 <script type="text/javascript"> 16 17 //方案一 18 $(document).ready(function () { 19 //title_text 20 initNewDrop({ 21 klass: 'show_info', 22 open: '1', 23 close: '1', 24 asyncDataLoad: function (el) { 25 //el为鼠标滑动元素 26 var asyncObj = {}; 27 asyncObj.url = 'Handler.ashx'; 28 asyncObj.param = { 'act_id': el.find('ul').attr('act_id') }; 29 asyncObj.getDropItem = function (data) { 30 //data为异步请求获取后的数据 31 if (data && typeof data == 'string') { 32 data = eval('(' + data + ')'); 33 } 34 data = data.data; 35 var type = data.notice; 36 if (type == 0) { 37 msg = '不发送短信'; 38 } else if (type == 1) { 39 msg = '自动短信'; 40 } else if (type == 3) { 41 msg = '手动短信'; 42 } 43 var param = [ 44 ['活动id：' + data.act_id], 45 ['报名人数：' + data.reg_num], 46 ['短信类型：' + msg], 47 ['<a href="#">自动短信条数：' + data.sms_auto_count + '</a>'], 48 ['<a href="http://www.baidu.com/" target="_blank">手动短信条数：' + data.sms_manual_count] 49 ]; 50 return param; 51 }; 52 return asyncObj; 53 }, 54 func: function (e, scope, listEl, toggleEl) { 55 var el = $(this); 56 scope.closeList(); 57 alert(el.html()); 58 return false; 59 } 60 }); 61 62 63 }); 64 </script> 65 </head> 66 <body> 67 <table> 68 <tr class="thead"> 69 <td width="50px"> 70 id 71 </td> 72 <td> 73 活动名称 74 </td> 75 <td width="70px"> 76 登录 77 </td> 78 <td width="60px"> 79 专题 80 </td> 81 <td width="100px"> 82 开始时间 83 </td> 84 <td width="100px"> 85 结束时间 86 </td> 87 <td width="300px"> 88 快速入口 89 </td> 90 </tr> 91 <tr class=""> 92 <td class=" "> 93 509 94 </td> 95 <td class=" "> 96 test_vote 97 </td> 98 <td> 99 否 100 </td> 101 <td> 102 <a href="http://www.qq.com" title="http://www.qq.com" target="_black">查看</a> 103 </td> 104 <td> 105 <span class="start_time" time="1364784875" title="2013-04-01 10:54:35"></span> 106 </td> 107 <td> 108 <span class="end_time" time="1364871292" title="2013-04-02 10:54:52"></span> 109 </td> 110 <td> 111 <div class="show_info"> 112 <div> 113 <a href="activity/509/user/list" class="p4">用户</a> 114 </div> 115 <ul class="info_detail" isload="no" act_id="509"> 116 </ul> 117 </div> 118 <a href="activity/509/edit/page" class="p4">编辑</a> <a href="activity/509/setting/page" 119 class="p4">设置</a> <a href="activity/509/messlog/page" class="p4">短信日志</a> <a href="activity/509/demo" 120 class="p4" target="_blank">页面</a> 121 </td> 122 </tr> 123 <tr class="alt-row"> 124 <td class=" "> 125 507 126 </td> 127 <td class=" "> 128 荣威团购 129 </td> 130 <td> 131 否 132 </td> 133 <td> 134 <a href="http://cd.qq.com/a/20130401/000355.htm" title="http://cd.qq.com/a/20130401/000355.htm" 135 target="_black">查看</a> 136 </td> 137 <td> 138 <span class="start_time" time="1364780571" title="2013-04-01 09:42:51"></span> 139 </td> 140 <td> 141 <span class="end_time" time="1379780571" title="2013-09-22 00:22:51"></span> 142 </td> 143 <td> 144 <div class="show_info"> 145 <div> 146 <a href="activity/507/user/list" class="p4">用户</a> 147 </div> 148 <ul class="info_detail" isload="no" act_id="507"> 149 </ul> 150 </div> 151 <a href="activity/507/edit/page" class="p4">编辑</a> <a href="activity/507/setting/page" 152 class="p4">设置</a> <a href="activity/507/messlog/page" class="p4">短信日志</a> <a href="activity/507/demo" 153 class="p4" target="_blank">页面</a> 154 </td> 155 </tr> 156 <tr class=""> 157 <td class=" "> 158 506 159 </td> 160 <td class=" "> 161 大成娱乐新版上线满意度调查 162 </td> 163 <td> 164 是(type2) 165 </td> 166 <td> 167 <a href="http://cd.qq.com/zt2013/ent_new/" title="http://cd.qq.com/zt2013/ent_new/" 168 target="_black">查看</a> 169 </td> 170 <td> 171 <span class="start_time" time="1364770800" title="2013-04-01 07:00:00"></span> 172 </td> 173 <td> 174 <span class="end_time" time="1365566400" title="2013-04-10 12:00:00"></span> 175 </td> 176 <td> 177 <div class="show_info"> 178 <div> 179 <a href="activity/506/user/list" class="p4">用户</a> 180 </div> 181 <ul class="info_detail" isload="no" act_id="506"> 182 </ul> 183 </div> 184 <a href="activity/506/edit/page" class="p4">编辑</a> <a href="activity/506/setting/page" 185 class="p4">设置</a> <a href="activity/506/messlog/page" class="p4">短信日志</a> <a href="activity/506/demo" 186 class="p4" target="_blank">页面</a> 187 </td> 188 </tr> 189 <tr class="alt-row"> 190 <td class=" "> 191 502 192 </td> 193 <td class=" "> 194 四川赏花踏青地 195 </td> 196 <td> 197 是(type2) 198 </td> 199 <td> 200 <a href="http://cd.qq.com" title="http://cd.qq.com" target="_black">查看</a> 201 </td> 202 <td> 203 <span class="start_time" time="1364534752" title="2013-03-29 13:25:52"></span> 204 </td> 205 <td> 206 <span class="end_time" time="1366016410" title="2013-04-15 17:00:10"></span> 207 </td> 208 <td> 209 <div class="show_info"> 210 <div> 211 <a href="activity/502/user/list" class="p4">用户</a> 212 </div> 213 <ul class="info_detail" isload="no" act_id="502"> 214 </ul> 215 </div> 216 <a href="activity/502/edit/page" class="p4">编辑</a> <a href="activity/502/setting/page" 217 class="p4">设置</a> <a href="activity/502/messlog/page" class="p4">短信日志</a> <a href="activity/502/demo" 218 class="p4" target="_blank">页面</a> 219 </td> 220 </tr> 221 <tr class=""> 222 <td class=" "> 223 500 224 </td> 225 <td class=" "> 226 安信地板4月13日 227 </td> 228 <td> 229 是(type1) 230 </td> 231 <td> 232 <a href="http://mycd.qq.com/t-817718-1.htm" title="http://mycd.qq.com/t-817718-1.htm" 233 target="_black">查看</a> 234 </td> 235 <td> 236 <span class="start_time" time="1364527690" title="2013-03-29 11:28:10"></span> 237 </td> 238 <td> 239 <span class="end_time" time="1365790090" title="2013-04-13 02:08:10"></span> 240 </td> 241 <td> 242 <div class="show_info"> 243 <div> 244 <a href="activity/500/user/list" class="p4">用户</a> 245 </div> 246 <ul class="info_detail" isload="no" act_id="500"> 247 </ul> 248 </div> 249 <a href="activity/500/edit/page" class="p4">编辑</a> <a href="activity/500/setting/page" 250 class="p4">设置</a> <a href="activity/500/messlog/page" class="p4">短信日志</a> <a href="activity/500/demo" 251 class="p4" target="_blank">页面</a> 252 </td> 253 </tr> 254 <tr class="alt-row"> 255 <td class=" self_msg"> 256 494 257 </td> 258 <td class=" self_msg"> 259 索菲亚大联盟 260 </td> 261 <td> 262 是(type1) 263 </td> 264 <td> 265 <a href="http://mycd.qq.com/t-817167-1.htm" title="http://mycd.qq.com/t-817167-1.htm" 266 target="_black">查看</a> 267 </td> 268 <td> 269 <span class="start_time" time="1364458330" title="2013-03-28 16:12:10"></span> 270 </td> 271 <td> 272 <span class="end_time" time="1365807130" title="2013-04-13 06:52:10"></span> 273 </td> 274 <td> 275 <div class="show_info"> 276 <div> 277 <a href="activity/494/user/list" class="p4">用户</a> 278 </div> 279 <ul class="info_detail" isload="no" act_id="494"> 280 </ul> 281 </div> 282 <a href="activity/494/edit/page" class="p4">编辑</a> <a href="activity/494/setting/page" 283 class="p4">设置</a> <a href="activity/494/messlog/page" class="p4">短信日志</a> <a href="activity/494/demo" 284 class="p4" target="_blank">页面</a> 285 </td> 286 </tr> 287 <tr class=""> 288 <td class=" activity_end "> 289 470 290 </td> 291 <td class=" activity_end "> 292 爱看团《魔境仙踪》周五DMAX3D仅25元！ 293 </td> 294 <td> 295 是(type1) 296 </td> 297 <td> 298 <a href="http://cd.qq.com/zt2013/ikan10/" title="http://cd.qq.com/zt2013/ikan10/" 299 target="_black">查看</a> 300 </td> 301 <td> 302 <span class="start_time" time="1364354987" title="2013-03-27 11:29:47"></span> 303 </td> 304 <td> 305 <span class="end_time" time="1364529600" title="2013-03-29 12:00:00"></span> 306 </td> 307 <td> 308 <div class="show_info"> 309 <div> 310 <a href="activity/470/user/list" class="p4">用户</a> 311 </div> 312 <ul class="info_detail" isload="no" act_id="470"> 313 </ul> 314 </div> 315 <a href="activity/470/edit/page" class="p4">编辑</a> <a href="activity/470/setting/page" 316 class="p4">设置</a> <a href="activity/470/messlog/page" class="p4">短信日志</a> <a href="activity/470/demo" 317 class="p4" target="_blank">页面</a> 318 </td> 319 </tr> 320 <tr class="alt-row"> 321 <td class=" activity_end "> 322 462 323 </td> 324 <td class=" activity_end "> 325 《厨戏痞》见面会仅40元 326 </td> 327 <td> 328 是(type1) 329 </td> 330 <td> 331 <a href="http://cd.qq.com/zt2013/ikan9/" title="http://cd.qq.com/zt2013/ikan9/" target="_black"> 332 查看</a> 333 </td> 334 <td> 335 <span class="start_time" time="1364271051" title="2013-03-26 12:10:51"></span> 336 </td> 337 <td> 338 <span class="end_time" time="1364439651" title="2013-03-28 11:00:51"></span> 339 </td> 340 <td> 341 <div class="show_info"> 342 <div> 343 <a href="activity/462/user/list" class="p4">用户</a> 344 </div> 345 <ul class="info_detail" isload="no" act_id="462"> 346 </ul> 347 </div> 348 <a href="activity/462/edit/page" class="p4">编辑</a> <a href="activity/462/setting/page" 349 class="p4">设置</a> <a href="activity/462/messlog/page" class="p4">短信日志</a> <a href="activity/462/demo" 350 class="p4" target="_blank">页面</a> 351 </td> 352 </tr> 353 <tr class=""> 354 <td class=" self_msg"> 355 449 356 </td> 357 <td class=" self_msg"> 358 醉美四川—Q友申领明信片将春天寄回家 359 </td> 360 <td> 361 是(type1) 362 </td> 363 <td> 364 <a href="http://cd.qq.com/zt2013/CDspring/index.htm" title="http://cd.qq.com/zt2013/CDspring/index.htm" 365 target="_black">查看</a> 366 </td> 367 <td> 368 <span class="start_time" time="1364140800" title="2013-03-25 00:00:00"></span> 369 </td> 370 <td> 371 <span class="end_time" time="1366300800" title="2013-04-19 00:00:00"></span> 372 </td> 373 <td> 374 <div class="show_info"> 375 <div> 376 <a href="activity/449/user/list" class="p4">用户</a> 377 </div> 378 <ul class="info_detail" isload="no" act_id="449"> 379 </ul> 380 </div> 381 <a href="activity/449/edit/page" class="p4">编辑</a> <a href="activity/449/setting/page" 382 class="p4">设置</a> <a href="activity/449/messlog/page" class="p4">短信日志</a> <a href="activity/449/demo" 383 class="p4" target="_blank">页面</a> 384 </td> 385 </tr> 386 <tr class="alt-row"> 387 <td class=" "> 388 446 389 </td> 390 <td class=" "> 391 绵阳家居建材团购报名 392 </td> 393 <td> 394 否 395 </td> 396 <td> 397 <a href="http://cd.qq.com/zt2013/myjjjctg/index.htm" title="http://cd.qq.com/zt2013/myjjjctg/index.htm" 398 target="_black">查看</a> 399 </td> 400 <td> 401 <span class="start_time" time="1363939814" title="2013-03-22 16:10:14"></span> 402 </td> 403 <td> 404 <span class="end_time" time="1410475814" title="2014-09-12 06:50:14"></span> 405 </td> 406 <td> 407 <div class="show_info"> 408 <div> 409 <a href="activity/446/user/list" class="p4">用户</a> 410 </div> 411 <ul class="info_detail" isload="no" act_id="446"> 412 </ul> 413 </div> 414 <a href="activity/446/edit/page" class="p4">编辑</a> <a href="activity/446/setting/page" 415 class="p4">设置</a> <a href="activity/446/messlog/page" class="p4">短信日志</a> <a href="activity/446/demo" 416 class="p4" target="_blank">页面</a> 417 </td> 418 </tr> 419 <tr class=""> 420 <td class=" self_msg"> 421 445 422 </td> 423 <td class=" self_msg"> 424 二级城市巡展南充 425 </td> 426 <td> 427 否 428 </