基于jQuery的下拉菜单菜单【02】,诸位上眼!!!

前言


接上次的话题,仍然是团队近期将会有大变化,最近确实有点蛋疼,对以后的规划神马的乱成一团,晚上也不想学习神马的了,有时候就什么都不做发现一晚上就莫名其妙的过去了......

但是上班时候不行,没事必须找点事情来做,反正现在做的东西多少有点......,所以闲暇中提炼了**过程中觉得有意义的东西。

上一版本


上周这个东东就基本完成了,反正也是菜鸟水平的东西,献丑什么的也没时间怕了,这次就上次留下的几个问题做了简单处理,形成了今天的东西,若是再优化的话应该是性能上的东西了吧。

① 菜单在窗口最下方拉长窗口问题:

解决后:

② 关于异步数据加载的问题:

比如一个表格数据,每次鼠标移动上去才加载数据,生成菜单;我们知道一旦涉及异步操作往往破坏原有程序逻辑,这块处理上我还没有好的方法。

③ 为类添加方法

最后我发现使用时候不能每次都指定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 前台调用:

View Code
   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             </td>
 429             <td>
 430                 <a href="http://cd.house.qq.com/zt2013/ejcsxz/index.htm" title="http://cd.house.qq.com/zt2013/ejcsxz/index.htm"
 431                     target="_black">查看</a>
 432             </td>
 433             <td>
 434                 <span class="start_time" time="1363937768" title="2013-03-22 15:36:08"></span>
 435             </td>
 436             <td>
 437                 <span class="end_time" time="1378937768" title="2013-09-12 06:16:08"></span>
 438             </td>
 439             <td>
 440                 <div class="show_info">
 441                     <div>
 442                         <a href="activity/445/user/list" class="p4">用户</a>
 443                     </div>
 444                     <ul class="info_detail" isload="no" act_id="445">
 445                     </ul>
 446                 </div>
 447                 <a href="activity/445/edit/page" class="p4">编辑</a> <a href="activity/445/setting/page"
 448                     class="p4">设置</a> <a href="activity/445/messlog/page" class="p4">短信日志</a> <a href="activity/445/demo"
 449                         class="p4" target="_blank">页面</a>
 450             </td>
 451         </tr>
 452         <tr class="alt-row">
 453             <td class=" ">
 454                 435
 455             </td>
 456             <td class=" ">
 457                 大众
 458             </td>
 459             <td>
 460  461             </td>
 462             <td>
 463                 <a href="http://cd.qq.com/a/20130321/000417.htm" title="http://cd.qq.com/a/20130321/000417.htm"
 464                     target="_black">查看</a>
 465             </td>
 466             <td>
 467                 <span class="start_time" time="1363859423" title="2013-03-21 17:50:23"></span>
 468             </td>
 469             <td>
 470                 <span class="end_time" time="1378859423" title="2013-09-11 08:30:23"></span>
 471             </td>
 472             <td>
 473                 <div class="show_info">
 474                     <div>
 475                         <a href="activity/435/user/list" class="p4">用户</a>
 476                     </div>
 477                     <ul class="info_detail" isload="no" act_id="435">
 478                     </ul>
 479                 </div>
 480                 <a href="activity/435/edit/page" class="p4">编辑</a> <a href="activity/435/setting/page"
 481                     class="p4">设置</a> <a href="activity/435/messlog/page" class="p4">短信日志</a> <a href="activity/435/demo"
 482                         class="p4" target="_blank">页面</a>
 483             </td>
 484         </tr>
 485         <tr class="">
 486             <td class=" ">
 487                 427
 488             </td>
 489             <td class=" ">
 490                 江淮报名
 491             </td>
 492             <td>
 493  494             </td>
 495             <td>
 496                 <a href="http://cd.qq.com/a/20130318/000354.htm" title="http://cd.qq.com/a/20130318/000354.htm"
 497                     target="_black">查看</a>
 498             </td>
 499             <td>
 500                 <span class="start_time" time="1363836688" title="2013-03-21 11:31:28"></span>
 501             </td>
 502             <td>
 503                 <span class="end_time" time="1386699088" title="2013-12-11 02:11:28"></span>
 504             </td>
 505             <td>
 506                 <div class="show_info">
 507                     <div>
 508                         <a href="activity/427/user/list" class="p4">用户</a>
 509                     </div>
 510                     <ul class="info_detail" isload="no" act_id="427">
 511                     </ul>
 512                 </div>
 513                 <a href="activity/427/edit/page" class="p4">编辑</a> <a href="activity/427/setting/page"
 514                     class="p4">设置</a> <a href="activity/427/messlog/page" class="p4">短信日志</a> <a href="activity/427/demo"
 515                         class="p4" target="_blank">页面</a>
 516             </td>
 517         </tr>
 518         <tr class="alt-row">
 519             <td class=" ">
 520                 423
 521             </td>
 522             <td class=" ">
 523                 地铁微笑服务月
 524             </td>
 525             <td>
 526  527             </td>
 528             <td>
 529                 <a href="http://cd.qq.com/zt2013/2013smile/dtxs.htm" title="http://cd.qq.com/zt2013/2013smile/dtxs.htm"
 530                     target="_black">查看</a>
 531             </td>
 532             <td>
 533                 <span class="start_time" time="1363773456" title="2013-03-20 17:57:36"></span>
 534             </td>
 535             <td>
 536                 <span class="end_time" time="1378773456" title="2013-09-10 08:37:36"></span>
 537             </td>
 538             <td>
 539                 <div class="show_info">
 540                     <div>
 541                         <a href="activity/423/user/list" class="p4">用户</a>
 542                     </div>
 543                     <ul class="info_detail" isload="no" act_id="423">
 544                     </ul>
 545                 </div>
 546                 <a href="activity/423/edit/page" class="p4">编辑</a> <a href="activity/423/setting/page"
 547                     class="p4">设置</a> <a href="activity/423/messlog/page" class="p4">短信日志</a> <a href="activity/423/demo"
 548                         class="p4" target="_blank">页面</a>
 549             </td>
 550         </tr>
 551         <tr class="">
 552             <td class=" ">
 553                 422
 554             </td>
 555             <td class=" ">
 556                 东风风神7折8扣
 557             </td>
 558             <td>
 559  560             </td>
 561             <td>
 562                 <a href="http://cd.qq.com/zt2013/dffs/index.htm" title="http://cd.qq.com/zt2013/dffs/index.htm"
 563                     target="_black">查看</a>
 564             </td>
 565             <td>
 566                 <span class="start_time" time="1363772741" title="2013-03-20 17:45:41"></span>
 567             </td>
 568             <td>
 569                 <span class="end_time" time="1368145541" title="2013-05-10 08:25:41"></span>
 570             </td>
 571             <td>
 572                 <div class="show_info">
 573                     <div>
 574                         <a href="activity/422/user/list" class="p4">用户</a>
 575                     </div>
 576                     <ul class="info_detail" isload="no" act_id="422">
 577                     </ul>
 578                 </div>
 579                 <a href="activity/422/edit/page" class="p4">编辑</a> <a href="activity/422/setting/page"
 580                     class="p4">设置</a> <a href="activity/422/messlog/page" class="p4">短信日志</a> <a href="activity/422/demo"
 581                         class="p4" target="_blank">页面</a>
 582             </td>
 583         </tr>
 584         <tr class="alt-row">
 585             <td class=" ">
 586                 417
 587             </td>
 588             <td class=" ">
 589                 2013公积金微笑服务月
 590             </td>
 591             <td>
 592  593             </td>
 594             <td>
 595                 <a href="http://cd.qq.com/zt2013/2013smile/GGJHXTPYM.htm" title="http://cd.qq.com/zt2013/2013smile/GGJHXTPYM.htm"
 596                     target="_black">查看</a>
 597             </td>
 598             <td>
 599                 <span class="start_time" time="1363661947" title="2013-03-19 10:59:07"></span>
 600             </td>
 601             <td>
 602                 <span class="end_time" time="1378717200" title="2013-09-09 17:00:00"></span>
 603             </td>
 604             <td>
 605                 <div class="show_info">
 606                     <div>
 607                         <a href="activity/417/user/list" class="p4">用户</a>
 608                     </div>
 609                     <ul class="info_detail" isload="no" act_id="417">
 610                     </ul>
 611                 </div>
 612                 <a href="activity/417/edit/page" class="p4">编辑</a> <a href="activity/417/setting/page"
 613                     class="p4">设置</a> <a href="activity/417/messlog/page" class="p4">短信日志</a> <a href="activity/417/demo"
 614                         class="p4" target="_blank">页面</a>
 615             </td>
 616         </tr>
 617         <tr class="">
 618             <td class=" ">
 619                 413
 620             </td>
 621             <td class=" ">
 622                 2013运营商微笑服务月
 623             </td>
 624             <td>
 625  626             </td>
 627             <td>
 628                 <a href="http://cd.qq.com/zt2013/2013smile/yystoupiao.htm" title="http://cd.qq.com/zt2013/2013smile/yystoupiao.htm"
 629                     target="_black">查看</a>
 630             </td>
 631             <td>
 632                 <span class="start_time" time="1363687997" title="2013-03-19 18:13:17"></span>
 633             </td>
 634             <td>
 635                 <span class="end_time" time="1378687997" title="2013-09-09 08:53:17"></span>
 636             </td>
 637             <td>
 638                 <div class="show_info">
 639                     <div>
 640                         <a href="activity/413/user/list" class="p4">用户</a>
 641                     </div>
 642                     <ul class="info_detail" isload="no" act_id="413">
 643                     </ul>
 644                 </div>
 645                 <a href="activity/413/edit/page" class="p4">编辑</a> <a href="activity/413/setting/page"
 646                     class="p4">设置</a> <a href="activity/413/messlog/page" class="p4">短信日志</a> <a href="activity/413/demo"
 647                         class="p4" target="_blank">页面</a>
 648             </td>
 649         </tr>
 650         <tr class="alt-row">
 651             <td class=" activity_end  ">
 652                 412
 653             </td>
 654             <td class=" activity_end  ">
 655                 《北京遇上西雅图》周末超低价仅25元!
 656             </td>
 657             <td>
 658                 是(type1)
 659             </td>
 660             <td>
 661                 <a href="http://cd.qq.com/zt2013/ikan7" title="http://cd.qq.com/zt2013/ikan7" target="_black">
 662                     查看</a>
 663             </td>
 664             <td>
 665                 <span class="start_time" time="1363685311" title="2013-03-19 17:28:31"></span>
 666             </td>
 667             <td>
 668                 <span class="end_time" time="1363964911" title="2013-03-22 23:08:31"></span>
 669             </td>
 670             <td>
 671                 <div class="show_info">
 672                     <div>
 673                         <a href="activity/412/user/list" class="p4">用户</a>
 674                     </div>
 675                     <ul class="info_detail" isload="no" act_id="412">
 676                     </ul>
 677                 </div>
 678                 <a href="activity/412/edit/page" class="p4">编辑</a> <a href="activity/412/setting/page"
 679                     class="p4">设置</a> <a href="activity/412/messlog/page" class="p4">短信日志</a> <a href="activity/412/demo"
 680                         class="p4" target="_blank">页面</a>
 681             </td>
 682         </tr>
 683         <tr class="">
 684             <td class=" activity_end   self_msg">
 685                 410
 686             </td>
 687             <td class=" activity_end   self_msg">
 688                 泸州春季看房团
 689             </td>
 690             <td>
 691  692             </td>
 693             <td>
 694                 <a href="http://cd.qq.com/zt2013/2013lzcjkft/index.htm" title="http://cd.qq.com/zt2013/2013lzcjkft/index.htm"
 695                     target="_black">查看</a>
 696             </td>
 697             <td>
 698                 <span class="start_time" time="1363680369" title="2013-03-19 16:06:09"></span>
 699             </td>
 700             <td>
 701                 <span class="end_time" time="1364571969" title="2013-03-29 23:46:09"></span>
 702             </td>
 703             <td>
 704                 <div class="show_info">
 705                     <div>
 706                         <a href="activity/410/user/list" class="p4">用户</a>
 707                     </div>
 708                     <ul class="info_detail" isload="no" act_id="410">
 709                     </ul>
 710                 </div>
 711                 <a href="activity/410/edit/page" class="p4">编辑</a> <a href="activity/410/setting/page"
 712                     class="p4">设置</a> <a href="activity/410/messlog/page" class="p4">短信日志</a> <a href="activity/410/demo"
 713                         class="p4" target="_blank">页面</a>
 714             </td>
 715         </tr>
 716         <tr class="alt-row">
 717             <td class=" ">
 718                 407
 719             </td>
 720             <td class=" ">
 721                 2013金融微笑服务月
 722             </td>
 723             <td>
 724  725             </td>
 726             <td>
 727                 <a href="http://cd.qq.com/zt2013/2013smile/2013banksmile.htm" title="http://cd.qq.com/zt2013/2013smile/2013banksmile.htm"
 728                     target="_black">查看</a>
 729             </td>
 730             <td>
 731                 <span class="start_time" time="1363661947" title="2013-03-19 10:59:07"></span>
 732             </td>
 733             <td>
 734                 <span class="end_time" time="1378717200" title="2013-09-09 17:00:00"></span>
 735             </td>
 736             <td>
 737                 <div class="show_info">
 738                     <div>
 739                         <a href="activity/407/user/list" class="p4">用户</a>
 740                     </div>
 741                     <ul class="info_detail" isload="no" act_id="407">
 742                     </ul>
 743                 </div>
 744                 <a href="activity/407/edit/page" class="p4">编辑</a> <a href="activity/407/setting/page"
 745                     class="p4">设置</a> <a href="activity/407/messlog/page" class="p4">短信日志</a> <a href="activity/407/demo"
 746                         class="p4" target="_blank">页面</a>
 747             </td>
 748         </tr>
 749         <tr class="">
 750             <td class=" activity_end   self_msg">
 751                 400
 752             </td>
 753             <td class=" activity_end   self_msg">
 754                 德尔地板3月30日活动
 755             </td>
 756             <td>
 757                 是(type1)
 758             </td>
 759             <td>
 760                 <a href="http://mycd.qq.com/t-809172-1.htm" title="http://mycd.qq.com/t-809172-1.htm"
 761                     target="_black">查看</a>
 762             </td>
 763             <td>
 764                 <span class="start_time" time="1363591901" title="2013-03-18 15:31:41"></span>
 765             </td>
 766             <td>
 767                 <span class="end_time" time="1364595101" title="2013-03-30 06:11:41"></span>
 768             </td>
 769             <td>
 770                 <div class="show_info">
 771                     <div>
 772                         <a href="activity/400/user/list" class="p4">用户</a>
 773                     </div>
 774                     <ul class="info_detail" isload="no" act_id="400">
 775                     </ul>
 776                 </div>
 777                 <a href="activity/400/edit/page" class="p4">编辑</a> <a href="activity/400/setting/page"
 778                     class="p4">设置</a> <a href="activity/400/messlog/page" class="p4">短信日志</a> <a href="activity/400/demo"
 779                         class="p4" target="_blank">页面</a>
 780             </td>
 781         </tr>
 782         <tr class="alt-row">
 783             <td class=" activity_end  ">
 784                 396
 785             </td>
 786             <td class=" activity_end  ">
 787                 成都西湖之旅
 788             </td>
 789             <td>
 790                 是(type2)
 791             </td>
 792             <td>
 793                 <a href="http://cd.qq.com/zt2013/cdxhzl/index.htm" title="http://cd.qq.com/zt2013/cdxhzl/index.htm"
 794                     target="_black">查看</a>
 795             </td>
 796             <td>
 797                 <span class="start_time" time="1363571618" title="2013-03-18 09:53:38"></span>
 798             </td>
 799             <td>
 800                 <span class="end_time" time="1364140538" title="2013-03-24 23:55:38"></span>
 801             </td>
 802             <td>
 803                 <div class="show_info">
 804                     <div>
 805                         <a href="activity/396/user/list" class="p4">用户</a>
 806                     </div>
 807                     <ul class="info_detail" isload="no" act_id="396">
 808                     </ul>
 809                 </div>
 810                 <a href="activity/396/edit/page" class="p4">编辑</a> <a href="activity/396/setting/page"
 811                     class="p4">设置</a> <a href="activity/396/messlog/page" class="p4">短信日志</a> <a href="activity/396/demo"
 812                         class="p4" target="_blank">页面</a>
 813             </td>
 814         </tr>
 815         <tr class="">
 816             <td class="  self_msg">
 817                 388
 818             </td>
 819             <td class="  self_msg">
 820                 理财大学堂会员申请表
 821             </td>
 822             <td>
 823                 是(type1)
 824             </td>
 825             <td>
 826                 <a href="http://cd.qq.com/zt2011/fpclass/index.htm" title="http://cd.qq.com/zt2011/fpclass/index.htm"
 827                     target="_black">查看</a>
 828             </td>
 829             <td>
 830                 <span class="start_time" time="1363330800" title="2013-03-15 15:00:00"></span>
 831             </td>
 832             <td>
 833                 <span class="end_time" time="1420041599" title="2014-12-31 23:59:59"></span>
 834             </td>
 835             <td>
 836                 <div class="show_info">
 837                     <div>
 838                         <a href="activity/388/user/list" class="p4">用户</a>
 839                     </div>
 840                     <ul class="info_detail" isload="no" act_id="388">
 841                     </ul>
 842                 </div>
 843                 <a href="activity/388/edit/page" class="p4">编辑</a> <a href="activity/388/setting/page"
 844                     class="p4">设置</a> <a href="activity/388/messlog/page" class="p4">短信日志</a> <a href="activity/388/demo"
 845                         class="p4" target="_blank">页面</a>
 846             </td>
 847         </tr>
 848         <tr class="alt-row">
 849             <td class=" activity_end   self_msg">
 850                 375
 851             </td>
 852             <td class=" activity_end   self_msg">
 853                 蒙地卡罗3月23日
 854             </td>
 855             <td>
 856                 是(type1)
 857             </td>
 858             <td>
 859                 <a href="http://mycd.qq.com/t-804537-1.htm" title="http://mycd.qq.com/t-804537-1.htm"
 860                     target="_black">查看</a>
 861             </td>
 862             <td>
 863                 <span class="start_time" time="1363074954" title="2013-03-12 15:55:54"></span>
 864             </td>
 865             <td>
 866                 <span class="end_time" time="1363952154" title="2013-03-22 19:35:54"></span>
 867             </td>
 868             <td>
 869                 <div class="show_info">
 870                     <div>
 871                         <a href="activity/375/user/list" class="p4">用户</a>
 872                     </div>
 873                     <ul class="info_detail" isload="no" act_id="375">
 874                     </ul>
 875                 </div>
 876                 <a href="activity/375/edit/page" class="p4">编辑</a> <a href="activity/375/setting/page"
 877                     class="p4">设置</a> <a href="activity/375/messlog/page" class="p4">短信日志</a> <a href="activity/375/demo"
 878                         class="p4" target="_blank">页面</a>
 879             </td>
 880         </tr>
 881         <tr class="">
 882             <td class=" activity_end  ">
 883                 373
 884             </td>
 885             <td class=" activity_end  ">
 886                 东风雪铁龙
 887             </td>
 888             <td>
 889  890             </td>
 891             <td>
 892                 <a href="http://cd.qq.com/zt2013/dfxtl/index.htm" title="http://cd.qq.com/zt2013/dfxtl/index.htm"
 893                     target="_black">查看</a>
 894             </td>
 895             <td>
 896                 <span class="start_time" time="1363073268" title="2013-03-12 15:27:48"></span>
 897             </td>
 898             <td>
 899                 <span class="end_time" time="1363903668" title="2013-03-22 06:07:48"></span>
 900             </td>
 901             <td>
 902                 <div class="show_info">
 903                     <div>
 904                         <a href="activity/373/user/list" class="p4">用户</a>
 905                     </div>
 906                     <ul class="info_detail" isload="no" act_id="373">
 907                     </ul>
 908                 </div>
 909                 <a href="activity/373/edit/page" class="p4">编辑</a> <a href="activity/373/setting/page"
 910                     class="p4">设置</a> <a href="activity/373/messlog/page" class="p4">短信日志</a> <a href="activity/373/demo"
 911                         class="p4" target="_blank">页面</a>
 912             </td>
 913         </tr>
 914         <tr class="alt-row">
 915             <td class=" activity_end  ">
 916                 372
 917             </td>
 918             <td class=" activity_end  ">
 919                 《虎胆龙威5》周五DMAX巨幕厅仅25元!
 920             </td>
 921             <td>
 922                 是(type1)
 923             </td>
 924             <td>
 925                 <a href="http://cd.qq.com/zt2013/ikan5" title="http://cd.qq.com/zt2013/ikan5" target="_black">
 926                     查看</a>
 927             </td>
 928             <td>
 929                 <span class="start_time" time="1363073218" title="2013-03-12 15:26:58"></span>
 930             </td>
 931             <td>
 932                 <span class="end_time" time="1363330800" title="2013-03-15 15:00:00"></span>
 933             </td>
 934             <td>
 935                 <div class="show_info">
 936                     <div>
 937                         <a href="activity/372/user/list" class="p4">用户</a>
 938                     </div>
 939                     <ul class="info_detail" isload="no" act_id="372">
 940                     </ul>
 941                 </div>
 942                 <a href="activity/372/edit/page" class="p4">编辑</a> <a href="activity/372/setting/page"
 943                     class="p4">设置</a> <a href="activity/372/messlog/page" class="p4">短信日志</a> <a href="activity/372/demo"
 944                         class="p4" target="_blank">页面</a>
 945             </td>
 946         </tr>
 947         <tr class="">
 948             <td class=" activity_end  ">
 949                 366
 950             </td>
 951             <td class=" activity_end  ">
 952                 区域看房团第7期
 953             </td>
 954             <td>
 955  956             </td>
 957             <td>
 958                 <a href="http://cd.house.qq.com/zt2013/quyu7/index.htm" title="http://cd.house.qq.com/zt2013/quyu7/index.htm"
 959                     target="_black">查看</a>
 960             </td>
 961             <td>
 962                 <span class="start_time" time="1362931200" title="2013-03-11 00:00:00"></span>
 963             </td>
 964             <td>
 965                 <span class="end_time" time="1363881600" title="2013-03-22 00:00:00"></span>
 966             </td>
 967             <td>
 968                 <div class="show_info">
 969                     <div>
 970                         <a href="activity/366/user/list" class="p4">用户</a>
 971                     </div>
 972                     <ul class="info_detail" isload="no" act_id="366">
 973                     </ul>
 974                 </div>
 975                 <a href="activity/366/edit/page" class="p4">编辑</a> <a href="activity/366/setting/page"
 976                     class="p4">设置</a> <a href="activity/366/messlog/page" class="p4">短信日志</a> <a href="activity/366/demo"
 977                         class="p4" target="_blank">页面</a>
 978             </td>
 979         </tr>
 980         <tr class="alt-row">
 981             <td class=" activity_end   self_msg">
 982                 358
 983             </td>
 984             <td class=" activity_end   self_msg">
 985                 浪度家私3月23日活动
 986             </td>
 987             <td>
 988  989             </td>
 990             <td>
 991                 <a href="http://mycd.qq.com/t-803765-1.htm" title="http://mycd.qq.com/t-803765-1.htm"
 992                     target="_black">查看</a>
 993             </td>
 994             <td>
 995                 <span class="start_time" time="1362973252" title="2013-03-11 11:40:52"></span>
 996             </td>
 997             <td>
 998                 <span class="end_time" time="1363976452" title="2013-03-23 02:20:52"></span>
 999             </td>
