zoukankan      html  css  js  c++  java
  • 基于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是赋值,然后继续原流程

    后记


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

  • 相关阅读:
    解决This application failed to start because it could not find or load the Qt platform plugin "windows
    计算几何-凸包-toleft test
    Bit Operation妙解算法题
    带线表格据gt生成无线表格
    caffe的python接口提取resnet101某层特征
    camelot工具进行pdf表格解析重建
    python批量爬取文档
    IP被封检测地址
    驱动人生后门清除方案
    应用安全
  • 原文地址:https://www.cnblogs.com/yexiaochai/p/2993806.html
Copyright © 2011-2022 走看看