基于jQuery实现Tabs选项卡自定义插件


Posted in Javascript onNovember 21, 2016

控件这东西网上找的多少都有些功能不如意的,只能自己动手来写了。

Tabs插件很多人都需要用到,网上也有很多的例子,但是不是风格不搭调就是用着不习惯(自己写的不一定比别人的好但用着顺手In love)

下面直接贴代码,不喜勿喷:

(function ($) {
 'use strict';
 var defaults = {
 type: "iframe",
 onchanged: null,
 style: {
  header_panel: "tab-headers",
  content_panel: "tab-contents",
  header: "tab-header",
  content: "tab-content",
  selected: "selected",
  icon_base: "fa",
  icon_close: "fa-close"
 }
 }
 var methods = {
 init: function (options) {
  return this.each(function () {
  var $this = $(this);
  if (!$this.hasClass("tw.tabs")) {
   $this.addClass("tabs");
  }
  var settings = $this.data('tw.tabs');
  if (typeof (settings) == 'undefined') {
   settings = $.extend({}, defaults, options);
   $this.data('tw.tabs', settings);
  } else {
   settings = $.extend({}, settings, options);
   $this.data('tw.tabs', settings);
  }
  $this.empty();
  $this.append($("<ul class='" + settings.style.header_panel + "'></ul>"));
  $this.append($("<div class='" + settings.style.content_panel + "'></div>"));
  if (settings.data) {
   if (typeof settings.data === 'string') {
   settings.data = $.parseJSON(settings.data);
   }
   $.each(settings.data, function () {
   $this.tabs("add", this);
   });
  }
  });
 },
 add: function (tab) {
  var $this = $(this);
  var settings = $this.data("tw.tabs");
  var headers = $this.find("." + settings.style.header_panel);
  var contents = $this.find("." + settings.style.content_panel);
  if (headers.find("[data-tab='" + tab.id + "']").length == 0) {
  var header = $("<li class='" + settings.style.header + "' data-tab='" + tab.id + "'>" +
   "<i class='" + settings.style.icon_base + "" + tab.icon + "'></i>" +
   "<span class='tab-title'>" + tab.name + "</span></li>");
  if (tab.canClose) {
   var close = $("<i class='" + settings.style.icon_base + "" + settings.style.icon_close + "'></i>");
   close.click(function () {
   $this.tabs("remove", tab.id);
   });
   header.append(close);
  }
  header.data("tw.tab", tab);
  header.click(function () {
   $this.tabs("select", tab);
  });
  headers.append(header);
  var content = $("<div class='" + settings.style.content + "' data-tab='" + tab.id + "'></div>");
  if (settings.type == "iframe") {
   content.append("<iframe src='" + tab.url + "?target_id=" + tab.id + "'></iframe>");
  } else if (settings.type == "ajax"){
   $.ajax({
   url: tab.url,
   type: "post",
   async: false,
   data: { target_id: tab.id },
   success: function (result) {
    content.html(result);
   }
   });
  } else {
   content.html(tab.content);
  }
  contents.append(content);
  if (tab.selected) {
   $this.tabs("select", tab);
  }
  } else {
  $this.tabs("select", tab);
  }
 },
 select: function (tab) {
  var $this = $(this);
  var settings = $this.data("tw.tabs");
  $this.find("." + settings.style.selected).removeClass(settings.style.selected);
  if (typeof tab == "object") {
  $this.find("[data-tab='" + tab.id + "']").addClass(settings.style.selected);
  } else {
  $this.find("." + settings.style.header).eq(tab).addClass(settings.style.selected);
  $this.find("." + settings.style.content).eq(tab).addClass(settings.style.selected);
  }
  if (settings.onchanged) {
  settings.onchanged(tab);
  }
 },
 refresh: function () {
  var $this = $(this);
  var selected = $this.find("." + settings.style.selected);
  var tab = $this.find("." + settings.style.header).data("tw.tab");
  if (settings.type == "iframe") {
  selected.find("iframe").attr('src', tab.url + "?target_id=" + tab.id);
  } else if (settings.type == "ajax") {
  $.ajax({
   url: tab.url,
   type: "post",
   async: false,
   data: { target_id: tab.id },
   success: function (result) {
   content.html(result);
   }
  });
  } else {
  content.html(tab.content);
  }
 },
 remove: function (id) {
  var $this = $(this);
  var settings = $this.data("tw.tabs");
  var tab = $this.find("[data-tab='" + id + "']");
  if (tab.find("." + settings.style.selected)) {
  var index = tab.eq(0).index() - 1;
  $this.tabs("select", index);
  }
  tab.remove();
 },
 destroy: function (options) {
  return $(this).each(function () {
  var $this = $(this);
  $this.removeData('tabs');
  });
 }
 }
 $.fn.tabs = function () {
 var method = arguments[0];
 var args = arguments;
 if (typeof (method) == 'object' || !method) {
  method = methods.init;
 } else if (methods[method]) {
  method = methods[method];
  args = $.makeArray(arguments).slice(1);
 } else {
  $.error('Method ' + method + ' does not exist on tw.tabs');
  return this;
 }
 return method.apply(this, args);
 }
}
)(jQuery);

