基于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 相关文章推荐
js下判断 iframe 是否加载完成的完美方法
Oct 26 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
javascript中的循环语句for语句深入理解
Apr 04 Javascript
浅谈javascript 归并方法
Jan 21 Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 Javascript
vue中使用mxgraph的方法实例代码详解
May 17 Javascript
JS前端广告拦截实现原理解析
Feb 17 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环境――Appserv
2006/12/13 PHP
关于在php.ini中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
php中批量替换文件名的实现代码
2011/07/20 PHP
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
深入PHP异步执行的详解
2013/06/03 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
seaJs使用心得之exports与module.exports的区别实例分析
2017/10/13 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
Python 获得13位unix时间戳的方法
2017/10/20 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
python中for用来遍历range函数的方法
2018/06/08 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
Fanatics法国官网:美国体育电商
2019/08/27 全球购物
致跳远运动员广播稿
2014/02/11 职场文书
四年级学生评语大全
2014/04/21 职场文书
小学毕业演讲稿
2014/04/25 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
工程部经理岗位职责
2015/02/02 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
如何解决php-fpm启动不了问题
2021/11/17 PHP