做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
- 浏览 1464
- 评论(2)
- 论坛回复 / 浏览 (2 / 2450)
- 查看更多
相关推荐
- **动态移除表单**:使用`form.remove()`或`element.parentNode.removeChild(form)`可以移除表单,这在某些情况下可能需要取消表单提交。 - **异步加载JS**:在某些场景下,可能需要根据用户操作异步加载JS文件,...
element = driver.find_element_by_class_name("element_class") ``` ##### 2.2.4 find_element_by_tag_name() 通过HTML标签名定位元素: ```python element = driver.find_element_by_tag_name("input") ``` ###...
2. **选择器**:jQuery的选择器语法基于CSS,如`$("#id")`选择ID为id的元素,`$(".class")`选择所有类名为class的元素,`$("tag")`选择所有tag标签。此外,还有`:first`, `:last`, `:even`, `:odd`, `:eq(index)`, `...
本文将详细介绍如何在Vue中利用Element UI实现上传功能,主要涉及两种思路:`before-upload`和`auto-upload`。 1. **使用`before-upload`进行预处理** `before-upload`是Element UI上传组件的一个属性,它接受一个...
在Vue.js开发中,Element UI 是一款非常流行的前端UI库,...在实际开发中,还可以结合axios等HTTP库进行更复杂的请求处理,以及利用Element UI提供的其他功能,如自定义上传列表样式、上传失败重试等,来提升用户体验。
常见的有`find_element_by_id`、`find_element_by_name`、`find_element_by_class_name`等。 - **示例代码(通过ID定位元素):** ```python element = driver.find_element_by_id('example_id') ``` #### 定位...
我们可以使用标签来创建上传区域,并通过设置auto-upload属性为false来控制上传行为。同时,为标签添加on-change事件监听器,当文件状态改变时触发changeUpload方法。 ```html class="upload-demo" action="#...
<form class="cmxform" id="commentForm" method="get" action=""> Name:<input id="cname" name="name" size="25" class="required" minlength="2"/> Email:<input id="cemail" name="email" size="25" class=...
这通常通过创建一个可以单独调用的Action,然后使用AJAX请求来触发该Action的执行,Action处理业务逻辑后返回JSON或XML数据,前端JavaScript代码接收到这些数据后更新DOM元素。 首先,我们需要在Struts2配置文件...
总结起来,在Vue.js中使用Element UI组件时,如果需要在事件处理函数中传递额外参数,可以利用箭头函数来保持上下文,并将自定义参数与默认参数一起传入。这使得我们的代码更具灵活性,能够更好地满足业务需求。在...
Element UI 是一套基于 Vue.js 的开源前端组件库,它提供了丰富的 UI 组件,用于构建美观且功能完善的 Web 应用。在 Element UI 中,`<el-upload>` 是一个用于文件上传的组件,它允许用户从本地选取文件并上传到...
- `$(“.class”)`:选择所有类名为指定值的元素。 - `$(“element”)`:选择所有标签名为指定值的元素。 - `$(“selector1, selector2, …, selectorN”)`:选择多个选择器所匹配的元素。 - **层级选择器**: -...
Element UI 是一套基于 Vue 2.0 的桌面端组件库,提供了一套美观、易用的组件,使得开发者能够快速构建出高质量的页面。其中,“el-upload”是Element UI 提供的一个上传组件,能够让用户方便地上传文件到服务器。 ...
如:`$("#id")` 选取ID为id的元素,`$(".class")` 选取所有class为class的元素,`$("tagname")` 选取所有特定标签名的元素。 2. **DOM操作**: jQuery 提供了简洁的API来操作DOM元素,如`append()`用于在元素内部...
在Vue项目中,Element-UI库提供了一个名为`Upload`的组件,用于实现文件上传功能。这个组件在很多场景下非常实用,例如用户需要上传图片、文档等文件时。下面我们将详细探讨如何在Vue项目中使用`Upload`组件,以及在...
它利用了Adobe Flash Player插件,隐藏了复杂的文件选择和上传过程,提供了一种直观且用户友好的体验。用户可以选择多个文件,并在后台一次性上传,无需等待每个文件上传完成。SwfUpload支持进度条显示,使用户能...
总的来说,要解决Element-UI的`el-upload`组件在`before-upload`返回`false`时`submit()`无效的问题,可以利用组件的内部API手动触发上传或移除文件。确保在`before-upload`中执行自定义验证,并根据用户交互调用...