1000             <td>
1001                 <div class="show_info">
1002                     <div>
1003                         <a href="activity/358/user/list" class="p4">用户</a>
1004                     </div>
1005                     <ul class="info_detail" isload="no" act_id="358">
1006                     </ul>
1007                 </div>
1008                 <a href="activity/358/edit/page" class="p4">编辑</a> <a href="activity/358/setting/page"
1009                     class="p4">设置</a> <a href="activity/358/messlog/page" class="p4">短信日志</a> <a href="activity/358/demo"
1010                         class="p4" target="_blank">页面</a>
1011             </td>
1012         </tr>
1013         <tr class="">
1014             <td class=" activity_end  ">
1015                 353
1016             </td>
1017             <td class=" activity_end  ">
1018                 华侨凤凰城
1019             </td>
1020             <td>
1021 1022             </td>
1023             <td>
1024                 <a href="http://cd.qq.com/zt2013/2013hqfhc/index.htm" title="http://cd.qq.com/zt2013/2013hqfhc/index.htm"
1025                     target="_black">查看</a>
1026             </td>
1027             <td>
1028                 <span class="start_time" time="1362709403" title="2013-03-08 10:23:23"></span>
1029             </td>
1030             <td>
1031                 <span class="end_time" time="1364745323" title="2013-03-31 23:55:23"></span>
1032             </td>
1033             <td>
1034                 <div class="show_info">
1035                     <div>
1036                         <a href="activity/353/user/list" class="p4">用户</a>
1037                     </div>
1038                     <ul class="info_detail" isload="no" act_id="353">
1039                     </ul>
1040                 </div>
1041                 <a href="activity/353/edit/page" class="p4">编辑</a> <a href="activity/353/setting/page"
1042                     class="p4">设置</a> <a href="activity/353/messlog/page" class="p4">短信日志</a> <a href="activity/353/demo"
1043                         class="p4" target="_blank">页面</a>
1044             </td>
1045         </tr>
1046         <tr class="alt-row">
1047             <td class=" activity_end  ">
1048                 352
1049             </td>
1050             <td class=" activity_end  ">
1051                 Q房狂省团第20期
1052             </td>
1053             <td>
1054 1055             </td>
1056             <td>
1057                 <a href="http://cd.house.qq.com/zt2013/kst20/index.htm" title="http://cd.house.qq.com/zt2013/kst20/index.htm"
1058                     target="_black">查看</a>
1059             </td>
1060             <td>
1061                 <span class="start_time" time="1362707718" title="2013-03-08 09:55:18"></span>
1062             </td>
1063             <td>
1064                 <span class="end_time" time="1363536000" title="2013-03-18 00:00:00"></span>
1065             </td>
1066             <td>
1067                 <div class="show_info">
1068                     <div>
1069                         <a href="activity/352/user/list" class="p4">用户</a>
1070                     </div>
1071                     <ul class="info_detail" isload="no" act_id="352">
1072                     </ul>
1073                 </div>
1074                 <a href="activity/352/edit/page" class="p4">编辑</a> <a href="activity/352/setting/page"
1075                     class="p4">设置</a> <a href="activity/352/messlog/page" class="p4">短信日志</a> <a href="activity/352/demo"
1076                         class="p4" target="_blank">页面</a>
1077             </td>
1078         </tr>
1079         <tr class="">
1080             <td class=" activity_end   self_msg">
1081                 351
1082             </td>
1083             <td class=" activity_end   self_msg">
1084                 图腾宝佳3月31日活动
1085             </td>
1086             <td>
1087                 是(type1)
1088             </td>
1089             <td>
1090                 <a href="http://mycd.qq.com/t-801349-1.htm" title="http://mycd.qq.com/t-801349-1.htm"
1091                     target="_black">查看</a>
1092             </td>
1093             <td>
1094                 <span class="start_time" time="1362651113" title="2013-03-07 18:11:53"></span>
1095             </td>
1096             <td>
1097                 <span class="end_time" time="1364604713" title="2013-03-30 08:51:53"></span>
1098             </td>
1099             <td>
1100                 <div class="show_info">
1101                     <div>
1102                         <a href="activity/351/user/list" class="p4">用户</a>
1103                     </div>
1104                     <ul class="info_detail" isload="no" act_id="351">
1105                     </ul>
1106                 </div>
1107                 <a href="activity/351/edit/page" class="p4">编辑</a> <a href="activity/351/setting/page"
1108                     class="p4">设置</a> <a href="activity/351/messlog/page" class="p4">短信日志</a> <a href="activity/351/demo"
1109                         class="p4" target="_blank">页面</a>
1110             </td>
1111         </tr>
1112         <tr class="alt-row">
1113             <td class=" ">
1114                 349
1115             </td>
1116             <td class=" ">
1117                 惠装商城
1118             </td>
1119             <td>
1120 1121             </td>
1122             <td>
1123                 <a href="http://cd.qq.com/zt2013/huizhuang/index.htm" title="http://cd.qq.com/zt2013/huizhuang/index.htm"
1124                     target="_black">查看</a>
1125             </td>
1126             <td>
1127                 <span class="start_time" time="1362649536" title="2013-03-07 17:45:36"></span>
1128             </td>
1129             <td>
1130                 <span class="end_time" time="1365121536" title="2013-04-05 08:25:36"></span>
1131             </td>
1132             <td>
1133                 <div class="show_info">
1134                     <div>
1135                         <a href="activity/349/user/list" class="p4">用户</a>
1136                     </div>
1137                     <ul class="info_detail" isload="no" act_id="349">
1138                     </ul>
1139                 </div>
1140                 <a href="activity/349/edit/page" class="p4">编辑</a> <a href="activity/349/setting/page"
1141                     class="p4">设置</a> <a href="activity/349/messlog/page" class="p4">短信日志</a> <a href="activity/349/demo"
1142                         class="p4" target="_blank">页面</a>
1143             </td>
1144         </tr>
1145         <tr class="">
1146             <td class=" ">
1147                 346
1148             </td>
1149             <td class=" ">
1150                 天立贵宾会
1151             </td>
1152             <td>
1153 1154             </td>
1155             <td>
1156                 <a href="http://mycd.qq.com/forum.php?mod=viewthread&amp;tid=799585" title="http://mycd.qq.com/forum.php?mod=viewthread&amp;tid=799585"
1157                     target="_black">查看</a>
1158             </td>
1159             <td>
1160                 <span class="start_time" time="1362625682" title="2013-03-07 11:08:02"></span>
1161             </td>
1162             <td>
1163                 <span class="end_time" time="1388425682" title="2013-12-31 01:48:02"></span>
1164             </td>
1165             <td>
1166                 <div class="show_info">
1167                     <div>
1168                         <a href="activity/346/user/list" class="p4">用户</a>
1169                     </div>
1170                     <ul class="info_detail" isload="no" act_id="346">
1171                     </ul>
1172                 </div>
1173                 <a href="activity/346/edit/page" class="p4">编辑</a> <a href="activity/346/setting/page"
1174                     class="p4">设置</a> <a href="activity/346/messlog/page" class="p4">短信日志</a> <a href="activity/346/demo"
1175                         class="p4" target="_blank">页面</a>
1176             </td>
1177         </tr>
1178         <tr class="alt-row">
1179             <td class=" activity_end  ">
1180                 344
1181             </td>
1182             <td class=" activity_end  ">
1183                 美景舒适家3月活动
1184             </td>
1185             <td>
1186 1187             </td>
1188             <td>
1189                 <a href="http://cd.qq.com/a/20130307/000300.htm" title="http://cd.qq.com/a/20130307/000300.htm"
1190                     target="_black">查看</a>
1191             </td>
1192             <td>
1193                 <span class="start_time" time="1362619219" title="2013-03-07 09:20:19"></span>
1194             </td>
1195             <td>
1196                 <span class="end_time" time="1362672019" title="2013-03-08 00:00:19"></span>
1197             </td>
1198             <td>
1199                 <div class="show_info">
1200                     <div>
1201                         <a href="activity/344/user/list" class="p4">用户</a>
1202                     </div>
1203                     <ul class="info_detail" isload="no" act_id="344">
1204                     </ul>
1205                 </div>
1206                 <a href="activity/344/edit/page" class="p4">编辑</a> <a href="activity/344/setting/page"
1207                     class="p4">设置</a> <a href="activity/344/messlog/page" class="p4">短信日志</a> <a href="activity/344/demo"
1208                         class="p4" target="_blank">页面</a>
1209             </td>
1210         </tr>
1211         <tr class="">
1212             <td class=" activity_end  ">
1213                 330
1214             </td>
1215             <td class=" activity_end  ">
1216                 家居315活动
1217             </td>
1218             <td>
1219                 是(type1)
1220             </td>
1221             <td>
1222                 <a href="http://mycd.qq.com/t-799700-1.htm" title="http://mycd.qq.com/t-799700-1.htm"
1223                     target="_black">查看</a>
1224             </td>
1225             <td>
1226                 <span class="start_time" time="1362450771" title="2013-03-05 10:32:51"></span>
1227             </td>
1228             <td>
1229                 <span class="end_time" time="1363453971" title="2013-03-17 01:12:51"></span>
1230             </td>
1231             <td>
1232                 <div class="show_info">
1233                     <div>
1234                         <a href="activity/330/user/list" class="p4">用户</a>
1235                     </div>
1236                     <ul class="info_detail" isload="no" act_id="330">
1237                     </ul>
1238                 </div>
1239                 <a href="activity/330/edit/page" class="p4">编辑</a> <a href="activity/330/setting/page"
1240                     class="p4">设置</a> <a href="activity/330/messlog/page" class="p4">短信日志</a> <a href="activity/330/demo"
1241                         class="p4" target="_blank">页面</a>
1242             </td>
1243         </tr>
1244         <tr class="alt-row">
1245             <td class=" activity_end  ">
1246                 329
1247             </td>
1248             <td class=" activity_end  ">
1249                 艾力绅家庭日 移动梦想家
1250             </td>
1251             <td>
1252 1253             </td>
1254             <td>
1255                 <a href="http://cd.qq.com/zt2013/ELYSION/index.htm" title="http://cd.qq.com/zt2013/ELYSION/index.htm"
1256                     target="_black">查看</a>
1257             </td>
1258             <td>
1259                 <span class="start_time" time="1362449178" title="2013-03-05 10:06:18"></span>
1260             </td>
1261             <td>
1262                 <span class="end_time" time="1362758118" title="2013-03-08 23:55:18"></span>
1263             </td>
1264             <td>
1265                 <div class="show_info">
1266                     <div>
1267                         <a href="activity/329/user/list" class="p4">用户</a>
1268                     </div>
1269                     <ul class="info_detail" isload="no" act_id="329">
1270                     </ul>
1271                 </div>
1272                 <a href="activity/329/edit/page" class="p4">编辑</a> <a href="activity/329/setting/page"
1273                     class="p4">设置</a> <a href="activity/329/messlog/page" class="p4">短信日志</a> <a href="activity/329/demo"
1274                         class="p4" target="_blank">页面</a>
1275             </td>
1276         </tr>
1277         <tr class="">
1278             <td class=" activity_end  ">
1279                 301
1280             </td>
1281             <td class=" activity_end  ">
1282                 千川木门2013当红特让
1283             </td>
1284             <td>
1285 1286             </td>
1287             <td>
1288                 <a href="http://cd.qq.com/zt2013/2013dhtr/cdz.htm" title="http://cd.qq.com/zt2013/2013dhtr/cdz.htm"
1289                     target="_black">查看</a>
1290             </td>
1291             <td>
1292                 <span class="start_time" time="1361956033" title="2013-02-27 17:07:13"></span>
1293             </td>
1294             <td>
1295                 <span class="end_time" time="1363362913" title="2013-03-15 23:55:13"></span>
1296             </td>
1297             <td>
1298                 <div class="show_info">
1299                     <div>
1300                         <a href="activity/301/user/list" class="p4">用户</a>
1301                     </div>
1302                     <ul class="info_detail" isload="no" act_id="301">
1303                     </ul>
1304                 </div>
1305                 <a href="activity/301/edit/page" class="p4">编辑</a> <a href="activity/301/setting/page"
1306                     class="p4">设置</a> <a href="activity/301/messlog/page" class="p4">短信日志</a> <a href="activity/301/demo"
1307                         class="p4" target="_blank">页面</a>
1308             </td>
1309         </tr>
1310         <tr class="alt-row">
1311             <td class=" ">
1312                 300
1313             </td>
1314             <td class=" ">
1315                 flash_test_kylefeng
1316             </td>
1317             <td>
1318 1319             </td>
1320             <td>
1321                 <a href="http://cd.qq.com" title="http://cd.qq.com" target="_black">查看</a>
1322             </td>
1323             <td>
1324                 <span class="start_time" time="1361951329" title="2013-02-27 15:48:49"></span>
1325             </td>
1326             <td>
1327                 <span class="end_time" time="1376951329" title="2013-08-20 06:28:49"></span>
1328             </td>
1329             <td>
1330                 <div class="show_info">
1331                     <div>
1332                         <a href="activity/300/user/list" class="p4">用户</a>
1333                     </div>
1334                     <ul class="info_detail" isload="no" act_id="300">
1335                     </ul>
1336                 </div>
1337                 <a href="activity/300/edit/page" class="p4">编辑</a> <a href="activity/300/setting/page"
1338                     class="p4">设置</a> <a href="activity/300/messlog/page" class="p4">短信日志</a> <a href="activity/300/demo"
1339                         class="p4" target="_blank">页面</a>
1340             </td>
1341         </tr>
1342         <tr class="">
1343             <td class=" activity_end  ">
1344                 295
1345             </td>
1346             <td class=" activity_end  ">
1347                 《霍比特人》DMAX巨幕厅3D团看仅30元!
1348             </td>
1349             <td>
1350                 是(type1)
1351             </td>
1352             <td>
1353                 <a href="http://cd.qq.com/zt2013/ikan3" title="http://cd.qq.com/zt2013/ikan3" target="_black">
1354                     查看</a>
1355             </td>
1356             <td>
1357                 <span class="start_time" time="1361861839" title="2013-02-26 14:57:19"></span>
1358             </td>
1359             <td>
1360                 <span class="end_time" time="1362128400" title="2013-03-01 17:00:00"></span>
1361             </td>
1362             <td>
1363                 <div class="show_info">
1364                     <div>
1365                         <a href="activity/295/user/list" class="p4">用户</a>
1366                     </div>
1367                     <ul class="info_detail" isload="no" act_id="295">
1368                     </ul>
1369                 </div>
1370                 <a href="activity/295/edit/page" class="p4">编辑</a> <a href="activity/295/setting/page"
1371                     class="p4">设置</a> <a href="activity/295/messlog/page" class="p4">短信日志</a> <a href="activity/295/demo"
1372                         class="p4" target="_blank">页面</a>
1373             </td>
1374         </tr>
1375         <tr class="alt-row">
1376             <td class=" activity_end   self_msg">
1377                 280
1378             </td>
1379             <td class=" activity_end   self_msg">
1380                 3月17日第9届家居团购节
1381             </td>
1382             <td>
1383                 是(type1)
1384             </td>
1385             <td>
1386                 <a href="http://cd.qq.com/jiaju/" title="http://cd.qq.com/jiaju/" target="_black">查看</a>
1387             </td>
1388             <td>
1389                 <span class="start_time" time="1361352873" title="2013-02-20 17:34:33"></span>
1390             </td>
1391             <td>
1392                 <span class="end_time" time="1363344933" title="2013-03-15 18:55:33"></span>
1393             </td>
1394             <td>
1395                 <div class="show_info">
1396                     <div>
1397                         <a href="activity/280/user/list" class="p4">用户</a>
1398                     </div>
1399                     <ul class="info_detail" isload="no" act_id="280">
1400                     </ul>
1401                 </div>
1402                 <a href="activity/280/edit/page" class="p4">编辑</a> <a href="activity/280/setting/page"
1403                     class="p4">设置</a> <a href="activity/280/messlog/page" class="p4">短信日志</a> <a href="activity/280/demo"
1404                         class="p4" target="_blank">页面</a>
1405             </td>
1406         </tr>
1407         <tr class="">
1408             <td class=" activity_end   self_msg">
1409                 278
1410             </td>
1411             <td class=" activity_end   self_msg">
1412                 3月17日千川木门
1413             </td>
1414             <td>
1415                 是(type1)
1416             </td>
1417             <td>
1418                 <a href="http://cd.qq.com/jiaju/" title="http://cd.qq.com/jiaju/" target="_black">查看</a>
1419             </td>
1420             <td>
1421                 <span class="start_time" time="1361342533" title="2013-02-20 14:42:13"></span>
1422             </td>
1423             <td>
1424                 <span class="end_time" time="1363362913" title="2013-03-15 23:55:13"></span>
1425             </td>
1426             <td>
1427                 <div class="show_info">
1428                     <div>
1429                         <a href="activity/278/user/list" class="p4">用户</a>
1430                     </div>
1431                     <ul class="info_detail" isload="no" act_id="278">
1432                     </ul>
1433                 </div>
1434                 <a href="activity/278/edit/page" class="p4">编辑</a> <a href="activity/278/setting/page"
1435                     class="p4">设置</a> <a href="activity/278/messlog/page" class="p4">短信日志</a> <a href="activity/278/demo"
1436                         class="p4" target="_blank">页面</a>
1437             </td>
1438         </tr>
1439         <tr class="alt-row">
1440             <td class=" activity_end   self_msg">
1441                 276
1442             </td>
1443             <td class=" activity_end   self_msg">
1444                 升达地板专场
1445             </td>
1446             <td>
1447                 是(type1)
1448             </td>
1449             <td>
1450                 <a href="http://mycd.qq.com/t-790584-1.htm" title="http://mycd.qq.com/t-790584-1.htm"
1451                     target="_black">查看</a>
1452             </td>
1453             <td>
1454                 <span class="start_time" time="1361323911" title="2013-02-20 09:31:51"></span>
1455             </td>
1456             <td>
1457                 <span class="end_time" time="1362154311" title="2013-03-02 00:11:51"></span>
1458             </td>
1459             <td>
1460                 <div class="show_info">
1461                     <div>
1462                         <a href="activity/276/user/list" class="p4">用户</a>
1463                     </div>
1464                     <ul class="info_detail" isload="no" act_id="276">
1465                     </ul>
1466                 </div>
1467                 <a href="activity/276/edit/page" class="p4">编辑</a> <a href="activity/276/setting/page"
1468                     class="p4">设置</a> <a href="activity/276/messlog/page" class="p4">短信日志</a> <a href="activity/276/demo"
1469                         class="p4" target="_blank">页面</a>
1470             </td>
1471         </tr>
1472         <tr class="">
1473             <td class=" ">
1474                 272
1475             </td>
1476             <td class=" ">
1477                 《西游》《霍比特人》报名
1478             </td>
1479             <td>
1480                 是(type1)
1481             </td>
1482             <td>
1483                 <a href="http://cd.qq.com/zt2013/ikan1/" title="http://cd.qq.com/zt2013/ikan1/" target="_black">
1484                     查看</a>
1485             </td>
1486             <td>
1487                 <span class="start_time" time="1361261417" title="2013-02-19 16:10:17"></span>
1488             </td>
1489             <td>
1490                 <span class="end_time" time="1377250200" title="2013-08-23 17:30:00"></span>
1491             </td>
1492             <td>
1493                 <div class="show_info">
1494                     <div>
1495                         <a href="activity/272/user/list" class="p4">用户</a>
1496                     </div>
1497                     <ul class="info_detail" isload="no" act_id="272">
1498                     </ul>
1499                 </div>
1500                 <a href="activity/272/edit/page" class="p4">编辑</a> <a href="activity/272/setting/page"
1501                     class="p4">设置</a> <a href="activity/272/messlog/page" class="p4">短信日志</a> <a href="activity/272/demo"
1502                         class="p4" target="_blank">页面</a>
1503             </td>
1504         </tr>
1505         <tr class="alt-row">
1506             <td class=" activity_end  ">
1507                 271
1508             </td>
1509             <td class=" activity_end  ">
1510                 结婚采购第二季--九时酒刻
1511             </td>
1512             <td>
1513                 是(type1)
1514             </td>
1515             <td>
1516                 <a href="http://cd.qq.com/zt2013/D2JJHCGJ/index.htm" title="http://cd.qq.com/zt2013/D2JJHCGJ/index.htm"
1517                     target="_black">查看</a>
1518             </td>
1519             <td>
1520                 <span class="start_time" time="1361261274" title="2013-02-19 16:07:54"></span>
1521             </td>
1522             <td>
1523                 <span class="end_time" time="1362585354" title="2013-03-06 23:55:54"></span>
1524             </td>
1525             <td>
1526                 <div class="show_info">
1527                     <div>
1528                         <a href="activity/271/user/list" class="p4">用户</a>
1529                     </div>
1530                     <ul class="info_detail" isload="no" act_id="271">
1531                     </ul>
1532                 </div>
1533                 <a href="activity/271/edit/page" class="p4">编辑</a> <a href="activity/271/setting/page"
1534                     class="p4">设置</a> <a href="activity/271/messlog/page" class="p4">短信日志</a> <a href="activity/271/demo"
1535                         class="p4" target="_blank">页面</a>
1536             </td>
1537         </tr>
1538         <tr class="">
1539             <td class=" activity_end  ">
1540                 269
1541             </td>
1542             <td class=" activity_end  ">
1543                 2013结婚采购季
1544             </td>
1545             <td>
1546                 是(type1)
1547             </td>
1548             <td>
1549                 <a href="http://cd.qq.com/wedding/" title="http://cd.qq.com/wedding/" target="_black">
1550                     查看</a>
1551             </td>
1552             <td>
1553                 <span class="start_time" time="1361173787" title="2013-02-18 15:49:47"></span>
1554             </td>
1555             <td>
1556                 <span class="end_time" time="1363732187" title="2013-03-20 06:29:47"></span>
1557             </td>
1558             <td>
1559                 <div class="show_info">
1560                     <div>
1561                         <a href="activity/269/user/list" class="p4">用户</a>
1562                     </div>
1563                     <ul class="info_detail" isload="no" act_id="269">
1564                     </ul>
1565                 </div>
1566                 <a href="activity/269/edit/page" class="p4">编辑</a> <a href="activity/269/setting/page"
1567                     class="p4">设置</a> <a href="activity/269/messlog/page" class="p4">短信日志</a> <a href="activity/269/demo"
1568                         class="p4" target="_blank">页面</a>
1569             </td>
1570         </tr>
1571         <tr class="alt-row">
1572             <td class=" ">
1573                 268
1574             </td>
1575             <td class=" ">
1576                 结婚采购第二季--W妆点
1577             </td>
1578             <td>
1579                 是(type1)
1580             </td>
1581             <td>
1582                 <a href="http://cd.qq.com/zt2013/D2JJHCGJ/index.htm" title="http://cd.qq.com/zt2013/D2JJHCGJ/index.htm"
1583                     target="_black">查看</a>
1584             </td>
1585             <td>
1586                 <span class="start_time" time="1361152302" title="2013-02-18 09:51:42"></span>
1587             </td>
1588             <td>
1589                 <span class="end_time" time="1365263742" title="2013-04-06 23:55:42"></span>
1590             </td>
1591             <td>
1592                 <div class="show_info">
1593                     <div>
1594                         <a href="activity/268/user/list" class="p4">用户</a>
1595                     </div>
1596                     <ul class="info_detail" isload="no" act_id="268">
1597                     </ul>
1598                 </div>
1599                 <a href="activity/268/edit/page" class="p4">编辑</a> <a href="activity/268/setting/page"
1600                     class="p4">设置</a> <a href="activity/268/messlog/page" class="p4">短信日志</a> <a href="activity/268/demo"
1601                         class="p4" target="_blank">页面</a>
1602             </td>
1603         </tr>
1604         <tr class="">
1605             <td class=" activity_end  ">
1606                 267
1607             </td>
1608             <td class=" activity_end  ">
1609                 结婚采购第二季--钻石新娘
1610             </td>
1611             <td>
1612                 是(type1)
1613             </td>
1614             <td>
1615                 <a href="http://cd.qq.com/zt2013/D2JJHCGJ/index.htm" title="http://cd.qq.com/zt2013/D2JJHCGJ/index.htm"
1616                     target="_black">查看</a>
1617             </td>
1618             <td>
1619                 <span class="start_time" time="1361152164" title="2013-02-18 09:49:24"></span>
1620             </td>
1621             <td>
1622                 <span class="end_time" time="1362585324" title="2013-03-06 23:55:24"></span>
1623             </td>
1624             <td>
1625                 <div class="show_info">
1626                     <div>
1627                         <a href="activity/267/user/list" class="p4">用户</a>
1628                     </div>
1629                     <ul class="info_detail" isload="no" act_id="267">
1630                     </ul>
1631                 </div>
1632                 <a href="activity/267/edit/page" class="p4">编辑</a> <a href="activity/267/setting/page"
1633                     class="p4">设置</a> <a href="activity/267/messlog/page" class="p4">短信日志</a> <a href="activity/267/demo"
1634                         class="p4" target="_blank">页面</a>
1635             </td>
1636         </tr>
1637         <tr class="alt-row">
1638             <td class=" activity_end  ">
1639                 266
1640             </td>
1641             <td class=" activity_end  ">
1642                 结婚采购第二季--维也纳
1643             </td>
1644             <td>
1645                 是(type1)
1646             </td>
1647             <td>
1648                 <a href="http://cd.qq.com/zt2013/D2JJHCGJ/index.htm" title="http://cd.qq.com/zt2013/D2JJHCGJ/index.htm"
1649                     target="_black">查看</a>
1650             </td>
1651             <td>
1652                 <span class="start_time" time="1361152081" title="2013-02-18 09:48:01"></span>
1653             </td>
1654             <td>
1655                 <span class="end_time" time="1362585301" title="2013-03-06 23:55:01"></span>
1656             </td>
1657             <td>
1658                 <div class="show_info">
1659                     <div>
1660                         <a href="activity/266/user/list" class="p4">用户</a>
1661                     </div>
1662                     <ul class="info_detail" isload="no" act_id="266">
1663                     </ul>
1664                 </div>
1665                 <a href="activity/266/edit/page" class="p4">编辑</a> <a href="activity/266/setting/page"
1666                     class="p4">设置</a> <a href="activity/266/messlog/page" class="p4">短信日志</a> <a href="activity/266/demo"
1667                         class="p4" target="_blank">页面</a>
1668             </td>
1669         </tr>
1670         <tr class="">
1671             <td class=" activity_end  ">
1672                 265
1673             </td>
1674             <td class=" activity_end  ">
1675                 结婚采购第二季--艾薇
1676             </td>
1677             <td>
1678                 是(type1)
1679             </td>
1680             <td>
1681                 <a href="http://cd.qq.com/zt2013/D2JJHCGJ/index.htm" title="http://cd.qq.com/zt2013/D2JJHCGJ/index.htm"
1682                     target="_black">查看</a>
1683             </td>
1684             <td>
1685                 <span class="start_time" time="1361151956" title="2013-02-18 09:45:56"></span>
1686             </td>
1687             <td>
1688                 <span class="end_time" time="1362585356" title="2013-03-06 23:55:56"></span>
1689             </td>
1690             <td>
1691                 <div class="show_info">
1692                     <div>
1693                         <a href="activity/265/user/list" class="p4">用户</a>
1694                     </div>
1695                     <ul class="info_detail" isload="no" act_id="265">
1696                     </ul>
1697                 </div>
1698                 <a href="activity/265/edit/page" class="p4">编辑</a> <a href="activity/265/setting/page"
1699                     class="p4">设置</a> <a href="activity/265/messlog/page" class="p4">短信日志</a> <a href="activity/265/demo"
1700                         class="p4" target="_blank">页面</a>
1701             </td>
1702         </tr>
1703         <tr class="alt-row">
1704             <td class=" activity_end  ">
1705                 264
1706             </td>
1707             <td class=" activity_end  ">
1708                 结婚采购第二季--影匠
1709             </td>
1710             <td>
1711                 是(type1)
1712             </td>
1713             <td>
1714                 <a href="http://cd.qq.com/zt2013/D2JJHCGJ/index.htm" title="http://cd.qq.com/zt2013/D2JJHCGJ/index.htm"
1715                     target="_black">查看</a>
1716             </td>
1717             <td>
1718                 <span class="start_time" time="1361151839" title="2013-02-18 09:43:59"></span>
1719             </td>
1720             <td>
1721                 <span class="end_time" time="1362585359" title="2013-03-06 23:55:59"></span>
1722             </td>
1723             <td>
1724                 <div class="show_info">
1725                     <div>
1726                         <a href="activity/264/user/list" class="p4">用户</a>
1727                     </div>
1728                     <ul class="info_detail" isload="no" act_id="264">
1729                     </ul>
1730                 </div>
1731                 <a href="activity/264/edit/page" class="p4">编辑</a> <a href="activity/264/setting/page"
1732                     class="p4">设置</a> <a href="activity/264/messlog/page" class="p4">短信日志</a> <a href="activity/264/demo"
1733                         class="p4" target="_blank">页面</a>
1734             </td>
1735         </tr>
1736     </table>
1737 </body>
1738 </html>

