bootstrap选项卡扩展功能详解

前端之家收集整理的这篇文章主要介绍了bootstrap选项卡扩展功能详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

用了下bootstrap,虽然好看,但是控件跟之前用的easyui相差很大,功能太少,不得不自己写。

花了几个小时把tabs控件扩展了下。下面是代码

页面代码

控件代码

关闭标签 //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 = $('

  • <a href="#page' + this.options.bindcode + '" rel="external nofollow" data-toggle="tab">' + this.options.title + '<span class="close">×
  • ');
    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();
    };
    };

    1. function closetab(target) {
    2. var pager = $(target).parent().attr("href");
    3. $(target).closest("li").remove();
    4. options.selector.next().find(pager).remove();
    5. if (options.selector.find("li.active").length <= 0) {
    6. options.selector.find("li>a:first").tab("show");
    7. };
    8. var li = _drop.options.ulpanel.children("li:first");
    9. if (li.length <= 0) return;
    10. li.find("span.close").show();
    11. _drop.options.selector.before(li);
    12. if (_drop.options.selector.position().top > options.selector.position().top) {
    13. li.find("span.close").hide();
    14. _drop.options.ulpanel.append(li);
    15. return;
    16. };
    17. li.off("click");
    18. if (_drop.options.ulpanel.children("li").length <= 0) {
    19. _drop.options.selector.css({ "visibility": "hidden" });
    20. };
    21. };
    22. function ishas(setting) {//检测选项卡是否存在
    23. var lis = options.selector.find("li"),lidata,hasdata;
    24. hasdata = { selector: undefined,has: false };
    25. $.each(lis,function () {
    26. lidata = $(this).data("data");
    27. if (!lidata) return true;
    28. if (lidata.title === setting.title && lidata.bindcode === setting.bindcode && lidata.url === setting.url) {
    29. hasdata = { selector: $(this),has: true };
    30. return false;
    31. };
    32. });
    33. return hasdata;
    34. };

    };

    var tabcontent = function () {
    this.options = {
    selector:undefined
    };
    var option = {
    bindcode: undefined,content:undefined
    };

    1. this.init = function () {
    2. var content = $('<div class="tab-content"&gt;</div>');
    3. this.options.selector = content;
    4. options.selector.after(this.options.selector);
    5. };
    6. this.addContent = function (setting) {
    7. var page,iframe;
    8. $.extend(option,setting);
    9. hasdata = ishas(option);
    10. if (!hasdata.has) {
    11. page = $('<div id="page' + option.bindcode + '" class="tab-pane"&gt;</div>').data("data",option));
    12. if (!option.url) {
    13. page.html(option.content);
    14. } else {
    15. iframe = $('<iframe src="' + option.url + '" onload="lwFW.windowHelper.autoiframe(this)" scrolling="no"&gt;</iframe>');
    16. page.append(iframe);
    17. };
    18. page.appendTo(this.options.selector);
    19. } else {
    20. page = hasdata.selector;
    21. };
    22. this.options.selector.children("div").not(page).removeClass("active");
    23. page.addClass("active");
    24. };
    25. function ishas(setting) {//检测选项卡是否存在
    26. var divs = _tabcontent.options.selector.children("div"),divdata,has: false };
    27. $.each(divs,function () {
    28. divdata = $(this).data("data");
    29. if (!divdata) return true;
    30. if (divdata.bindcode === setting.bindcode) {
    31. hasdata = { selector: $(this),has: true };
    32. return false;
    33. };
    34. });
    35. return hasdata;
    36. };

    };

    var droplist = function () {
    this.options = {
    selector: undefined,ulpanel: undefined
    };

    1. this.init = function (panel) {
    2. var li = $('<li class="dropdown pull-right"&gt;<a class="dropdown-toggle" data-toggle="dropdown" href="#" rel="external nofollow" ><b class="caret"&gt;</b></a><ul class="dropdown-menu"&gt;</ul></li>');
    3. this.options.selector = li.css({ "visibility": "hidden" });
    4. this.options.ulpanel = li.children("ul");
    5. this.options.selector.appendTo(panel);
    6. };
    7. this.addDropItem = function () {
    8. additem(this.options.selector,this.options.ulpanel);
    9. };
    10. function additem(li,ul) {
    11. var item = options.selector.children("li").not(li).last();
    12. li.css({ "visibility": "visible" });
    13. if (item.length <= 0) return;
    14. item.find("span.close").hide();
    15. ul.append(item);
    16. item.one("click",function () {
    17. itemtarget(this,li,ul);
    18. });
    19. };
    20. function itemtarget(target,selector,ulpanel) {
    21. var item = options.selector.children("li").not(selector).last();
    22. $(target).find("span.close").show();
    23. $(target).prependTo(options.selector);
    24. if (item.length <= 0) return;
    25. if (selector.position().top > options.selector.position().top) {
    26. item.find("span.close").hide();
    27. ulpanel.append(item);
    28. };
    29. item.one("click",ulpanel);
    30. });
    31. };

    };

    function init(setting) {
    $.extend(options,setting);
    if (!options.selector) {
    return;
    };
    if (options.selector[0].tagName.toLowerCase() != "ul") {
    var selector = $('<ul class="nav nav-tabs pagetabs">').appendTo(options.selector);
    options.selector = selector;
    };
    if (!_drop) {
    _drop = new droplist();
    };
    _drop.init(options.selector);

    1. if (!_tabcontent) {
    2. _tabcontent = new tabcontent();
    3. };
    4. _tabcontent.init();
    5. if (!_newtab) {
    6. _newtab = new tab();
    7. };

    };

    function addtab(setting) {
    if (!_newtab) {
    _newtab = new tab();
    };
    _newtab.addtab(setting);
    if (!_tabcontent) {
    _tabcontent = new tabcontent();
    };
    _tabcontent.addContent(setting);
    options.selector.find('li>a').filter('[href=#page' + setting.bindcode + ']').tab("show");
    };

    return {
    init: function (setting) {
    init(setting);
    },addtab: function (setting) {
    addtab(setting);
    }
    };
    })(jQuery);

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    猜你在找的Bootstrap相关文章