bootstrap选项卡扩展功能详解

网络编程 2024/9/24 佚名

3 1 2

用了下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,选项卡

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“bootstrap选项卡扩展功能详解”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年09月24日

bootstrap选项卡扩展功能详解

JS判断时间段的实现代码

zTree树形插件异步加载方法详解

评论“bootstrap选项卡扩展功能详解”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接