2 完整插件代码:

View Code
  1 /// <reference path="http://www.cnblogs.com/jquery-1.7.1.min.js" />
  2 
  3 var DropList = function (opts) {
  4     if (!opts.id) {
  5         alert('请指定触发展开事件的元素id');
  6         return false;
  7     }
  8     //触发展开元素id
  9     this.toggleId = opts.id;
 10     this.toggleEl = opts.id ? $('#' + opts.id) : $('body');
 11     this.key = opts.id ? opts.id + '_list' : new Date().getTime();
 12     this.open = opts.open || 'click'; //展开菜单方式 mousein
 13     this.close = opts.close || 'click'; //关闭菜单方式 mouseleave
 14 
 15     //this.initShow = false; //判断是否初始化出现菜单绑定事件
 16 
 17     /*下拉菜单数据,可能出现多级菜单数据格式:
 18     [['v', 'k', []], ['v', {}, []], 
 19     ['v', 'k', [['v', 'k', []], ['v', 'k', []]]
 20     ]
 21     */
 22     this.dropItems = opts.dropItems || null;
 23     this.loadData = opts.loadData; //用于异步加载下拉菜单数据//具有层级关系
 24     this.listEl = null;
 25     this.func = opts.func || null; //点击时的事件处理
 26     this.asyncDataLoad = opts.asyncDataLoad; //用于异步数据加载
 27 
 28     //同步方式加载
 29     if (this.dropItems) {
 30         this.initDropItems();
 31         this.eventBind();
 32     } else {
 33         if (this.asyncDataLoad && typeof this.asyncDataLoad == 'function') {
 34             var scope = this;
 35             scope.toggleEl.mousemove(function () {
 36                 var el = $(this);
 37                 scope.toggleEl.unbind('mousemove');
 38                 var o = scope.asyncDataLoad.call(scope, el);
 39                 //此处需要做严格格式检查
 40                 var url = o.url;
 41                 var p = o.param;
 42                 var getDropItem = o.getDropItem;
 43 
 44                 $.get(url, p, function (data) {
 45                     scope.dropItems = getDropItem(data);
 46                     scope.initDropItems();
 47                     scope.eventBind();
 48                     if(scope.open != 'click')
 49                         scope.toggleEl.mouseenter();
 50                 });
 51                 var s = '';
 52             });
 53         }
 54     }
 55 };
 56 
 57 DropList.prototype.closeList = {};
 58 
 59 DropList.prototype.dropItemLoad = function (data, el) {
 60     for (var i in data) {
 61         var item = data[i];
 62         var tmp = $('<li></li>');
 63         el.append(tmp); //标签已装载
 64         if (item[0]) {
 65             tmp.html(item[0]);
 66         }
 67         if (item[1] || typeof item[1] == 'number') {
 68             if (typeof item[1] == 'string' || typeof item[1] == 'number') {
 69                 tmp.attr('id', item[1]);
 70             } else {
 71                 for (_k in item[1]) {
 72                     tmp.attr(_k, item[1][_k]);
 73                 }
 74             }
 75         }
 76         if (item[2] && item[2]['length']) {//此处需要递归
 77             var child = $('<ul></ul>')
 78             tmp.append(child);
 79             tmp.addClass('parent_drop_list');
 80             this.dropItemLoad(item[2], child);
 81         }
 82     }
 83 };
 84 
 85 //['v', 'k', []]
 86 DropList.prototype.initDropItems = function () {
 87     var scope = this;
 88     var dropItems = scope.dropItems;
 89     var listEl = $('<ul class="drop_list_items" id="' + scope.key + '"></ul>');
 90     $('body').append(listEl);
 91     scope.dropItemLoad(dropItems, listEl);
 92     scope.listEl = listEl;
 93 };
 94 
 95 DropList.prototype.closeList = function () {
 96     var listEl = this.listEl;
 97     listEl.find('li').removeClass('cur_active');
 98     listEl.find('ul').hide();
 99     listEl.hide();
100 };
101 
102 DropList.prototype.eventBind = function () {
103     var scope = this;
104     var listEl = scope.listEl;
105     var toggleEl = scope.toggleEl;
106     var open = scope.open;
107     var close = scope.close;
108     var func = scope.func;
109 
110     var obj_len = function (o) {
111         var len = 0;
112         for (var k in o) {
113             len++;
114         }
115         return len;
116     };
117 
118     var func_cls = function () {
119         if (close == 'click') {
120             $(document).click(function (e) {
121                 var el = $(e.target);
122                 var is_el = false;
123                 //判断父元素是否为
124                 while (el.attr('id') != scope.key) {
125                     if (el.is("ul") || el.is('li')) {
126                         is_el = true;
127                         el = el.parent();
128                     } else {
129                         break;
130                     }
131                 }
132                 if (el.attr('id') == scope.toggleId) {
133                     is_el = true;
134                 }
135                 if (!is_el) {
136                     scope.closeList();
137                     if (scope.closeList[scope.toggleId])
138                         delete scope.closeList[scope.toggleId];
139                     if (obj_len(scope.closeList) == 0)
140                         $(document).unbind('click');
141                     var s = '';
142                 }
143             });
144         } else {
145             var toggleOut = null;
146             var m_out = function () {
147                 scope.closeList();
148                 if (scope.closeList[scope.toggleId])
149                     delete scope.closeList[scope.toggleId];
150                 toggleEl.unbind('mouseleave');
151                 listEl.unbind('mouseleave');
152             };
153             toggleEl.mouseleave(function (e) {
154                 toggleOut = setTimeout(function () {
155                     m_out();
156                 }, 500);
157             });
158             listEl.unbind('mouseenter').mouseenter(function () {
159                 if (toggleOut)
160                     clearTimeout(toggleOut);
161                 listEl.mouseleave(function (e) {
162                     m_out();
163                 });
164             });
165         }
166     };
167 
168     //确认弹出层位置
169     var func_init_pos = function (el) {
170         var offset = el.offset();
171         var h = parseInt(el.height());
172         var p_top = parseInt(el.css('padding-top'));
173         var p_bottom = parseInt(el.css('padding-bottom'));
174         var _top = parseInt(offset.top) + h + p_top + p_bottom;
175         var w_h = $(window).height() || $(document).height(); //当前窗口高度
176         var el_h = listEl.height() + parseInt(listEl.css('padding-top')) + parseInt(listEl.css('padding-bottom')); //当前浮动层高度
177         var s_t = parseInt($(document).scrollTop()); //滚动条高度
178 
179         //若是当前top + 层高度 > 窗口高度的话,便予以特殊处理
180         if (el_h + _top > w_h + s_t) {
181             listEl.css('top', (_top - el_h - h) + 'px');
182         } else {
183             listEl.css('top', (_top) + 'px');
184         }
185 
186         listEl.css('min-width', (parseInt(el.css('width')) + parseInt(el.css('padding-left')) + parseInt(el.css('padding-right')) - 6) + 'px')
187         listEl.css('left', parseInt(offset.left) + 'px');
188     };
189 
190     var show_drop_list = function (el) {
191         var drop_list_items = $('.drop_list_items');
192         func_init_pos(el);
193         drop_list_items.removeClass('z800');
194         listEl.addClass('z800');
195         listEl.show();
196         func_cls();
197     };
198 
199     if (open == 'click') {
200         toggleEl.unbind('click').click(function (e) {
201             var el = $(this);
202             show_drop_list(el);
203             scope.closeList[scope.toggleId] = 1;
204             //e.stopPropagation(); //阻止冒泡
205         });
206     } else {
207         toggleEl.unbind('mouseenter').mouseenter(function (e) {
208             var el = $(this);
209             show_drop_list(el);
210             //e.stopPropagation(); //阻止冒泡
211         });
212     }
213 
214     listEl.delegate('li', 'mouseenter', function (e) {
215         var el = $(this);
216         listEl.find('li').removeClass('cur_active');
217         listEl.find('ul').hide();
218         el.addClass('cur_active');
219         el.children().show();
220 
221         el = el.parent();
222         while (el.attr('id') != scope.key) {
223             if (el.is("li")) {
224                 el.addClass('cur_active');
225             }
226             if (el.is('ul')) {
227                 el.show();
228             }
229             el = el.parent();
230         }
231         e.stopPropagation();
232     });
233 
234     if (func && typeof func == 'function') {
235         listEl.delegate('li', 'click', function (e) {
236             func.call(this, e, scope, listEl, toggleEl);
237             e.stopPropagation(); //不阻止冒泡在每个节点都将执行事件
238         });
239     }
240 };
241 
242 
243 function initNewDrop(opts) {
244     if (opts.klass) {
245         $('.' + opts.klass).each(function (k, v) {
246             var el = $(this);
247             var id = new Date().getTime() + '_' + k;
248             if (el.attr('id')) {
249                 id = el.attr('id');
250             } else {
251                 el.attr('id', id);
252             }
253             opts.id = id;
254             new DropList(opts);
255         });
256     } else {
257         new DropList(opts);
258     }
259 }

