JQuery最佳实践之精妙的自定义事件

恰好偶最近负责的一个可视化编辑器的开发，其中有些地方便应用了JQuery的自定义事件，而且达到了很好的效果-精简代码的同时充分利用了OO的原则。

本文以我实际应用开发过程中遇到的一个例子进一步说明“什么时候用JQuery的自定义事件以及怎么用”，希望可以抛砖引玉，同时权且当是回复同学们的邮件了。

Demo-Ingenious JQuery custom event
JQuery最佳实践-精妙的自定义事件
问题：一个复选框X，你如何便捷地触发它的click事件的处理逻辑，但是又不改变它当前的选中状态？

答案:用自定义事件处理函数封装复选框click事件的处理逻辑！然后触发该自定义事件。

以下应用场景你曾经遇到过么？
需求：某个容器A，用户可以设置它的4条边框的有无以及边框色？“边框的有无”和“颜色的变化”需要联动，
就是说改变边框的时候获取当前设定的颜色，改变颜色的时候获取当前设定的边框，并及时反映到容器A上。

注：本例子边框颜色统一设置,分别设置的例子大家可以去写下～
核心代码:


代码如下:

<div id="demo">
<div class="acts">
<label for="txtCpk"></label>边框设置：<input type="text" size="10" id="txtCpk" name="color"/>
<input type="checkbox" name="bd" value="top"/><span>上</span>
<input type="checkbox" name="bd" value="right"/><span>右</span>
<input type="checkbox" name="bd" value="bottom"/><span>下</span>
<input type="checkbox" name="bd" value="left"/><span>左</span>
</div>
<textarea id="A" cols="100" rows="29"></textarea>
</div>

</body>
<script id="js" type="text/javascript">
//<![CDATA[
//目标容器A
var $a=$("#A");
//拾色器
var $txtColor=$("#txtCpk").ColorPicker({
onChange:function(hsb,hex,rgb){
$txtColor.val("#"+hex).css("backgroundColor","#"+hex);
//联动边框-触发自定义事件"evtClick"，避免改变复选框的状态
//这里可不能直接用$bd.trigger("click")噢;
//$bd.trigger("click");
$bd.trigger("evtClick");
}
});
//边框及自定义事件的应用
var $bd=$("#demo input[type='checkbox']").bind("evtClick",function(evt){
var c=this.checked?"2px solid "+$txtColor.val():"none";
$a.css("border-"+this.value,c);
}).click(function(evt){
$(this).trigger("evtClick");
});

//show the js
$(document).ready(function(){
$a.val($("#js").html());
});

//]]>
</script>

在线演示

赞 (0)

