做Web应用,页面上的元素(Element),常常要进行一些特殊的处理,
比如增加特效,处理innerHTML等等。
举个例子:
jQuery有一个插件lavaLamp
,可以做出漂亮的菜单。
使用的时候,除了写好css,设置好style,就是调用:
$(elm).lavaLamp(options);
/*elm是对应的元素,具体写法可以用#ID等jQuery选择器,options就是参数了参加lavaLamp的说明*/
对于这个需求,这个用法是无可非议的。
但是向这样要先筛选元素然后再进行不同除了的需求,在某些应用中可能有大量的需求。
如果一个个的写选择器,为元素设置特殊的ID或属性是很麻烦的。
我这里有一个简单的方法来处理这个问题(此方法我已经用了2年了,非常安逸),就是通过设置源文件相关元素(html 标签)的class属性来解决此类问题。类似上面的需求html代码如下:
<ul class="lavaLampBottomStyle abc abc.lavaLamp({fx:'easeOutBack',speed:700})">
<li><a>测试</a></li>
<li><a>测试</a></li>
</ul>
这是lavaLamp的最简单形式,lavaLampBottomStyle用来设置菜单的样式。
abc abc.lavaLamp({fx:'easeOutBack',speed:700})
就是用了触发生效lavaLamp效果的设置。
可能你已经明白了,里面的abc是用来声明一个特殊的标记。表示这个class中有Action By Class的方法。而abc.lavaLamp({fx:'easeOutBack',speed:700})就是激活lavaLamp的语法。
这个语法要生效我写了个jQuery扩展Action By Class------abc:
$.extend($.fn, {
abc: function(prefix) {
prefix=(prefix ||'abc')+'.';
//for (var i=this.length - 1;i>=0;i--) {//这个有讲究,后面再说,次序问题
for (var i=0 ;i<this.length;i++) {
var cna = this[i ].className.split(/\s+/);
var self=this[i];//预留eval做接口
var selfjQ = $(this[i]);//预留eval做接口的jQuery对象
for (var j=0; j<cna.length; j++) {
if (prefix!=cna[j].slice(0,prefix.length) || cna[j].indexOf('(')<1 || cna[j].slice(cna[j].length-1)!=')') continue;
var fn=cna[j].slice(0,cna[j].indexOf('('));
var option=cna[j].slice(fn.length+1,cna[j].length-1);
option=option.replace(/&/g,' ')||undefined;
fn = fn+'(this[i],'+option+')';
//selfjQ.removeClass(cna[j]);
//try {
//alert(('$.'+fn));
window.eval(('$.'+fn));
//catch (ex){alert('abc error:'+fn)};
}
}
this.removeClass(prefix.slice(0,-1));
}
});
$.abc = {};
$.extend($.abc, {
lavaLamp:function(elm,options){
$(elm).lavaLamp(options);
}
);
注意:代码是直接从我的扩展中帖出来的,有写东西是为了调试用的,有些东西是我试验用的。读者只需要明白原理,可以自己写一个。
这个扩展很简单就是:
$('.abc').abc()
对应abc的代码你可以看到,$('.abc')或的了具有abc class的Elements。abc分析class name 中以“abc.”(当然也可以用prefix定义其他的,用来区分次序)打头的class,其实也就是Action命令了。调用相关的$.abc.xxxx
通过这个方法,无需费心定义大量不同的ID了(这个很烦的),调用也一句就触发了。
思考:
1.其实经过2年的使用我觉得实际当中这个方法可以优化的,不过用的是契约式编程,不一定能被大家普遍接受,就不提了。
2.关于前面说的问题,其实是在复杂的应用当中action触发的次序是有要求的,开始的时候我是用递增或递减循环来解决的,后来就改用设置prefix来触发了,比如:
abc abc.lavaLamp({fx:'easeOutBack',speed:700});//如果和其他的abc配合有次序的要求的话,可以写
abc2 abc2.lavaLamp({fx:'easeOutBack',speed:700});
调用次序写两个就行了:
$('.abc').abc();
$('.abc2').abc('abc2');
分享到:
- 2008-07-06 15:49
- 浏览 1410
- 评论(2)
- 论坛回复 / 浏览 (2 / 2404)
- 查看更多
相关推荐
Login_action.class
ACTION语言组建参考。和大家分享 贝塞尔曲线的第一个点。 a — Property in class flash.geom.Matrix Matrix 对象的第一行第一列中的值,它影响在缩放或旋转图像时沿 x 轴的像素定位。 abs(val:Number) — ...
action in redux applyMiddleware | 在调用链中触发action
看懂App加载Class的顺序和Method的顺序.zip,用于在使用应用程序时打印其结构
:rocket: 触发Jenkins Job进行GitHub操作 用于触发作业。 用法 触发新詹金斯工作。 name : trigger jenkins job on : [push] jobs : build : name : Build runs-on : ubuntu-latest steps : - name : trigger...
dispatch-action 创建存储库调度事件以从另一个工作流程中触发Github工作流程 :rocket: 用法 要使用此操作,您需要在.github/workflows目录下的存储库中创建Github工作流文件。 您还必须创建一个Github ,该应作为...
AccountAction.class.phpAccountAction.class.phpAccountAction.class.php
element-ui中el-upload多文件一次性上传的实现 项目需求是多个文件上传,在一次请求中完成,而ElementUI的上传组件是每个文件发一次上传请求,因此我们借助FormData的格式向后台传文件组 html代码 <div class=...
兰斯 ytc price action裸k价格行为交易常见问题解说
Action Scope 产品演示 • 揭示未知攻击载荷、获取每一步执行动作、 模块调用、漏洞利用等… • 轻量级,便携,易扩展 Action Scope功能、用法 • 一一讲解各个组件 • 不同于vt,cuckoo的黑箱&可衔接研发和逆向
deploy-action:触发github部署的github动作
动作触发在设定的时间后跨多个页面触发Cookie和用户反馈。... 如果用户已登录或之前已关闭提示,则提示不能显示。 ##解决方案对我来说,技巧是保持计时器运行... action_click_element-触发操作的UI元素。 action_click_ev
利用Action和Func来简化事件的注册过程!!!!!!!!
Action Recognition Dataset行为识别数据集.zip
react+flux in action - by jeremy
webdriver下 如何模拟右键菜单操作?...action.contextClick(driver.findElement(By.xpath("//div/li/div/a/span"))).perform(); PS: .perform()要记得。 尝试用selenium2.0整合的webdirver.用element.sendKeys方法
用法Vuex模块可以使用装饰器作为一个类来编写:// user-module.ts import“ Vuex-class-modules”中的{VuexModule,Module,Mutation,Action}; @Module类UserModule扩展了VuexModule {// state firstName =
Spring in Action CN.001<br>Spring in Action CN.002<br>Spring in Action CN.003<br>Spring in Action CN.004<br>Spring in Action CN.005<br>Spring in Action CN.006<br>Spring in Action ... <br>本书信息:...
Struts In Action by fx2002.rar
分析网络用户的行为,根据敏感词、高频词、发现网络用户的违规行为、跟踪用户行为