前端关键代码:

 1 asyncDataLoad: function (el) {
 2                     //el为鼠标滑动元素
 3                     var asyncObj = {};
 4                     asyncObj.url = 'Handler.ashx';
 5                     asyncObj.param = { 'act_id': el.find('ul').attr('act_id') };
 6                     asyncObj.getDropItem = function (data) {
 7                         //data为异步请求获取后的数据
 8                         if (data && typeof data == 'string') {
 9                             data = eval('(' + data + ')');
10                         }
11                         data = data.data;
12                         var type = data.notice;
13                         if (type == 0) {
14                             msg = '不发送短信';
15                         } else if (type == 1) {
16                             msg = '自动短信';
17                         } else if (type == 3) {
18                             msg = '手动短信';
19                         }
20                         var param = [
21                             ['活动id:' + data.act_id],
22                             ['报名人数:' + data.reg_num],
23                             ['短信类型:' + msg],
24                             ['<a href="#">自动短信条数:' + data.sms_auto_count + '</a>'],
25                             ['<a href="http://www.baidu.com/" target="_blank">手动短信条数:' + data.sms_manual_count]
26                         ];
27                         return param;
28                     };
29                     return asyncObj;
30                 },

这里通过该函数(先定义好),可操作鼠标滑过的元素他需要完成以下事情:

