已经不记得是多久没有写过了,最近的状态还不错,因为各种考试的缘故,很多技术文章都是看了,没有往上面写。在亚马逊购了一些H5,CSS3以及移动互联网开发的书,等驾照考过之后就又要开启学习模式了。
今天闲来无聊,也就把jQuery里面的几个点复习了一边,写了一个小DEMO。复习点是jQuery的自定义事件。
直接帖代码上来了。
jQuery.fn.tabs = function (control) {
var element = $(this);
control = $(control);
//初始化完毕
element.delegate("li", "click", function () {
//找到需要修改的目标
var tabName = $(this).attr("data-tab");
//点击选项卡触发自定义事件
element.trigger("change.tabs", tabName);
});
element.bind("change.tabs", function (e, tabname) {
element.find("li").removeClass("active");
element.find(">[data-tab='" + tabname + "']").addClass("active");
});
element.bind("change.tabs", function (e, tabname) {
control.find(">[data-tab]").removeClass("active");
control.find(">[data-tab='" + tabname + "']").addClass("active");
});
var firstName = element.find("li:first").attr("data-tab");
element.trigger("change.tabs",firstName);
return this;
}
自定义事件在日常的WEB开发中是非常常见的功能,用于封装自有组件定义自有API。实在是居家旅行,开发面试必备技能。