基于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中直接写php代码的方法
Jul 31 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
Jan 02 Javascript
jQuery基本选择器之标签名选择器
Sep 03 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
Jan 08 Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
微信小程序登录态和检验注册过没的app.js写法
May 22 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
javascript代码简写的几种常用方式汇总
Aug 23 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入门小知识
2008/03/24 PHP
PHP实现异步调用方法研究与分享
2011/10/27 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
PHP中使用hidef扩展代替define提高性能
2015/04/09 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
2006/09/22 Javascript
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
Ionic快速安装教程
2016/06/03 Javascript
浅谈EasyUI常用控件的禁用方法
2016/11/09 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
小程序实现留言板
2018/11/02 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
python字符串连接方式汇总
2014/08/21 Python
Python中暂存上传图片的方法
2015/02/18 Python
python字符串,数值计算
2016/10/05 Python
Python中str.format()详解
2017/03/12 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
Python实现的端口扫描功能示例
2018/04/08 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
浅谈flask源码之请求过程
2018/07/26 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
暑期研修感言
2014/02/17 职场文书
团支部建设方案
2014/05/02 职场文书
个人欠款协议书范本2014
2014/11/02 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
电视新闻稿
2015/07/17 职场文书
2015初中团支部工作总结
2015/07/21 职场文书