用了下bootstrap，虽然好看，但是控件跟之前用的easyui相差很大，功能太少，不得不自己写。
花了几个小时把tabs控件扩展了下。下面是代码
页面代码：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="Content/bootstrap.css" rel="external nofollow" rel="stylesheet" /> <script src="/UploadFiles/2021-04-02/jquery-1.10.2.js">控件代码：
//选项卡 var Tabs = (function ($) { var options = { selector: undefined,// close: false,//是否可以关闭标签 //contextmenu: false,//右键菜单 closeCallback: function () { } }; var _newtab; var _tabcontent; var _drop; var tab = function () { this.options = { title: "", bindcode: undefined, url: undefined, close: false }; var isfull = false; this.init = function (setting) { $.extend(this.options, setting); }; this.addtab = function (setting) { $.extend(this.options, setting); var li, litop, hasdata; if (!_drop) { _drop = new droplist(); }; hasdata = ishas(this.options); if (!hasdata.has) { li = $('<li><a href="#page' + this.options.bindcode + '" rel="external nofollow" data-toggle="tab">' + this.options.title + '<span class="close">×</span></a></li>'); li.data("data", $.extend(true, {}, this.options)); } else { li = hasdata.selector.off("click"); }; li.prependTo(options.selector); li.find("span.close").show().on("click", function () { closetab(this); }); options.selector.children("li").not(li).removeClass("active"); li.addClass("active"); litop = _drop.options.selector.position().top, paneltop = options.selector.position().top; if (litop > paneltop) { //超出检测 _drop.addDropItem(); }; }; function closetab(target) { var pager = $(target).parent().attr("href"); $(target).closest("li").remove(); options.selector.next().find(pager).remove(); if (options.selector.find("li.active").length <= 0) { options.selector.find("li>a:first").tab("show"); }; var li = _drop.options.ulpanel.children("li:first"); if (li.length <= 0) return; li.find("span.close").show(); _drop.options.selector.before(li); if (_drop.options.selector.position().top > options.selector.position().top) { li.find("span.close").hide(); _drop.options.ulpanel.append(li); return; }; li.off("click"); if (_drop.options.ulpanel.children("li").length <= 0) { _drop.options.selector.css({ "visibility": "hidden" }); }; }; function ishas(setting) {//检测选项卡是否存在 var lis = options.selector.find("li"), lidata, hasdata; hasdata = { selector: undefined, has: false }; $.each(lis, function () { lidata = $(this).data("data"); if (!lidata) return true; if (lidata.title === setting.title && lidata.bindcode === setting.bindcode && lidata.url === setting.url) { hasdata = { selector: $(this), has: true }; return false; }; }); return hasdata; }; }; var tabcontent = function () { this.options = { selector:undefined }; var option = { bindcode: undefined, url: undefined, content:undefined }; this.init = function () { var content = $('<div class="tab-content"></div>'); this.options.selector = content; options.selector.after(this.options.selector); }; this.addContent = function (setting) { var page,iframe; $.extend(option, setting); hasdata = ishas(option); if (!hasdata.has) { page = $('<div id="page' + option.bindcode + '" class="tab-pane"></div>').data("data", $.extend(true, {}, option)); if (!option.url) { page.html(option.content); } else { iframe = $('<iframe src="/UploadFiles/2021-04-02/' + option.url + '">以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
bootstrap,选项卡
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“bootstrap选项卡扩展功能详解”评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。