这是一个使用 jQuery UI 的滚动标签页插件，结合菜单和 jsTree 实现的功能示例。用户可以通过点击 jsTree 中的节点或 jQuery UI 菜单项来动态添加和激活标签页，同时支持标签页的关闭功能。页面布局包括头部、导航栏和主要内容区域，具备响应式设计，能够根据设备宽度隐藏或显示导航箭头。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Menu - Categories</title>
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
width:200px;
float:left;
padding:5px;
}
#section {
width:1100px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
<link rel="stylesheet" href="jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<link rel="stylesheet" href="themes/default/style.min.css">
<link rel="stylesheet" href="themes/default-dark/style.min.css">
<style>
#dialog label, #dialog input {
display:block;
}
#dialog label {
margin-top: 0.5em;
}
#dialog input, #dialog textarea {
width: 95%;
}
#tabs {
margin-top: 1em;
}
#tabs li .ui-icon-close {
float: left;
margin: 0.4em 0.2em 0 0;
cursor: pointer;
}
#add_tab {
cursor: pointer;
}
</style>
<script src="jquery-3.6.0.js"></script>
<script src="jquery-ui.js"></script>
<script src="jquery.ui.scrolltabs.js"></script>
<script src="jstree.js"></script>
<style>
.ui-scroll-tabs-header:after {
content: "";
display: table;
clear: both;
}
.ui-scroll-tabs-view {
z-index: 1;
overflow: hidden;
}
.ui-scroll-tabs-view .ui-widget-header {
border: none;
background: transparent;
}
.ui-scroll-tabs-header {
position: relative;
overflow: hidden;
}
.ui-scroll-tabs-header .stNavMain {
position: absolute;
top: 0;
z-index: 2;
height: 100%;
opacity: 0;
transition: left .5s, right .5s, opacity .8s;
transition-timing-function: swing;
}
.ui-scroll-tabs-header .stNavMain button {
height: 90%;
}
.ui-scroll-tabs-header .stNavMainLeft {
left: -250px;
}
.ui-scroll-tabs-header .stNavMainLeft.stNavVisible {
left: 0;
opacity: 1;
}
.ui-scroll-tabs-header .stNavMainRight {
right: -250px;
}
.ui-scroll-tabs-header .stNavMainRight.stNavVisible {
right: 0;
opacity: 1;
}
.ui-scroll-tabs-header ul.ui-tabs-nav {
position: relative;
white-space: nowrap;
}
.ui-scroll-tabs-header ul.ui-tabs-nav li {
display: inline-block;
float: none;
}
.ui-scroll-tabs-header ul.ui-tabs-nav li.stHasCloseBtn a {
padding-right: 0.5em;
}
.ui-scroll-tabs-header ul.ui-tabs-nav li span.stCloseBtn {
float: left;
padding: 4px 2px;
border: none;
cursor: pointer;
}
</style>
<script>
$(function () {
$("#menu").menu({
items: "> :not(.ui-widget-header)"
});
});
</script>
<style>
.ui-menu {
width: 200px;
}
.ui-widget-header {
padding: 0.2em;
}
</style>
<script>
$(function () {
var tabTitle = $("#tab_title"),
tabContent = $("#tab_content"),
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
tabCounter = 2;
var tabs = $("#tabs").scrollTabs({
scrollOptions: {
customNavNext: '#n',
customNavPrev: '#p',
customNavFirst: '#f',
customNavLast: '#l',
easing: 'swing',
enableDebug: false,
closable: true,
showFirstLastArrows: true,
selectTabAfterScroll: true
}
});
// Modal dialog init: custom buttons and a "close" callback resetting the form inside
var dialog = $("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
Add: function () {
addTab();
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
form[ 0 ].reset();
}
});
// AddTab form: calls addTab function on submit and closes the dialog
var form = dialog.find("form").on("submit", function (event) {
addTab();
dialog.dialog("close");
event.preventDefault();
});
// Actual addTab function: adds new tab using the input from the form above
function addTab() {
var label = tabTitle.val() || "Tab " + tabCounter,
id = "tabs-" + tabCounter,
li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)),
tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";
tabs.find(".ui-tabs-nav").append(li);
tabs.append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>");
tabs.tabs("refresh");
tabCounter++;
}
// Close icon: removing the tab on click
tabs.on("click", "span.ui-icon-close", function () {
var panelId = $(this).closest("li").remove().attr("aria-controls");
$("#" + panelId).remove();
tabs.tabs("refresh");
});
tabs.on("keyup", function (event) {
if (event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE) {
var panelId = tabs.find(".ui-tabs-active").remove().attr("aria-controls");
$("#" + panelId).remove();
tabs.tabs("refresh");
}
});
$("#menu").menu({
select: function (event, ui) {
console.log(ui);
console.log(ui.item[0].innerText);
var tab_exist = false;
for (i = 0; i < $("#tabs").scrollTabs("instance").tabs.length; i++) {
console.log($("#tabs").scrollTabs("instance").tabs[i].innerText);
if ((ui.item[0].innerText + "\nClose") === $("#tabs").scrollTabs("instance").tabs[i].innerText) {
console.log("this tab is exist!");
$('#tabs').scrollTabs("option", "active", i);
tab_exist = true;
}
}
if (tab_exist === false) {
$('#tabs').data('uiScrollTabs')
.addTab(ui.item[0].innerText, ui.item[0].innerText + '<br>' +
'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' +
' Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus' +
' a sagittis congue, molestie tempus felis. Donec convallis semper enim,' +
' varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis' +
' a aliquam neque ornare. Proin sed semper lacus.');
}
}
});
$('#add_tab').on('click', function (e) {
$('#tabs').data('uiScrollTabs')
.addTab(new Date(), new Date() + '<br>' +
'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' +
' Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus' +
' a sagittis congue, molestie tempus felis. Donec convallis semper enim,' +
' varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis' +
' a aliquam neque ornare. Proin sed semper lacus.');
});
$('#active_tab').on('click', function (e) {
$('#tabs').scrollTabs("option", "active", 2);
console.log($("#tabs").scrollTabs("instance").tabs);
for (i = 0; i < $("#tabs").scrollTabs("instance").tabs.length; i++) {
console.log($("#tabs").scrollTabs("instance").tabs[i].innerText);
}
});
});
</script>
</head>
<body>
<div id="header">
<h1>jQuery UI Menu - Categories, Tabs and jsTree Demo</h1>
</div>
<div id="nav">
<div id="html" class="demo">
<ul>
<li data-jstree='{ "opened" : true }'>Root node
<ul>
<li data-jstree='{ "selected" : true }'>Child node 1</li>
<li>Child node 2</li>
</ul>
</li>
</ul>
</div>
<script>
$('#html').jstree().bind("select_node.jstree", function (e, data) {
console.log(data.instance.get_node(data.selected).text);
var tab_exist = false;
for (i = 0; i < $("#tabs").scrollTabs("instance").tabs.length; i++) {
console.log($("#tabs").scrollTabs("instance").tabs[i].innerText);
if ((data.instance.get_node(data.selected).text + "\nClose") === $("#tabs").scrollTabs("instance").tabs[i].innerText) {
console.log("this tab is exist!");
$('#tabs').scrollTabs("option", "active", i);
tab_exist = true;
}
}
if (tab_exist === false) {
$('#tabs').data('uiScrollTabs')
.addTab(data.instance.get_node(data.selected).text, data.instance.get_node(data.selected).text + '<br>' +
'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' +
' Quisque hendrerit vulputate porttitor. Fusce purus leo, faucibus' +
' a sagittis congue, molestie tempus felis. Donec convallis semper enim,' +
' varius sagittis eros imperdiet in. Vivamus semper sem at metus mattis' +
' a aliquam neque ornare. Proin sed semper lacus.');
}
});
</script>
<ul id="menu">
<li class="ui-widget-header"><div>Category 1</div></li>
<li><div>Option 1</div></li>
<li><div>Option 2</div></li>
<li><div>Option 3</div></li>
<li class="ui-widget-header"><div>Category 2</div></li>
<li><div>Option 4</div></li>
<li><div>Option 5</div></li>
<li><div>Option 6</div></li>
</ul>
<span id = "result"></span>
</div>
<div id="section">
<div id="dialog" title="Tab data">
<form>
<fieldset class="ui-helper-reset">
<label for="tab_title">Title</label>
<input type="text" name="tab_title" id="tab_title" value="Tab Title" class="ui-widget-content ui-corner-all">
<label for="tab_content">Content</label>
<textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all">Tab content</textarea>
</fieldset>
</form>
</div>
<button id="add_tab">Add Tab</button>
<button id="active_tab">Active Tab</button>
<div id="tabs">
<ul role="tablist">
<li role="tab"><a href="#tabs-1" role="presentation">Tab 1</a></li>
<li role="tab"><a href="#tabs-2" role="presentation">This is tab 2</a></li>
<li role="tab"><a href="#tabs-3" role="presentation">This is tab number 3</a></li>
</ul>
<div id="tabs-1" role="tabpanel">
Tab 1
</div>
<div id="tabs-2" role="tabpanel">
Tab 2
</div>
<div id="tabs-3" role="tabpanel">
Tab 3
</div>
</div>
</div>
<div id="footer">
Copyright </div>
</body>
</html>
点击左侧 jsTree或jQuery UI Menu项目会在右侧创建同名标签页，如果标签页已经存在则激活该名称的标签页。
微调过的jquery.ui.scrolltabs.js
/*! jquery-ui-scrolltab | * v1.0.0 | * https://davidsekar.github.io/jQuery-UI-ScrollTab/ | * @license MIT */
/// <reference path="../../node_modules/@types/jquery/index.d.ts" />
/// <reference path="../../node_modules/@types/jqueryui/index.d.ts" />
/// <reference path="../ts/jquery.ui.scrolltabs.d.ts" />
(function ($) {
$.widget('ui.scrollTabs', $.ui.tabs, {
$ul: null,
$leftArrowWrapper: null,
$rightArrowWrapper: null,
$scrollDiv: null,
$navPrev: null,
$navNext: null,
$navFirst: null,
$navLast: null,
$innerWrapper: null,
$headerWrapper: null,
debounceEnabled: false,
eventDelay: 200,
sbarWidth: null,
options: {
scrollOptions: {
closable: true,
customGotoFirstHTML: '<button class="stNavFirstArrow ui-state-active" title="First">' +
'<span class="ui-icon ui-icon-seek-first">First tab</span></button>',
customMoveNextHTML: '<button class="stNavNextArrow ui-state-active" title="Next">' +
'<span class="ui-icon ui-icon-triangle-1-e">Next tab</span></button>',
customGoToLastHTML: '<button class="stNavLastArrow ui-state-active" title="Last">' +
'<span class="ui-icon ui-icon-seek-end">Last tab</span></button>',
customMovePreviousHTML: '<button class="stNavPrevArrow ui-state-active" title="Previous">' +
'<span class="ui-icon ui-icon-triangle-1-w">Previous tab</span></button>',
easing: 'swing',
enableDebug: false,
headerHTML: '<div class="ui-widget-header ui-corner-all"/>',
headerScrollHTML: '<div class="ui-scroll-tabs-view"/>',
hideDefaultArrows: false,
leftArrowWrapperHTML: '<div class="stNavMain stNavMainLeft"/>',
loadLastTab: false,
onTabScroll: function () {
// empty
},
rightArrowWrapperHTML: '<div class="stNavMain stNavMainRight"/>',
scrollSpeed: 500,
selectTabAfterScroll: true,
selectTabOnAdd: true,
showFirstLastArrows: false,
showNavWhenNeeded: true,
wrapperCssClass: ''
}
},
navigateOptions: {
previous: 1,
next: 2,
first: 3,
last: 4,
mouseScroll: 5
},
_create: function () {
var _this = this;
var options = this.options;
var $elem = this.element;
this.$ul = $elem.find('ol,ul').eq(0).detach();
/* Add custom markup */
this.$headerWrapper = $(this.options.scrollOptions.headerHTML);
this.$headerWrapper.addClass('ui-scroll-tabs-header');
$elem.prepend(this.$headerWrapper);
this.$innerWrapper = $(this.options.scrollOptions.headerScrollHTML);
this.$innerWrapper.addClass('ui-scroll-tabs-view');
this.$headerWrapper.append(this.$innerWrapper);
this.$innerWrapper.append(this.$ul);
/* End */
/**
* jQuery UI widget automatically adds the widget name to the triggered
* events. So instead of 'tabsactivate' event, bind to 'scrolltabsactivate'.
*/
this._on(this.element, {
scrolltabsactivate: function (event, ui) {
_this._animateToActiveTab(event);
}
});
// Call the base
this._super();
this._setupUserOptions();
this._debug(this.eventNamespace);
},
/**
* Method to identify the correct width of the scrollbar in different devices
*/
_findScrollbarWidth: function () {
var parent;
var child;
if (this.sbarWidth === null) {
var style = document.createElement('style');
style.innerHTML = '.__sb-test::-webkit-scrollbar { width: 0px; }';
document.body.appendChild(style);
parent = $('<div class="__sb-test" style="width:30px;height:30px;overflow:auto;">' +
'<div/></div>')
.appendTo('body');
child = parent.children();
this.sbarWidth = child.innerWidth() - child.height(99).innerWidth();
// clean
parent.remove();
document.body.removeChild(style);
}
},
_setOption: function (key, value) {
this._super(key, value);
},
_setOptions: function (options) {
this._super(options);
},
_activate: function (index) {
this._super(index);
},
_setupUserOptions: function () {
var options = this.options.scrollOptions;
this.debounceEnabled = $.debounce ? true : false;
this._debug('isDebounceEnabled : ' + this.debounceEnabled);
var $elem = this.element;
$elem.addClass(options.wrapperCssClass + ' ui-scroll-tabs');
},
/**
* Centrally control all message to be logged to the console
* @param message -message to be displayed
*/
_debug: function (message, isError) {
if (this.options.scrollOptions.enableDebug) {
if (isError === true) {
console.error(message);
} else {
console.log(message);
}
}
},
/**
* If debounce/throttle plugin is found, it debounces the event handler function
* @param dbFunc the event handler function
*/
_debounceEvent: function (dbFunc) {
return this.debounceEnabled ? $.debounce(this.eventDelay, dbFunc) : dbFunc;
},
/**
* If debounce/throttle plugin is found, it uses it in the event handler function
* @param dbFunc the event handler function
*/
_throttleEvent: function (dbFunc) {
return this.debounceEnabled ? $.throttle(this.eventDelay, dbFunc) : dbFunc;
},
_bindMouseScroll: function () {
var _this = this;
if ($.isFunction($.fn.mousewheel)) {
var self_1 = this;
this._on(this.$scrollDiv, {
mousewheel: function (event) {
event.preventDefault();
self_1._scrollWithoutSelection(_this.navigateOptions.mouseScroll, event.deltaY * event.deltaFactor * 3.5);
// self._debug(event.deltaX + ',' + event.deltaY + ',' + event.deltaFactor);
}
});
}
},
/**
* Initializes the navigation controls based on user settings
*/
_setupNavControls: function () {
var _this = this;
this.$scrollDiv = this.$ul.parent();
// Set the height of the UL
// this.$scrollDiv.height(this.tabs.first().outerHeight());
this.$leftArrowWrapper = $(this.options.scrollOptions.leftArrowWrapperHTML);
this.$rightArrowWrapper = $(this.options.scrollOptions.rightArrowWrapperHTML);
if (!this.options.scrollOptions.hideDefaultArrows) {
this.$navPrev = $(this.options.scrollOptions.customMovePreviousHTML).button();
this.$leftArrowWrapper.append(this.$navPrev);
this.$navNext = $(this.options.scrollOptions.customMoveNextHTML).button();
this.$rightArrowWrapper.append(this.$navNext);
if (this.options.scrollOptions.showFirstLastArrows === true) {
this.$navFirst = $(this.options.scrollOptions.customGotoFirstHTML).button();
this.$leftArrowWrapper.prepend(this.$navFirst);
this.$navLast = $(this.options.scrollOptions.customGoToLastHTML).button();
this.$rightArrowWrapper.append(this.$navLast);
} else {
this.$navFirst = this.$navLast = $();
}
}
this.$scrollDiv.before(this.$leftArrowWrapper);
this.$scrollDiv.after(this.$rightArrowWrapper);
this._debug('showNavWhenNeeded ' + this.showNavWhenNeeded);
if (this.options.scrollOptions.showNavWhenNeeded) {
this.$headerWrapper.addClass('show-controls-when-required');
} else {
this.$headerWrapper.addClass('show-controls-always');
}
this._addclosebutton();
this._bindMouseScroll();
// Triggers on the scroll end
this._on(this.$scrollDiv, {
scroll: this._debounceEvent(function () {
_this._showNavsIfNeeded();
})
});
},
/**
* Initializes all the controls and events required for scroll tabs
*/
_init: function () {
var _this = this;
this._setupNavControls();
setTimeout(function () {
_this._showNavsIfNeeded();
}, this.eventDelay);
this._hideScrollBars();
this._addNavEvents();
this._on(window, {
resize: this._debounceEvent(function () {
_this._debug('resize: ' + _this.eventNamespace);
_this._showNavsIfNeeded();
})
});
},
_hideScrollBars: function () {
this._findScrollbarWidth();
this.$innerWrapper.css('margin-bottom', -1 * this.sbarWidth);
},
/**
* Check if navigation need then show; otherwise hide it
*/
_showNavsIfNeeded: function () {
var showLeft = !(this.$scrollDiv.scrollLeft() <= 0);
var showRight = !(Math.abs(this.$scrollDiv[0].scrollWidth - this.$scrollDiv.scrollLeft()
- this.$scrollDiv.outerWidth()) < 1);
if (this.options.scrollOptions.selectTabAfterScroll) {
showLeft = !(this.options.active === 0);
showRight = (this.options.active + 1 === this.tabs.length) ? false : true;
}
showLeft ? this.$leftArrowWrapper.addClass('stNavVisible')
: this.$leftArrowWrapper.removeClass('stNavVisible');
showRight ? this.$rightArrowWrapper.addClass('stNavVisible')
: this.$rightArrowWrapper.removeClass('stNavVisible');
if (this.options.scrollOptions.showNavWhenNeeded === false) {
this.$navFirst.button('option', 'disabled', !showLeft);
this.$navPrev.button('option', 'disabled', !showLeft);
this.$navLast.button('option', 'disabled', !showRight);
this.$navNext.button('option', 'disabled', !showRight);
if (showLeft || showRight) {
this.$headerWrapper.addClass('st-activate-controls');
} else {
this.$headerWrapper.removeClass('st-activate-controls');
}
}
this._debug('Validate showing nav controls');
},
_callBackFnc: function (fName, event, arg1) {
if ($.isFunction(fName)) {
fName(event, arg1);
}
},
/**
* returns the delta that should be added to current scroll to bring it into view
* @param $tab tab that should be tested
*/
_getScrollDeltaValue: function ($tab) {
var leftPosition = $tab.position();
var width = $tab.outerWidth();
var currentScroll = this.$scrollDiv.scrollLeft();
var currentVisibleWidth = this.$scrollDiv.width();
var hiddenDirection = 0;
var arrowsWidth = this.$leftArrowWrapper.width();
// Check if the new tab is in view
if (leftPosition.left < (currentScroll + arrowsWidth)) {
hiddenDirection = leftPosition.left - currentScroll - arrowsWidth;
} else if ((leftPosition.left + width + arrowsWidth) > (currentScroll + currentVisibleWidth)) {
hiddenDirection = (leftPosition.left + width + arrowsWidth)
- (currentScroll + currentVisibleWidth);
}
return hiddenDirection;
},
_scrollWithoutSelection: function (navOpt, sLeft) {
var scrollLeft = this.$scrollDiv.scrollLeft();
switch (navOpt) {
case this.navigateOptions.first:
scrollLeft = 0;
break;
case this.navigateOptions.last:
scrollLeft = this.$scrollDiv[0].scrollWidth;
break;
case this.navigateOptions.previous:
scrollLeft -= this.$scrollDiv.outerWidth() / 2;
break;
case this.navigateOptions.next:
scrollLeft += this.$scrollDiv.outerWidth() / 2;
break;
case this.navigateOptions.mouseScroll:
scrollLeft += sLeft;
break;
}
if (scrollLeft < 0) {
scrollLeft = 0;
}
this.$scrollDiv.stop().animate({scrollLeft: scrollLeft}, this.options.scrollOptions.scrollSpeed / 2, this.options.scrollOptions.easing);
},
_animateToActiveTab: function (e) {
var calculatedDelta = this._getScrollDeltaValue(this.active);
this.$scrollDiv.stop().animate({scrollLeft: this.$scrollDiv.scrollLeft() + calculatedDelta}, this.options.scrollOptions.scrollSpeed, this.options.scrollOptions.easing);
this._showNavsIfNeeded();
// trigger callback if defined
e = (typeof e === 'undefined') ? null : e;
this._callBackFnc(this.options.scrollOptions.onTabScroll, e, this.active);
},
/**
* Return a new jQuery object for user provided selectors or else use the default ones
* @param col if selector is provided by user, then override the existing controls
* @param nav Nav control selector option prop name suffix
*/
_getCustomNavSelector: function (col, nav) {
var sel = this.options.scrollOptions['customNav' + nav] || '';
// Check for custom selector
if (typeof sel === 'string' && $.trim(sel) !== '') {
col = col.add(sel);
}
return col;
},
/**
* This function add the navigation control and binds the required events
*/
_addNavEvents: function () {
var _this = this;
// Handle next tab
this.$navNext = this.$navNext || $();
this.$navNext = this._getCustomNavSelector(this.$navNext, 'Next');
this._on(this.$navNext, {
click: this._debounceEvent(function (e) {
_this._moveToNextTab(e);
})
});
// Handle previous tab
this.$navPrev = this.$navPrev || $();
this.$navPrev = this._getCustomNavSelector(this.$navPrev, 'Prev');
this._on(this.$navPrev, {
click: this._debounceEvent(function (e) {
_this._moveToPrevTab(e);
})
});
// Handle First tab
this.$navFirst = this.$navFirst || $();
this.$navFirst = this._getCustomNavSelector(this.$navFirst, 'First');
this._on(this.$navFirst, {
click: this._debounceEvent(function (e) {
_this._moveToFirstTab(e);
})
});
// Handle last tab
this.$navLast = this.$navLast || $();
this.$navLast = this._getCustomNavSelector(this.$navLast, 'Last');
this._on(this.$navLast, {
click: this._debounceEvent(function (e) {
_this._moveToLastTab(e);
})
});
},
/**
* Handles move to next tab link click
* @param e pass the link click event
*/
_moveToNextTab: function (e) {
if (e) {
e.preventDefault();
}
if (!this.options.scrollOptions.selectTabAfterScroll) {
this._scrollWithoutSelection(this.navigateOptions.next);
return;
}
this._activate(this._findNextTab(Math.max(0, this.options.active + 1), true));
},
/**
* Handles move to previous tab link click
* @param e pass the link click event
*/
_moveToPrevTab: function (e) {
if (e) {
e.preventDefault();
}
if (!this.options.scrollOptions.selectTabAfterScroll) {
this._scrollWithoutSelection(this.navigateOptions.previous);
return;
}
this._activate(this._findNextTab(Math.max(0, this.options.active - 1), false));
},
/**
* Handles move to first tab link click
* @param e pass the link click event
*/
_moveToFirstTab: function (e) {
if (e) {
e.preventDefault();
}
if (!this.options.scrollOptions.selectTabAfterScroll) {
this._scrollWithoutSelection(this.navigateOptions.first);
return;
}
this._activate(this._findNextTab(0, false));
},
/**
* Handles move to last tab link click
* @param e pass the link click event
*/
_moveToLastTab: function (e) {
if (e) {
e.preventDefault();
}
if (!this.options.scrollOptions.selectTabAfterScroll) {
this._scrollWithoutSelection(this.navigateOptions.last);
return;
}
this._activate(this._findNextTab(this.tabs.length - 1, true));
},
_addclosebutton: function ($li) {
var _this = this;
if (this.options.scrollOptions.closable === false) {
return;
}
// If li is provide than just add to that, otherwise add to all
var lis = $li || this.tabs;
var self = this;
lis.each(function (idx, obj) {
var $thisLi = $(obj).addClass('stHasCloseBtn');
$thisLi.append($('<span class="ui-state-default ui-corner-all stCloseBtn">' +
'<span class="ui-icon ui-icon-circle-close" title="Close this tab">Close</span>' +
'</span>'));
var closeButton = $thisLi.find('.stCloseBtn').hover(function () {
$(this).toggleClass('ui-state-hover');
});
_this._on(closeButton, {
click: function (e) {
var removeIdx = self.tabs.index($thisLi);
var selectTabIdx;
selectTabIdx = -1;
if (self.options.active === removeIdx) {
var tabcount = self.tabs.length;
var mid = Math.ceil(tabcount / 2);
if (removeIdx > mid) {
selectTabIdx = removeIdx - 1;
} else {
selectTabIdx = removeIdx;
}
}
self.removeTab($thisLi.find('a.ui-tabs-anchor'));
if (selectTabIdx > -1 && selectTabIdx !== removeIdx) {
self._activate(selectTabIdx);
}
}
});
});
},
addTab: function (header, panelContent) {
var newId = $({}).uniqueId()[0].id;
var tab = $('<li><a href="#' + newId + '" role="tab">' + header + '</a></li>');
var panel = this._createPanel(newId);
panel.html(panelContent);
this.$ul.append(tab);
panel.attr('aria-live', 'polite');
if (panel.length) {
$(this.panels[this.panels.length - 1]).after(panel);
}
panel.attr('role', 'tabpanel');
this._addclosebutton(tab);
this.refresh();
if (this.options.scrollOptions.selectTabOnAdd) {
this._moveToLastTab();
}
this._showNavsIfNeeded();
},
removeTab: function (anc) {
var tabId = anc.attr('href');
// Remove the panel
$(tabId).remove();
// Remove the tab
anc.closest('li').remove();
// Refresh the tabs widget
this.refresh();
},
_destroy: function () {
this._super();
/* Remove navigation controls */
this.$leftArrowWrapper.remove();
this.$rightArrowWrapper.remove();
/* undo the close button */
this.tabs.each(function (idx, element) {
var self = $(element);
self.removeClass('stHasCloseBtn');
self.find('.stCloseBtn').remove();
});
/* Undo enhanced tab headers */
var $headerWrapper = this.$ul.closest('.ui-scroll-tabs-header');
this.$ul = this.$ul.detach();
$headerWrapper.remove();
this.element.prepend(this.$ul);
/* Remove class from the base wrapper */
this.element.removeClass(this.options.wrapperCssClass)
.removeClass('ui-scroll-tabs');
/* unsubscribe all events in namespace */
// this._off(window, 'resize');
$(window).off('resize' + this.eventNamespace);
}
});
return $.ui.scrollTabs;
})(jQuery);
//# sourceMappingURL=jquery.ui.scrolltabs.js.map
GitHub - allwaysoft/-jQuery-UI-Menu---Categories-Tabs-and-jsTree-Demo
扫一扫
1333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