相关推荐

  • Jquery 自定义事件实现发布/订阅的简单实例

    Jquery 自定义事件实现发布/订阅的简单实例 //用户点击logoff按钮时,广播一个自定义事件,给任何需要保存状态的感兴趣的观察者,然后导航到logoff页面 $('#logoff').click(function(){ $.event.trigger("logoff");//广播一个事件 window.location = "logoff.php";//导航到新页面 }); 以上这篇Jquery 自定义事件实现发布/订阅的简单实例就是小编分享给大家的全部内容

  • jQuery自定义事件的简单实现代码

    一.需求原因虽然JQuery为我们定义了许多的事件,但是有时候还是不能满足我们的要求,故本例实现一个自定义事件实现的例子. 二.具体实现 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv=&quo

  • jQuery实现获取绑定自定义事件元素的方法

    本文实例讲述了jQuery实现获取绑定自定义事件元素的方法.分享给大家供大家参考,具体如下: (function ($) { // 自定义itemtab事件 $.fn.bind = function(types, data, fn) { // 重载jQuery.fn.bind方法,用来截获绑定自定义事件的元素 if(typeof types == 'string' && 'itemtab' == types) { var itemTouchStart = -1; // touchstart

  • jQuery绑定自定义事件的魔法升级版

    jQuery绑定自定义事件 首先让我们来看看jQuery绑定自定义事件的使用方法,你可以使用bind或者live来订阅一个事件(当然1.7以后也可以使用on了),代码如下: $("#myElement").bind('customEventName',function(e){ ... }); $(".elementsClass").live('customEventName',function(e){ ... }); 然后通过如下方式来触发事件: $("#

  • JQuery的自定义事件代码,触发,绑定简单实例

    自定义事件触发 复制代码 代码如下: $ event.trigger("myEventName"); 自定义事件绑定 下面的代码创建了一个绑定到自定义事件和自定义事件触发时将被执行. 复制代码 代码如下: $(this).bind("myEventName",function(){ alert("myEventName triggered"); });

  • JQuery自定义事件的应用 JQuery最佳实践

    知识要点: 1,自定义事件custom events及事件的订阅 2,trigger.bind.unbind方法的使用 3,带命名空间的自定义事件 将下面内容粘贴至txt文档后再直接粘贴至firebug的控制台,运行看看. 复制代码 代码如下: /* JQuery自定义事件的应用-Javascript OO 有一帅哥叫Levin,在某公司前端设计部工作,他的主管是大帅哥A,经理是大美眉B. 领导们希望可以抽空瞄瞄这家伙每周的工作情况,于是... Levin每周一要用google doc写一份关于

  • jQuery实现自定义事件的方法

    本文实例讲述了jQuery实现自定义事件的方法.分享给大家供大家参考.具体分析如下: jQuery是一个非常强大的工具.jQuery非常有用的功能之一是可以实现事件绑定.你可以实现创建,绑定事件,可触发自己定义的jQuery事件. 自定义事件触发 下面的代码是它自定义事件触发.你可以绑定到这个自定义事件. $event.trigger("myEventName"); 自定义事件绑定 下面的代码创建了一个绑定到自定义事件和自定义事件触发时将被执行. $(this).bind("

  • JQuery最佳实践之精妙的自定义事件

    恰好偶最近负责的一个可视化编辑器的开发,其中有些地方便应用了JQuery的自定义事件,而且达到了很好的效果-精简代码的同时充分利用了OO的原则. 本文以我实际应用开发过程中遇到的一个例子进一步说明"什么时候用JQuery的自定义事件以及怎么用",希望可以抛砖引玉,同时权且当是回复同学们的邮件了. Demo-Ingenious JQuery custom event JQuery最佳实践-精妙的自定义事件 问题:一个复选框X,你如何便捷地触发它的click事件的处理逻辑,但是又不改变它当

  • jQuery最佳实践完整篇

    jQuery最佳实践完整篇

    上周,我整理了<jQuery设计思想>. 那篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery".今天的文章则是更进一步,讲解"如何用好jQuery". 我主要参考了Addy Osmani的PPT<提高jQuery性能的诀窍>(jQuery Proven Performance Tips And Tricks).他是jQuery开发团队的成员,具有一定的权威性,提出的结论都有测试数据支持,非常有价值. ============

  • 7个jQuery最佳实践

    7个jQuery最佳实践

    随着富网络应用(rich web applications)数量的增长,以及用户对快速交互响应的高期望,开发者开始使用JavaScript库来快速高效的完成一些重复性的工作.这其中最流行的JavaScript库就是jQuery.但是jQuery的大量应用却带来了另外一个问题:在使用JavaScript库的时候,有哪些最佳实践,又有哪些不好的实践呢? 背景 在这篇文章中,我会给大家介绍在编写.调试和审查JavaScript代码的时候一些好的实践(至少我是这么认为的).事实上,我选择了其中7个最常见

  • jQuery Datatable 多个查询条件自定义提交事件(推荐)

    先写2个input 分别表示开始时间跟结束时间 在写一个button 点击按钮 让表格重新刷新 代码如下 如下所示在datatable设置项增加如下设置  如果已经有了  只需要添加如下的data选项 ajax: { url: '/admin/index', type: 'POST', "data": function ( d ) { //添加额外的参数传给服务器 d.beginDate = $("#datetimepicker1").val(); d.endDat

随机推荐