控件这东西网上找的多少都有些功能不如意的,只能自己动手来写了。
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 + "" + 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 + "" + 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选项卡操作方法汇总进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
jQuery,tab,选项卡
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“基于jQuery实现Tabs选项卡自定义插件”评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新动态
2024年05月09日
2024年05月09日
- 崩坏星穹铁道2.2托帕培养材料大全 崩铁托帕养成材料清单一览
- 《M工业》基础攻略 简述+配置+下载
- 《百慕大野兽》基础攻略 简述+配置+下载
- 《披萨塔,Pizza Tower》基础攻略 简述+配置+下载
- 中唱唱片群星《好歌珍藏-母爱·亲情》2CD[WAV+CUE]
- 中唱唱片群星《好歌珍藏-大地飞歌》2CD[WAV]
- 金海心-那么骄傲[WAV]
- 数毛社分析PS5 Pro规格:GPU主频高达2.35GHz
- 《死侍3》新正片片段:狼叔被死侍硫酸脸恶心到了
- 《地狱潜者2》CEO赞扬社区玩家:你们的意志与合作力让我印象深刻
- 张学友 歌神《等风雨经过3CD》[WAV+CUE][2GB]
- 华语流行《周杰伦 2022最伟大的作品》[FLAC/分轨][1.7GB]
- 孙燕姿《No. 13作品 跳舞的梵谷》[WAV+CUE][400MB]
- 张心柔.2012-吟游诗人【禾广娱乐】【FLAC分轨】
- 关淑怡.1991-恋一世的爱【宝丽金】【WAV+CUE】