.tabs {
 width:100%;
 height:100%;
}
 .tabs .tab-headers {
 margin:0;
 padding:0 10px;
 height:40px;
 list-style:none;
 background:#f5f5f5;
 border-bottom:1px solid #ccc;
 }
 .tabs .tab-headers .tab-header {
  float:left;
  height:30px;
  font-size:12px;
  padding:7px 15px 0;
  margin-top:10px;
  margin-right:5px;
  border:1px solid #ccc;
  border-bottom:none;
  position:relative;
  cursor:pointer;
 }
  .tabs .tab-headers .tab-header:hover {
  background:#ccc;
  color:#0094ff;
  }
  .tabs .tab-headers .tab-header.selected {
  background:#fff;
  border:none;
  cursor:default;
  padding-top:5px;
  margin-left:1px;
  margin-right:6px;
  border-top:3px solid #0094ff;
  }
  .tabs .tab-headers .tab-header .tab-title {
  margin-left:5px;
  }
  .tabs .tab-headers .tab-header .fa-close {
  position:relative;
  right:-6px;
  top:0;
  }
  .tabs .tab-headers .tab-header .tab-close:hover {
   color:#f00;
   cursor:pointer;
  }
 .tabs .tab-contents {
 width: 100%;
 height: calc(100% - 40px);
 }
 .tabs .tab-contents .tab-content {
  display:none;
 }
  .tabs .tab-contents .tab-content.selected {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  }
  .tabs .tab-contents .tab-content.selected iframe {
   width: 100%;
   height: 100%;
   border: none;
  }

本文已被整理到了jquery选项卡操作方法汇总、大家还可以点击javascript选项卡操作方法汇总进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在JavaScript中获取请求的URL参数
Dec 22 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
jQuery.each()用法分享
Jul 31 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
js实现验证码干扰(静态)
Feb 22 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 #Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 #Javascript
js原生实现FastClick事件的实例
Nov 20 #Javascript
常用原生js自定义函数总结
Nov 20 #Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 #Javascript
浅谈jquery选择器 :first与:first-child的区别
Nov 20 #Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 #Javascript
You might like
用PHP函数解决SQL injection
2006/12/09 PHP
第4章 数据处理-php字符串的处理-郑阿奇(续)
2011/07/04 PHP
php数组转换js数组操作及json_encode的用法详解
2013/10/26 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
2020/11/19 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
python 正确保留多位小数的实例
2018/07/16 Python
Python 处理图片像素点的实例
2019/01/08 Python
详解Python3中ceil()函数用法
2019/02/19 Python
python twilio模块实现发送手机短信功能
2019/08/02 Python
python tkinter控件布局项目实例
2019/11/04 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
python 实现aes256加密
2020/11/27 Python
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
给海归自荐信的建议
2013/12/13 职场文书
五型班组建设方案
2014/02/10 职场文书
《长城和运河》教学反思
2014/04/14 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
教师党员个人总结
2015/02/10 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
农村老人去世追悼词
2015/06/23 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书