dev-chiefworks
147 lines
3.3 KiB
JavaScript
147 lines
3.3 KiB
JavaScript
/* ------------------------------------------------------------------------------
|
|
*
|
|
* # jQuery UI navigation components
|
|
*
|
|
* Demo JS code for jqueryui_navigation.html page
|
|
*
|
|
* ---------------------------------------------------------------------------- */
|
|
|
|
|
|
// Setup module
|
|
// ------------------------------
|
|
|
|
var JqueryUiNavigation = function() {
|
|
|
|
|
|
//
|
|
// Setup module components
|
|
//
|
|
|
|
// Accordion
|
|
var _componentUiAccordion = function() {
|
|
if (!$().accordion) {
|
|
console.warn('Warning - jQuery UI components are not loaded.');
|
|
return;
|
|
}
|
|
|
|
// Basic accordion
|
|
$('#jui-accordion-basic').accordion();
|
|
|
|
// Collapsible accordion
|
|
$('#jui-accordion-collapsible').accordion({
|
|
collapsible: true
|
|
});
|
|
|
|
// Fill height
|
|
$('#jui-accordion-fill').accordion({
|
|
heightStyle: 'fill'
|
|
});
|
|
|
|
// Accordion on hover
|
|
$('#jui-accordion-hover').accordion({
|
|
event: 'mouseover'
|
|
});
|
|
|
|
// Animated accordion
|
|
$('#jui-accordion-animate').accordion({
|
|
animate: false
|
|
});
|
|
|
|
// Sortable accordion
|
|
$('#jui-accordion-sortable').accordion({
|
|
header: '> div > span'
|
|
})
|
|
.sortable({
|
|
axis: 'y',
|
|
handle: 'span',
|
|
stop: function(event, ui) {
|
|
ui.item.children('span').triggerHandler('focusout');
|
|
|
|
// Refresh accordion to handle new order
|
|
$(this).accordion('refresh');
|
|
}
|
|
});
|
|
};
|
|
|
|
// Menu
|
|
var _componentUiMenu = function() {
|
|
if (!$().menu) {
|
|
console.warn('Warning - jQuery UI components are not loaded.');
|
|
return;
|
|
}
|
|
|
|
// Basic example
|
|
$('.jui-menu-basic').menu();
|
|
|
|
// Disabled menu
|
|
$('.jui-menu-disabled').menu({
|
|
disabled: true
|
|
}).find('a').on('click', function (e) {
|
|
e.preventDefault();
|
|
});
|
|
|
|
// Menu with headers
|
|
$('.jui-menu-header').menu({
|
|
items: '> :not(.ui-menu-header)'
|
|
});
|
|
};
|
|
|
|
// Tabs
|
|
var _componentUiTabs = function() {
|
|
if (!$().tabs) {
|
|
console.warn('Warning - jQuery UI components are not loaded.');
|
|
return;
|
|
}
|
|
|
|
// Basic example
|
|
$('.jui-tabs-basic').tabs();
|
|
|
|
// Collapsible tabs
|
|
$('.jui-tabs-collapsible').tabs({
|
|
collapsible: true
|
|
});
|
|
|
|
// Open tab on hover
|
|
$('.jui-tabs-hover').tabs({
|
|
event: 'mouseover'
|
|
});
|
|
|
|
|
|
//
|
|
// Sortable tabs
|
|
//
|
|
|
|
// Initialize
|
|
var tabs = $('.jui-tabs-sortable').tabs();
|
|
|
|
// Add sortable functionality
|
|
tabs.find('.ui-tabs-nav').sortable({
|
|
containment: '#ui-tabs-sortable-container',
|
|
stop: function() {
|
|
tabs.tabs('refresh');
|
|
}
|
|
});
|
|
};
|
|
|
|
|
|
//
|
|
// Return objects assigned to module
|
|
//
|
|
|
|
return {
|
|
init: function() {
|
|
_componentUiAccordion();
|
|
_componentUiMenu();
|
|
_componentUiTabs();
|
|
}
|
|
}
|
|
}();
|
|
|
|
|
|
// Initialize module
|
|
// ------------------------------
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
JqueryUiNavigation.init();
|
|
});
|