1 给出异步数据拉取url

2 给出需要的参数

3 给出数据拉取成功后调用的函数,该函数需要返回dropitem 二维数组格式,以生成下拉菜单;

插件关键代码:

 1 //同步方式加载
 2     if (this.dropItems) {
 3         this.initDropItems();
 4         this.eventBind();
 5     } else {
 6         if (this.asyncDataLoad && typeof this.asyncDataLoad == 'function') {
 7             var scope = this;
 8             scope.toggleEl.mousemove(function () {
 9                 var el = $(this);
10                 scope.toggleEl.unbind('mousemove');
11                 var o = scope.asyncDataLoad.call(scope, el);
12                 //此处需要做严格格式检查
13                 var url = o.url;
14                 var p = o.param;
15                 var getDropItem = o.getDropItem;
16 
17                 $.get(url, p, function (data) {
18                     scope.dropItems = getDropItem(data);
19                     scope.initDropItems();
20                     scope.eventBind();
21                     if(scope.open != 'click')
22                         scope.toggleEl.mouseenter();
23                 });
24                 var s = '';
25             });
26         }
27     }

注意17、8行,当数据获取成功后给我们的dropItem是赋值,然后继续原流程

后记


这次暂时如此吧,老大一会又在后面走一下,我心里害怕。。。。。。

原文地址:https://www.cnblogs.com/yexiaochai/p/2993806.html