最近项目中使用到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);
});

iTabs Tab切换插件的更多相关文章

  1. 一个小的tab切换插件

    1//使用 var t1=new Tab({ etype:'onmou',//默认点击触发,如果事件写错了,当作单击 autoplay:2000,//有时间值(按照事件自动播放)和false(不自动播 ...

  2. 编写tab切换插件

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. tab切换插件开发

    我开发的tab切换插件,基于jquery库,实现tab标签页的切换.插件的名称为jquery.tabSwitch.js. 插件实现代码如下: ; (function ($) { $.fn.tabSwi ...

  4. swiper插件遇上tab切换

    当swiper插件遇到tab切换,即display的显示与否属性时,失效,方法如下: <script language="javascript"> var mySwip ...

  5. 前端tab切换 和 validatejs表单验证插件

    一.tab切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  6. jquery TAB切换小插件

    //tab切换 ;(function($, window, document, undefined) { $.fn.tab = function(options) { var defaults = { ...

  7. 解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时,图表显示错乱-实现滑动tab

    解决Echarts在微信小程序tab切换时的显示会出现位置移动问题 tab切换时,图表显示错乱 <canvas class="kcanvas" canvas-id=" ...

  8. jq 折面板+tab切换(自己封装的插件哦!!)

    如上图所示的一个折面板效果+tab切换:最重要的js代码如下: 对于布局简单介绍下: hot_wrap_li 这个是带箭头的横条: Arrow 这个是箭头的div:hot_wrap_li_wrap 这 ...

  9. 自己编写jQuery插件之Tab切换

    自己编写jQuery插件之 Tabs切换 jquery ui 带有Tabs切换插件,但其css样式太难维护,引用的东西太多,因此就自己写了个. 起初我Html代码架子是这样的: <div cla ...

随机推荐

  1. HDU 3416 Marriage Match IV (Dijkstra+最大流)

    题意:N个点M条边的有向图,给定起点S和终点T,求每条边都不重复的S-->T的最短路有多少条. 分析:首先第一步需要找出所有可能最短路上的边.怎么高效地求出呢?可以这样:先对起点S,跑出最短路: ...

  2. 保持简单----纪念丹尼斯•里奇(Dennis Ritchie)

    http://www.ruanyifeng.com/blog/2011/10/dennis_ritchie.html

  3. 带你走进ajax(3)

    使用ajax实现用户名有效性验证 需求:当用户输入完用户名时,用户可以通过页面上的按键来确认当前的用户名是否有效.如下图所示 思路:用户触发按键后可以向服务器发起http请求,将用户名提交给服务器来进 ...

  4. Linux进程管理 lsof命令:列出进程调用或打开的文件信息

    lsof命令 通过 ps 命令查询到系统中所有的进程, 通过lsof 命令可以知道这个进程到底在调用哪些文件.lsof 命令格式如下: [root@localhost ~]# lsof [选项] 选项 ...

  5. Js 将 Date 转化为指定格式的String

    // 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符, // 年(y)可以用 1-4 个占 ...

  6. mysql备份脚本-mysqldump

    背景:全库备份 备份流程: 1.生成DB列表,将DB名字写入文件 2.定义备份函数,结果写入SQL文件 3.压缩文件,减少磁盘占用量 4.设置保留天数,定期删除n天之前的 5.通过for循环读取DB列 ...

  7. [BZOJ1996] chorus合唱队

    Description Input Output Sample Input 4 1701 1702 1703 1704 Sample Output 8 HINT 区间$dp$,首先每个点被放入队伍时队 ...

  8. jsp判断以某个字母开头

    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ tag ...

  9. Covariance and Contravariance (C#)

    Covariance and Contravariance (C#) https://docs.microsoft.com/en-us/dotnet/articles/csharp/programmi ...

  10. Java 1.7 ThreadPoolExecutor源码解析

    Java中使用线程池技术一般都是使用Executors这个工厂类,它提供了非常简单方法来创建各种类型的线程池: public static ExecutorService newFixedThread ...