Giter Site home page Giter Site logo

ibas0742 / bootstrap-addtabs Goto Github PK

View Code? Open in Web Editor NEW

This project forked from hbbcs/bootstrap-addtabs

0.0 2.0 0.0 230 KB

Bootstrap.addtabs.js is a bootstrap of the tabs extension. You can use it to automatically create, close, drop tabs, create tabs can be used to load ajax / iframe, or directly specify the content. At the same time, you can also use the right tab on the tabs tab to close, refresh the tab.

CSS 3.05% JavaScript 49.32% HTML 47.63%

bootstrap-addtabs's Introduction

Bootstrap.addtabs.js is a bootstrap of the tabs extension. You can use it to automatically create, close, drop tabs, create tabs can be used to load ajax / iframe, or directly specify the content. At the same time, you can also use the right tab on the tabs tab to close, refresh the tab.

#UPDATE

  • 2017/02/15 规范代码,修正BUG
  • 2017/02/09 更改右键菜单,增加右键菜单local设置
  • 2016/12/16 修正点击按钮/链接会刷新已打开TAB
  • 2016/10/13 新增TAB右键菜单,取消右键关闭,注:不希望关闭的tab,不要设置ID
  • 2016/09/20 新增1、直接在TAB上点右键关闭其他TAB,并激活当前tab;2、关闭所有打开TAB的按钮
  • 2016/06/23 隐藏关闭按钮,鼠标指向TAB时显示
  • 2016/02/04 修改主体JS文件,更灵活,更规范
  • 2016/01/25 修改IFrame支持IE,修改一些BUG,增加iframeClass样式表
  • 2015/12/19 重新编写了代码,增加一些参数及函数
  • theme/fonts 目录下的文件我就没有上传了,就是使用Bootstrap中的fonts文件
  • 11月增加了折叠TABS的代码,防止打开过多影响页面
  • 最近在做一个前端,需要点击按钮创建一个可关闭的标签页,没有找到合适的,最后想到不如改造一下bootstrap省事。

#Usage

具体请查看index.html文件

$('#tabs').addtabs({monitor:'.btn-group'});

以下两种子窗口操作方式,是在子窗口不加载bootstrap-addtabs的环境下。

iframe子窗口调用父窗口中的按钮

$(function() {
    var message_btn = parent.$(window.parent.document).find("a[data-addtab=message]");//触发父窗口按钮
    message_btn.trigger("click");
})

iframe子窗口关闭父窗口的TABS

$(function() {
    $(window.parent.document).find('#tab_tab_message').remove();
    $(window.parent.document).find('#tab_message').remove();
})

#Options

content      string|html   直接指定内容
close        bool          是否可以关闭,默认是true
monitor      string        监视的区域,默认是body
iframeUse    bool          使用iframe,false使用ajax,默认true
iframeHeight num           固定TAB中IFRAME高度
callback     function(){}  关闭后回调函数
contextmenu  bool          是否启用右键菜单,默认true
local:{
    'refreshLabel': '刷新此标签',
    'closeThisLabel': '关闭此标签',
    'closeOtherLabel': '关闭其他标签',
    'closeLeftLabel': '关闭左侧标签',
    'closeRightLabel': '关闭右侧标签'
}

bootstrap-addtabs's People

Contributors

hbbcs avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.