前言
接上次的话题，仍然是团队近期将会有大变化，最近确实有点蛋疼，对以后的规划神马的乱成一团，晚上也不想学习神马的了，有时候就什么都不做发现一晚上就莫名其妙的过去了......
但是上班时候不行，没事必须找点事情来做，反正现在做的东西多少有点......，所以闲暇中提炼了**过程中觉得有意义的东西。
上一版本
上周这个东东就基本完成了，反正也是菜鸟水平的东西，献丑什么的也没时间怕了，这次就上次留下的几个问题做了简单处理，形成了今天的东西，若是再优化的话应该是性能上的东西了吧。
① 菜单在窗口最下方拉长窗口问题:
解决后：
② 关于异步数据加载的问题：
比如一个表格数据，每次鼠标移动上去才加载数据，生成菜单；我们知道一旦涉及异步操作往往破坏原有程序逻辑，这块处理上我还没有好的方法。
③ 为类添加方法
最后我发现使用时候不能每次都指定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，如需转载请自行联系原作者
