标签归档:jQuery

ToFishes系列jQuery插件 – Dropdown下拉列表

之前有发过一套插件jcuteForm中包含一个下拉列表的实现,相比之前的作品,此次的实现更加简洁和优雅(自认的)。

而以前的jCuteForm的demo页因为使用的Google jscdn 引入的jQuery挂了已经不能正常在线查看,不过还是可以下载的。

而这次的提升还是很不错的,需要的请自行:查看DEMO

源码里面有个注释,去掉就可以实现一个页面多个dropdown的显示互斥(点一个下拉,则其他打开的下拉就恢复原状,源码内的注释没解释清楚,恐误解),因为莫名的想法我给注释掉了,需要的请自行取消。

jQuery的事件命名空间-Namespaced Events

命名空间简单易懂的说就是为了避免混淆,恰似人类的姓+名。专业解释请看 http://zh.wikipedia.org/wiki/命名空间

命名就是取名,比如两个人都叫做小明,空间就是区分命名的,比如一个小明姓王,一个小明姓张。王,张的姓就是空间,命名+空间(姓,名合体:王+小明,张+小明),你就不会混淆到底在说哪个小明。

jquery的事件命名空间,就是为了区分同一个jquery元素绑定的多个同名事件,使用方法就是: $.bind(“事件名.区分后缀”, function),$.trigger(“事件名.区分后缀”)。下面仅以unbind举例说明,trigger也是同样道理:

<script type="text/javascript">
$(function(){
    $("body").bind('click', function(){
        console.info('第一次单击绑定输出');
    });
    $("body").bind('click', function(){
        console.info('第二次单击绑定输出');
    });
    $("#unbind").click(function(){
        $('body').unbind('click');
        console.info('解除了body的所有单击事件');
    });
});
</script>

以上代码绑定了两次click事件,会同时执行。unbind(‘click’),就会解除全部的click事件。

如果我只想解除其中之一,而不是解除所有的单击事件,怎么办?答案就是使用命名空间。看以下代码:

<script type="text/javascript">
$(function(){
    $("body").bind('click.one', function(){
        console.info('第一次单击绑定输出');
    });
    $("body").bind('click.two', function(){
        console.info('第二次单击绑定输出');
    });
    $("#unbind").click(function(){
        $('body').unbind('click.one');
        console.info('只解除body的第一次单击事件');
    });
    $("#unbind-all").click(function(){
        $('body').unbind('click');
        console.info('解除了body的全部单击事件,包括有命名空间的单击事件');
    });
});
</script>

当解除click.one时候,click.two事件就被保留了下来。但是unbind(‘click’)会解除所有(无论有没有命名空间)的单击事件。

简单的说: 杀死王小明,那么张小明会活下来。杀死小明,那么代表王小明和张小明都要被干掉。

所以,jquery的事件命名空间就是提供一种途径,让你恰当的对指定事件解除绑定(unbind)或触发(trigger),而不影响其他已绑定的“同名不同姓”的事件。

PS. 官方说明 http://docs.jquery.com/Namespaced_Events

在jquery1.2+就已经可以使用命名空间。在jquery1.3+以后,还可以这样绑定:

$('.class').bind('click.a.b', function(){});
$('.class').trigger('click.a');
$('.class').unbind('click.b');
//经测试 click.a.b === click.a === click.b 这样的命名空间有什么用?囧,貌似曾用名,现用名,但还是同一个人。

另外看看这样:

$("a").bind("click.one", function)
$("a").bind("mouseover.one", function)
$("a").unbind(".one"); //结果会怎样呢?

	

关于jquery方法closest()

最近发现jquery 1.4中文手册中对于closest()方法的context描述有误。

中文手册的描述:

closest(expr,[context] )

参数

expr (String, Array) : 用以过滤元素的表达式。jQuery 1.4开始,也可以传递一个字符串数组,用于查找多个元素。

context (可选) (Element, jQuery) : 作为待查找的 DOM 元素集、文档或 jQuery 对象。

其中描红的文字“jquery对象”,是错误的用法,官方文档没有说明可以是jquery对象(实际测试,也确实不可以是jquery对象)。

附上官方文档说明(官方仅指出是一个dom element):

.closest( selector, [ context ] )

selector       A string containing a selector expression to match elements against.

context        A DOM element within which a matching element may be found. If no context is passed in then the context of the jQuery set will be used instead.

PS. 另外发现一个特性:

<body>
    <ul>
        <li>
            <p id="test">test context for this</p>
        </li>
    </ul>
</body>

