标签：style blog http color java 使用 os io
最近项目中使用到Tab切换，切换的页面不变，内容发生变化，随手写了份简单的插件，附带源码。先看样子：
本人也考虑到是否使用jquery ui tab，但是还是热衷于自己写一份，首先好处之一是易于培训，要培训整个jquery ui还是比较累的。
源码很简单，只是为上面的dom树绑定了点击事件而已。
源码如下：
/** * JQuery Tabs * created by oShine */ (function ($) { var Tabs = function (dom, events) { this.dom = dom; this.events = events; this.init(); }; Tabs.prototype = { init: function () { this.bindEvent(); $(this.dom).find(".tags >ul li a.selected").trigger("click"); }, bindEvent: function () { var self = this; $(this.dom).find(".tags >ul li a").click(function (event) { $(self.dom).find(".tags >ul li a.selected").removeClass("selected"); $(this).addClass("selected"); $(self.dom).find(".filter").hide(); if ($(this).attr("data-filter") !== undefined) { $(self.dom).find($(this).attr("data-filter")).show(); } var fn = $(this).attr("data-fun") !== undefined && typeof self.events[$(this).attr("data-fun")] == "function" ? self.events[$(this).attr("data-fun")] : undefined; var ajaxUrl = $(this).attr(‘data-url‘) !== undefined ? $(this).attr(‘data-url‘) : undefined; if (fn && ajaxUrl) { $.get(ajaxUrl, {}, function (resp) { $(self.dom).find(".content").html(resp); fn($(self.dom)); }); } else if (fn) { fn($(self.dom)); } else if (ajaxUrl) { $.get(ajaxUrl, {}, function (resp) { $(self.dom).find(".content").html(resp); }); } else { console.log("no function"); } return false; }); } }; $.fn.extend({ iTabs: function (events) { var iTabs = new Tabs($(this), events); return iTabs; } }); })($);
应用如下：
<div class="nav tab-container"> <div class="tab-header"> <div class="tags"> <ul> <li class="back-header"> <a class="back-btn" data-fun="back" href="javascript:void(0)"></a> </li> <li> <a class="" data-url="/oa/branches/v2.0.0.0/index.php?r=sales/custom/update&id=6927" data-fun="updateCustom" href="javascript:void(0)">1 详细信息</a> </li> <li> <a class="" data-url="/oa/branches/v2.0.0.0/index.php?r=sales/quoted/services&id=6927" data-fun="quotedServices" href="javascript:void(0)">2 服务报价单</a> </li> <li> <a class="" data-url="/oa/branches/v2.0.0.0/index.php?r=sales/contract/services&id=6927" data-fun="createContract" href="javascript:void(0)">3 生成合同</a> </li> <li> <a class="selected" data-url="/oa/branches/v2.0.0.0/index.php?r=sales/contract/upload&id=6927" data-fun="uploadContract" href="javascript:void(0)">4 上传合同</a> </li> <li> <a class="shop-add" data-url="/oa/branches/v2.0.0.0/index.php?r=sales/custom/addShop&id=6927" data-fun="createShop" href="javascript:void(0)">5 添加店铺</a> </li> <li> <a class="order-send" data-url="/oa/branches/v2.0.0.0/index.php?r=sales/argumentProducer/order&id=6927" data-fun="sendOrder" href="javascript:void(0)">6 发送工单</a> </li> </ul> </div> </div> <div class="tab-content"> <div class="content"> </div> </div> </div>
看到每一个a上面有 data-url和data-fun的属性没有，该插件就是有一个好处，如果有 data-url的属性会ajax请求该url，并把内容填充到content 元素中，再执行data-fun定义的js function。
js如下：
$(document).ready(function(){ var config = {}; config.sendOrder = function(){}; ..... $(".tab-container").iTabs(config); });
标签：style blog http color java 使用 os io
原文地址：http://www.cnblogs.com/oshine/p/3894920.html
