【www.bbyears.com--jquery】
已经不记得是多久没有写过了，最近的状态还不错，因为各种考试的缘故，很多技术文章都是看了，没有往上面写。在亚马逊购了一些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。实在是居家旅行，开发面试必备技能。
我们也可以不需要这个 jQuery 的 tab(选项卡) 插件，它们多数功能齐全，并且可自定义参数。但除非我去看它们的源代码，否则用起来总像个黑盒子，一旦出问题，调试也觉得麻烦，所以就干脆自己试手，写一个简单适用自己项目的选项卡插件。
代码如下代码
/*===================================
Module Name: tabview
==================================*/
(function ($) {
function processing(e) {
var li = $(this);
li.siblings(".tab-item").removeClass("on");
li.siblings(".tab-item").children("a").removeClass("selected");
li.addClass("on");
li.children("a").addClass("selected");
var currentTab = li.children("a").attr("data-target");
li.closest(".js-tabview").find("div[id]").addClass("is-hide"); //加id是防止误伤其他 div
$(currentTab).removeClass("is-hide");
e.preventDefault();
}
$.fn.tabview = function (options) {
var settings = $.extend({
trigger: "hover"
}, options);
return this.each(function () {
var el = $(this).find(".tab").children(".tab-item").filter(function () {
return !!$(this).children("a").attr("data-target");
});
if (settings.trigger === "hover") {
el.hover(processing);
}
if (settings.trigger === "click") {
el.click(processing);
}
});
};
}(jQuery));
HTML代码结构如下：
代码如下- 选项卡一
- 选项卡二
- 选项卡三
选项卡一对应的内容块
选项卡二对应的内容块
选项卡三对应的内容块
CSS 如下：
代码如下 .is-hide{display:none;}
之所以添加 .is-hide，是为了防止 fouc(flash of unstyled content)，本来 js 中即可完成隐藏元素的结果。
在页面中引入 jquery 与 tabview 插件后，JavaScript 部分书写如下：
代码如下$(function(){$(".js-tabview").tabview();});