网站怎么做微信支付功能/seo服务顾问

最近项目中使用到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&amp;id=6927" data-fun="updateCustom" href="javascript:void(0)">1 &nbsp; 详细信息</a>                </li><li><a class="" data-url="/oa/branches/v2.0.0.0/index.php?r=sales/quoted/services&amp;id=6927" data-fun="quotedServices" href="javascript:void(0)">2 &nbsp; 服务报价单</a>                </li><li><a class="" data-url="/oa/branches/v2.0.0.0/index.php?r=sales/contract/services&amp;id=6927" data-fun="createContract" href="javascript:void(0)">3 &nbsp; 生成合同</a>                </li><li><a class="selected" data-url="/oa/branches/v2.0.0.0/index.php?r=sales/contract/upload&amp;id=6927" data-fun="uploadContract" href="javascript:void(0)">4 &nbsp; 上传合同</a>                </li><li><a class="shop-add" data-url="/oa/branches/v2.0.0.0/index.php?r=sales/custom/addShop&amp;id=6927" data-fun="createShop" href="javascript:void(0)">5 &nbsp; 添加店铺</a>                </li><li><a class="order-send" data-url="/oa/branches/v2.0.0.0/index.php?r=sales/argumentProducer/order&amp;id=6927" data-fun="sendOrder" href="javascript:void(0)">6 &nbsp; 发送工单</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);
});