当使用$(“#text”).closest(‘li’, $(“#text”)[0])时,即context为元素本身,则会继续向上寻找,返回li,而不是空元素。

jQuery validation 与 tinyMCE编辑器的故事

项目使用了jQuery validation验证插件,但是与tinyMCE拍档时,就来问题了。

1、验证错误信息显示在编辑器上方了。

2、tinyMCE的值不能及时赋给绑定的输入框,非空验证第一次总是失败的。

自己开始时候想了几个解决方案,但是统统失败了,查两个各自的api,浩如烟海,不是那么容易找到自己需要的。

后来Google到官方作者的解决方案,恩,很好。

DEMO: http://jquery.bassistance.de/validate/demo/tinymce/

Continue reading jQuery validation 与 tinyMCE编辑器的故事

jQuery 1.4.3 form bug

这个版本,当Form中存在name=”id”时候, form对象成为[form#[object HTMLInputElement]](注:这个是input type=”hidden” name=”id”的情况), 而且form.find()下面的元素时候找不到了,你将find nothing。困惑了半天,去Google了一下“jquery id name=”id””, 发现官方有报这个bug了(原来早被人发现了。。。囧),
bug地址:http://bugs.jquery.com/ticket/7324

所以升级到1.4.4版本吧,这样就好了。

jQuery的API方法使用变量作为动态参数

jQuery很多方法是可以传入一个对象做参数的,例如 $.get(url, {name: “aa”}), $.animate({width:”300px”}, 300 );等等这些。

可是实际使用时候,直接把{}参数写入方法,则{}的key是固定的,不可以是变量。

举例,偶写个ajax提交的form,假设全是文本框的值,有如下文本框:

<form>
<input name="name1" value="" />
<input name="n2" value="" />
<input name="nam3" value="" />
.....

</form>

难道提交的时候,要这样写吗: $.ajax{url, {name1: value, n2: value, nam3: value …}}, 要知道,每个input的name属性不是固定的,如果有动态生成的input则更加糟糕。

解决:

var o = {}; //动态的参数o
var $i = $("input");
$i.each(function(){
    var name = $(this).attr("name");
    var value = $(this).val();
    o[name] = value; //{}的key用[]来作为变量
});

//提交ajax
$.post(url,   o , callback);

同理,很多插件效果,使用animate时候,可能只需要改变一个属性,比如指定top(向上)还是bottom(向下),就可以避免写死参数的key,达到一段代码重用的作用。

第二种参数传递,bind()和trigger()之间的参数传递:

$("p").bind("click",  function (event, a, b) {
  // 一个普通的点击事件时,a和b是undefined类型
  // 如果用下面的语句触发,那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]); 

/*
以上是jQuery手册的原句,.click修改为了.bind()而已, 初次使用小郁闷了一下,
一定要注意trgger传参是数组,例如[a, b, c],bind接受参数是function(event, a, b, c),
 第一个一定是event事件的引用,其次依次是参数数组的值列,一一对应
*/

ToFishes系列jQuery插件 – jCuteForm美化的表单插件

jCuteForm插件,针对单选、多选、下拉框的一个替代美化插件。jCuteForm实际上是3个插件的组合,可以分别拿出来使用,它们是: jRadio, jCheckbox, jSelect。

而且不同于其他一些美化插件的工作原理,是对现有的<radio />,<select />等标签进行拆解,内容再封装,生成div模拟的方式,外观定制有些繁琐,而且比较难调控。本插件跳过这几步,依旧遵循ToFishes系列插件结构,表现,行为相分离的原则,结构自定(提供的Demo使用em,a等标签,只是需要一些class等给插件提供参考点,即使是这些class也可以自定),外观由前端人员根据结构自定预先写好,之后调用jCuteForm实现功能。

jCuteForm表单美化插件预览图

Continue reading ToFishes系列jQuery插件 – jCuteForm美化的表单插件

总结自己的前端学习经验

今天给一个同事简单讲如何去把一个psd效果图实现为一个html网页。很自然的就总结出了自己是如何过来的。

应该是水到渠成了吧。从3年多前开始由 阿捷 (可惜无缘其人)的《XHTML+CSS经典重构教程》入门,很感谢他对w3c标准的推广,以致于偶从一个dw表格布局都不熟悉,直接开始了手写XHTML+css的路程。

而js方面也是,当偶2年前知道jQuery的时候,以致于偶从一个js不熟悉的情况下,直接用jQuery实现了很棒的效果。

前端暂时应该还没有大学专业课程学习的吧。而偶的成长完全是在工作中大量实践、应用起来的。

因此,偶深深的觉得:没有不会的,只有不用的。工作是最好的学习课堂。不会很多东西没关系,只要能跟随工作的需要一步步提高就行了。

学习css和jQuery,一是《XHTML+CSS经典重构教程》+CSS手册,二是来源于网络的jQuery15天教程+jQuery手册。由此,偶另外的一个经验就是:知道如何用,知道啥能用。

ToFishes系列jQuery插件 – jTabView选项卡式浏览

网上有不少jQuery的选项卡插件,官方的tab貌似也不错,但用来用去哪有自己写的顺手。

该插件实际使用于公司旗下网站 – 易扑网(eapoo.com), 在网站开发过程中编写,同时扩展了不少功能。

本插件遵循 结构、表现、行为 相分离的原则,所以,html结构与css样式(决定UI)请自己决定。

jTabView选项卡式浏览插件截图

Continue reading ToFishes系列jQuery插件 – jTabView选项卡式浏览