基于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
2 完整插件代码:

View Code
前端关键代码:

复制代码
 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是赋值,然后继续原流程

后记

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

您可以考虑给小钗发个小额微信红包以资鼓励 



本文转自叶小钗博客园博客,原文链接http://www.cnblogs.com/yexiaochai/archive/2013/04/01/2993806.html,如需转载请自行联系原作者


相关文章
|
5月前
|
JavaScript
jQuery 下拉菜单案例(透明+children+this)
jQuery 下拉菜单案例(透明+children+this)
38 0
|
5月前
|
JavaScript
jQuery 下拉菜单 添加动画
jQuery 下拉菜单 添加动画
50 0
|
10月前
|
JavaScript 前端开发
jQuery练习——下拉菜单
当我们在做导航栏、少量数据表格、层级列表时,使用无序列表ul、li可以实现想要的效果。这里我们先用无序列表ul、li完成页面结构,为每一个元素添加a标签,即超链接。
97 0
|
JavaScript
jquery:简洁版滑动下拉菜单-21
jquery:简洁版滑动下拉菜单-21
78 0
jquery:简洁版滑动下拉菜单-21
|
JavaScript
jquery简洁版滑动下拉菜单问题解决-22
jquery简洁版滑动下拉菜单问题解决-22
76 0
jquery简洁版滑动下拉菜单问题解决-22
|
JavaScript
使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
367 0
使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
|
JavaScript
js_jQuery【下拉菜单联动dom操作】
js_jQuery【下拉菜单联动dom操作】
95 0
js_jQuery【下拉菜单联动dom操作】
|
JavaScript
jQuery下拉菜单经典案例
jQuery下拉菜单经典案例
89 0
jQuery下拉菜单经典案例
|
JavaScript
jQuery水平滑动菜单
在线演示 本地下载
954 0
|
JavaScript
jQuery动画二级下拉菜单
在线演示 本地下载
978 0