真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

bootstrap選項卡擴展功能詳解

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

青山網(wǎng)站制作公司哪家好,找創(chuàng)新互聯(lián)!從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站等網(wǎng)站項目制作,到程序開發(fā),運營維護。創(chuàng)新互聯(lián)從2013年成立到現(xiàn)在10年的時間,我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗,來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

花了幾個小時把tabs控件擴展了下。下面是代碼

頁面代碼:




  
  
  
  
  
  


  

控件代碼:

//選項卡
var Tabs = (function ($) {
  var options = {
    selector: undefined,//
    close: false,//是否可以關(guān)閉標簽
    //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 = $('
  • ' + this.options.title + '×
  • '); 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 = $('
    '); 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 = $('
    ').data("data", $.extend(true, {}, option)); if (!option.url) { page.html(option.content); } else { iframe = $(''); page.append(iframe); }; page.appendTo(this.options.selector); } else { page = hasdata.selector; }; this.options.selector.children("div").not(page).removeClass("active"); page.addClass("active"); }; function ishas(setting) {//檢測選項卡是否存在 var divs = _tabcontent.options.selector.children("div"), divdata, hasdata; hasdata = { selector: undefined, has: false }; $.each(divs, function () { divdata = $(this).data("data"); if (!divdata) return true; if (divdata.bindcode === setting.bindcode) { hasdata = { selector: $(this), has: true }; return false; }; }); return hasdata; }; }; var droplist = function () { this.options = { selector: undefined, ulpanel: undefined }; this.init = function (panel) { var li = $(''); this.options.selector = li.css({ "visibility": "hidden" }); this.options.ulpanel = li.children("ul"); this.options.selector.appendTo(panel); }; this.addDropItem = function () { additem(this.options.selector, this.options.ulpanel); }; function additem(li, ul) { var item = options.selector.children("li").not(li).last(); li.css({ "visibility": "visible" }); if (item.length <= 0) return; item.find("span.close").hide(); ul.append(item); item.one("click", function () { itemtarget(this, li, ul); }); }; function itemtarget(target, selector, ulpanel) { var item = options.selector.children("li").not(selector).last(); $(target).find("span.close").show(); $(target).prependTo(options.selector); if (item.length <= 0) return; if (selector.position().top > options.selector.position().top) { item.find("span.close").hide(); ulpanel.append(item); }; item.one("click", function () { itemtarget(this, selector, ulpanel); }); }; }; function init(setting) { $.extend(options, setting); if (!options.selector) { return; }; if (options.selector[0].tagName.toLowerCase() != "ul") { var selector = $('').appendTo(options.selector); options.selector = selector; }; if (!_drop) { _drop = new droplist(); }; _drop.init(options.selector); if (!_tabcontent) { _tabcontent = new tabcontent(); }; _tabcontent.init(); if (!_newtab) { _newtab = new tab(); }; }; 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);

    以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。


    文章標題:bootstrap選項卡擴展功能詳解
    瀏覽路徑:http://weahome.cn/article/jodpso.html

    其他資訊

    在線咨詢

    微信咨詢

    電話咨詢

    028-86922220(工作日)

    18980820575(7×24)

    提交需求

    返回頂部