mirror of
https://github.com/jquery/jquery-ui.git
synced 2025-01-07 20:34:24 +00:00
Merge branch 'master' into tooltip-animations
This commit is contained in:
Jörn Zaefferer
commit
d8e60e9a8a
@ -13,7 +13,13 @@
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#tabs" ).tabs().find( ".ui-tabs-nav" ).sortable({ axis: "x" });
|
||||
var tabs = $( "#tabs" ).tabs();
|
||||
tabs.find( ".ui-tabs-nav" ).sortable({
|
||||
axis: "x",
|
||||
stop: function() {
|
||||
tabs.tabs( "refresh" );
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
<li><a href="tracking.html">Track the mouse</a></li>
|
||||
<li><a href="custom-animation.html">Custom animation</a></li>
|
||||
<li><a href="delegation-mixbag.html">Delegation Mixbag</a></li>
|
||||
<li><a href="lots.html">Lots</a></li>
|
||||
<li><a href="video-player.html">Video Player</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
97
demos/tooltip/video-player.html
Normal file
97
demos/tooltip/video-player.html
Normal file
@ -0,0 +1,97 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI Tooltip - Video Player demo</title>
|
||||
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="../../jquery-1.5.1.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
|
||||
<script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script>
|
||||
<script type="text/javascript" src="../../tests/visual/menu/popup.js"></script>
|
||||
<link type="text/css" href="../demos.css" rel="stylesheet" />
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$("button").each(function() {
|
||||
$(this).button({
|
||||
icons: {
|
||||
primary: $(this).data("icon")
|
||||
},
|
||||
text: !!$(this).attr("title")
|
||||
});
|
||||
});
|
||||
$(".set").buttonset();
|
||||
|
||||
// TODO hide the tooltip when clicking the button
|
||||
$("ul").menu().popup({
|
||||
trigger: $(".menu")
|
||||
});
|
||||
|
||||
$(".demo").tooltip({
|
||||
position: {
|
||||
my: "center top",
|
||||
at: "center bottom+5px"
|
||||
},
|
||||
// TODO need to merge tooltip-animations for this to work
|
||||
hide: false
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.player { width: 500px; height: 300px; border: 2px groove gray; background: rgb(200, 200, 200); text-align: center; line-height: 300px; }
|
||||
/* TODO load from jquery.ui.popup.css */
|
||||
.ui-popup { position: absolute; z-index: 5000; }
|
||||
|
||||
.ui-tooltip {
|
||||
border: 1px solid white;
|
||||
background: rgba(20, 20, 20, 1);
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div class="player">Here Be Video (HTML5?)</div>
|
||||
<div class="tools">
|
||||
<span class="set">
|
||||
<button data-icon="ui-icon-circle-arrow-n" title="I like this">Like</button>
|
||||
<button data-icon="ui-icon-circle-arrow-s">I dislike this</button>
|
||||
</span>
|
||||
<span class="set">
|
||||
<button data-icon="ui-icon-circle-plus" title="Add to Watch Later">Add to</button>
|
||||
<button class="menu" data-icon="ui-icon-triangle-1-s">Add to favorites or playlist</button>
|
||||
</span>
|
||||
<button title="Share this video">Share</button>
|
||||
<button data-icon="ui-icon-alert">Flag as inappropiate</button>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">Favorites</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Watch Later</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">New Playlist...</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
|
||||
<p>A fake video player with like/share/stats button, each with a custom-styled tooltip.</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,172 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Menu Static Test : Default</title>
|
||||
<link rel="stylesheet" href="../static.css" type="text/css" />
|
||||
<link rel="stylesheet" href="../../../themes/base/jquery.ui.base.css" type="text/css" />
|
||||
<link rel="stylesheet" href="../../../themes/base/jquery.ui.theme.css" type="text/css" title="ui-theme" />
|
||||
<script type="text/javascript" src="../../../jquery-1.5.1.js"></script>
|
||||
<script type="text/javascript" src="../static.js"></script>
|
||||
|
||||
<script src="http://jqueryui.com/themeroller/themeswitchertool/" type="text/javascript"></script>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$('#switcher').themeswitcher();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
/* styles for this page only */
|
||||
.ui-menu { width: 200px; }
|
||||
#flyout .ui-menu { position: relative; }
|
||||
#flyout .ui-menu.ui-menu-icons { position: absolute; }
|
||||
|
||||
.ui-menu.ui-menu-icons { position: relative; }
|
||||
.ui-menu.ui-menu-icons .ui-menu-item a { position: relative; padding-left: 2em; }
|
||||
|
||||
/* left-aligned icon */
|
||||
.ui-menu .ui-icon { position: absolute; top: .2em; left: .2em; }
|
||||
|
||||
/* right-aligned icon */
|
||||
.ui-menu .ui-icon.ui-menu-icon { position: static; float: right; }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="switcher" style="position: absolute; top: 20px; right: 20px;"></div>
|
||||
|
||||
|
||||
<!-- NOTES:
|
||||
|
||||
* Added "ui-menu-icons" class to set a left indent value for all menu items in a single menu
|
||||
|
||||
-->
|
||||
|
||||
|
||||
<h2>Default</h2>
|
||||
|
||||
<ul role="menu" aria-activedescendant="ui-active-menuitem" class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-bottom">
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all"><span class="ui-icon ui-icon-print"></span>Aberdeen</a></li>
|
||||
<li class="ui-menu-item" role="menuitem" id="ui-active-menuitem"><a href="#" tabindex="-1" class="ui-state-hover ui-corner-all">Ada</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Adamsville</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all"><span class="ui-icon ui-icon-scissors"></span>Addyston really long menu option to show wrap</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all"><span class="ui-icon ui-icon-wrench"></span>Adelphi</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all"><span class="ui-icon ui-icon-star"></span>Adena</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Adrian</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Akron</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Albany</a></li>
|
||||
</ul>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<div id="drilldown">
|
||||
|
||||
<h2>Drilldown</h2>
|
||||
|
||||
<ul role="listbox" aria-activedescendant="ui-active-menuitem" class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all">
|
||||
<li role="menuitem" class="ui-menu-item">
|
||||
<a href="#" tabindex="-1" class="ui-state-hover ui-corner-all"><span class="ui-icon ui-icon-print"></span><span class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Amsterdam</a>
|
||||
<ul aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-widget ui-widget-content ui-corner-all" style="display: none;">
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Aberdeen</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Ada</a></li>
|
||||
<li role="menuitem" class="ui-menu-item">
|
||||
<a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Adamsville</a>
|
||||
<ul aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-widget ui-widget-content ui-corner-all" style="display: none;">
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Anaheim</a></li>
|
||||
<li role="menuitem" class="ui-menu-item">
|
||||
<a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Cologne</a>
|
||||
<ul aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-widget ui-widget-content ui-corner-all" style="display: none;">
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mberdeen</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mda</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mdamsville</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mddyston</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mmesville</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Frankfurt</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Addyston</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Amesville</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-star"></span>Anaheim</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-heart"></span>Cologne</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-key"></span>Frankfurt</a></li>
|
||||
<li role="menuitem" class="ui-menu-item">
|
||||
<a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Magdeburg</a>
|
||||
<ul aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-widget ui-widget-content ui-corner-all" style="display: none;">
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mberdeen</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mda</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mdamsville</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mddyston</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mmesville</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Munich</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Utrecht</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Zurich</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<div id="flyout">
|
||||
|
||||
<h2>Flyout / nested</h2>
|
||||
|
||||
<ul aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all" id="menu">
|
||||
<li role="menuitem" class="ui-menu-item">
|
||||
<a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-scissors"></span>Amsterdam</a>
|
||||
<ul style="display: block; top: 88.5px; left: 205px;" aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all">
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Aberdeen</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Ada</a></li>
|
||||
<li role="menuitem" class="ui-menu-item">
|
||||
<a tabindex="-1" class="ui-state-active ui-corner-all" href="#"><span class="ui-icon ui-icon-print"></span><span class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Adamsville</a>
|
||||
<ul style="display: block; top: 73px; left: -11px; z-index: 9999;" aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all">
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Anaheim</a></li>
|
||||
<li role="menuitem" class="ui-menu-item">
|
||||
<a tabindex="-1" class="ui-corner-all" href="#">Cologne</a>
|
||||
<ul style="display: none;" aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all">
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mberdeen</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mda</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mdamsville</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mddyston</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mmesville</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-state-hover ui-corner-all" href="#">Frankfurt</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Addyston</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Amesville</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Anaheim</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-pencil"></span>Cologne</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-clock"></span>Frankfurt</a></li>
|
||||
<li role="menuitem" class="ui-menu-item">
|
||||
<a tabindex="-1" class="ui-state-active ui-corner-all" href="#"><span class="ui-icon ui-icon-print"></span><span class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Magdeburg</a>
|
||||
<ul style="display: none;" aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all">
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mberdeen</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mda</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mdamsville</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mddyston</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Mmesville</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-lightbulb"></span>Munich</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#"><span class="ui-icon ui-icon-clipboard"></span>Utrecht</a></li>
|
||||
<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Zurich</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,39 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Menu Static Test : Default</title>
|
||||
<link rel="stylesheet" href="../static.css" type="text/css" />
|
||||
<link rel="stylesheet" href="../../../themes/base/jquery.ui.base.css" type="text/css" />
|
||||
<link rel="stylesheet" href="../../../themes/base/jquery.ui.theme.css" type="text/css" title="ui-theme" />
|
||||
<script type="text/javascript" src="../../../jquery-1.5.1.js"></script>
|
||||
<script type="text/javascript" src="../static.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<ul role="menu" aria-activedescendant="ui-active-menuitem" class="ui-menu ui-widget ui-widget-content ui-corner-bottom">
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Aberdeen</a></li>
|
||||
<li class="ui-menu-item" role="menuitem" id="ui-active-menuitem"><a href="#" tabindex="-1" class="ui-state-hover ui-corner-all">Ada</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Adamsville</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Addyston</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Adelphi</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Adena</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Adrian</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Akron</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Albany</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Alexandria</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Alger</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Alledonia</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Alliance</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Alpha</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Alvada</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Alvordton</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Amanda</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Amelia</a></li>
|
||||
<li class="ui-menu-item" role="menuitem"><a href="#" tabindex="-1" class="ui-corner-all">Amesville</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -20,7 +20,7 @@
|
||||
<script src="../testsuite.js"></script>
|
||||
|
||||
<script>
|
||||
function state( accordion ) {
|
||||
function accordion_state( accordion ) {
|
||||
var expected = $.makeArray( arguments ).slice( 1 );
|
||||
var actual = accordion.find( ".ui-accordion-content" ).map(function() {
|
||||
return $( this ).css( "display" ) === "none" ? 0 : 1;
|
||||
|
||||
@ -4,46 +4,46 @@ module( "accordion: core", accordionSetupTeardown() );
|
||||
|
||||
$.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( type, selector ) {
|
||||
test( "markup structure: " + type, function() {
|
||||
var ac = $( selector ).accordion();
|
||||
ok( ac.hasClass( "ui-accordion" ), "main element is .ui-accordion" );
|
||||
equal( ac.find( ".ui-accordion-header" ).length, 3,
|
||||
var element = $( selector ).accordion();
|
||||
ok( element.hasClass( "ui-accordion" ), "main element is .ui-accordion" );
|
||||
equal( element.find( ".ui-accordion-header" ).length, 3,
|
||||
".ui-accordion-header elements exist, correct number" );
|
||||
equal( ac.find( ".ui-accordion-content" ).length, 3,
|
||||
equal( element.find( ".ui-accordion-content" ).length, 3,
|
||||
".ui-accordion-content elements exist, correct number" );
|
||||
same( ac.find( ".ui-accordion-header" ).next().get(),
|
||||
ac.find( ".ui-accordion-content" ).get(),
|
||||
same( element.find( ".ui-accordion-header" ).next().get(),
|
||||
element.find( ".ui-accordion-content" ).get(),
|
||||
"content panels come immediately after headers" );
|
||||
});
|
||||
});
|
||||
|
||||
test( "handle click on header-descendant", function() {
|
||||
var ac = $( "#navigation" ).accordion();
|
||||
var element = $( "#navigation" ).accordion();
|
||||
$( "#navigation h2:eq(1) a" ).click();
|
||||
state( ac, 0, 1, 0 );
|
||||
accordion_state( element, 0, 1, 0 );
|
||||
});
|
||||
|
||||
test( "ui-accordion-heading class added to headers anchor", function() {
|
||||
expect( 1 );
|
||||
var ac = $( "#list1" ).accordion();
|
||||
var anchors = $( ".ui-accordion-heading" );
|
||||
var element = $( "#list1" ).accordion();
|
||||
var anchors = element.find( ".ui-accordion-heading" );
|
||||
equals( anchors.length, 3 );
|
||||
});
|
||||
|
||||
test( "accessibility", function () {
|
||||
expect( 13 );
|
||||
var ac = $( "#list1" ).accordion().accordion( "option", "active", 1 );
|
||||
var headers = $( ".ui-accordion-header" );
|
||||
var element = $( "#list1" ).accordion().accordion( "option", "active", 1 );
|
||||
var headers = element.find( ".ui-accordion-header" );
|
||||
|
||||
equals( headers.eq( 1 ).attr( "tabindex" ), 0, "active header should have tabindex=0" );
|
||||
equals( headers.eq( 0 ).attr( "tabindex" ), -1, "inactive header should have tabindex=-1" );
|
||||
equals( ac.attr( "role" ), "tablist", "main role" );
|
||||
equals( element.attr( "role" ), "tablist", "main role" );
|
||||
equals( headers.attr( "role" ), "tab", "tab roles" );
|
||||
equals( headers.next().attr( "role" ), "tabpanel", "tabpanel roles" );
|
||||
equals( headers.eq( 1 ).attr( "aria-expanded" ), "true", "active tab has aria-expanded" );
|
||||
equals( headers.eq( 0 ).attr( "aria-expanded" ), "false", "inactive tab has aria-expanded" );
|
||||
equals( headers.eq( 1 ).attr( "aria-selected" ), "true", "active tab has aria-selected" );
|
||||
equals( headers.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab has aria-selected" );
|
||||
ac.accordion( "option", "active", 0 );
|
||||
element.accordion( "option", "active", 0 );
|
||||
equals( headers.eq( 0 ).attr( "aria-expanded" ), "true", "newly active tab has aria-expanded" );
|
||||
equals( headers.eq( 1 ).attr( "aria-expanded" ), "false", "newly inactive tab has aria-expanded" );
|
||||
equals( headers.eq( 0 ).attr( "aria-selected" ), "true", "active tab has aria-selected" );
|
||||
|
||||
@ -10,6 +10,11 @@ commonWidgetTests( "accordion", {
|
||||
icons: {
|
||||
"activeHeader": "ui-icon-triangle-1-s",
|
||||
"header": "ui-icon-triangle-1-e"
|
||||
}
|
||||
},
|
||||
|
||||
// callbacks
|
||||
activate: null,
|
||||
beforeActivate: null,
|
||||
create: null
|
||||
}
|
||||
});
|
||||
|
||||
@ -16,6 +16,13 @@ commonWidgetTests( "accordion", {
|
||||
"headerSelected": "ui-icon-triangle-1-s"
|
||||
},
|
||||
navigation: false,
|
||||
navigationFilter: function() {}
|
||||
navigationFilter: function() {},
|
||||
|
||||
// callbacks
|
||||
activate: null,
|
||||
beforeActivate: null,
|
||||
change: null,
|
||||
changestart: null,
|
||||
create: null
|
||||
}
|
||||
});
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<script src="../testsuite.js"></script>
|
||||
|
||||
<script>
|
||||
function state( accordion ) {
|
||||
function accordion_state( accordion ) {
|
||||
var expected = $.makeArray( arguments ).slice( 1 );
|
||||
var actual = accordion.find( ".ui-accordion-content" ).map(function() {
|
||||
return $( this ).css( "display" ) === "none" ? 0 : 1;
|
||||
|
||||
@ -3,89 +3,89 @@
|
||||
module( "accordion (deprecated): expanded active option, activate method", accordionSetupTeardown() );
|
||||
|
||||
test( "activate, numeric", function() {
|
||||
var ac = $( "#list1" ).accordion({ active: 1 });
|
||||
state( ac, 0, 1, 0 );
|
||||
ac.accordion( "activate", 2 );
|
||||
state( ac, 0, 0, 1 );
|
||||
ac.accordion( "activate", 0 );
|
||||
state( ac, 1, 0, 0 );
|
||||
ac.accordion( "activate", 1 );
|
||||
state( ac, 0, 1, 0 );
|
||||
ac.accordion( "activate", 2 );
|
||||
state( ac, 0, 0, 1 );
|
||||
var element = $( "#list1" ).accordion({ active: 1 });
|
||||
accordion_state( element, 0, 1, 0 );
|
||||
element.accordion( "activate", 2 );
|
||||
accordion_state( element, 0, 0, 1 );
|
||||
element.accordion( "activate", 0 );
|
||||
accordion_state( element, 1, 0, 0 );
|
||||
element.accordion( "activate", 1 );
|
||||
accordion_state( element, 0, 1, 0 );
|
||||
element.accordion( "activate", 2 );
|
||||
accordion_state( element, 0, 0, 1 );
|
||||
});
|
||||
|
||||
test( "activate, numeric, collapsible:true", function() {
|
||||
var ac = $( "#list1" ).accordion({ collapsible: true });
|
||||
ac.accordion( "activate", 2 );
|
||||
state( ac, 0, 0, 1 );
|
||||
ac.accordion( "activate", 0 );
|
||||
state( ac, 1, 0, 0 );
|
||||
ac.accordion( "activate", -1 );
|
||||
state( ac, 0, 0, 0 );
|
||||
var element = $( "#list1" ).accordion({ collapsible: true });
|
||||
element.accordion( "activate", 2 );
|
||||
accordion_state( element, 0, 0, 1 );
|
||||
element.accordion( "activate", 0 );
|
||||
accordion_state( element, 1, 0, 0 );
|
||||
element.accordion( "activate", -1 );
|
||||
accordion_state( element, 0, 0, 0 );
|
||||
});
|
||||
|
||||
test( "activate, boolean, collapsible: true", function() {
|
||||
var ac = $( "#list1" ).accordion({ collapsible: true });
|
||||
ac.accordion( "activate", 2 );
|
||||
state( ac, 0, 0, 1 );
|
||||
ac.accordion( "activate", false );
|
||||
state( ac, 0, 0, 0 );
|
||||
var element = $( "#list1" ).accordion({ collapsible: true });
|
||||
element.accordion( "activate", 2 );
|
||||
accordion_state( element, 0, 0, 1 );
|
||||
element.accordion( "activate", false );
|
||||
accordion_state( element, 0, 0, 0 );
|
||||
});
|
||||
|
||||
test( "activate, boolean, collapsible: false", function() {
|
||||
var ac = $( "#list1" ).accordion();
|
||||
ac.accordion( "activate", 2 );
|
||||
state( ac, 0, 0, 1 );
|
||||
ac.accordion( "activate", false );
|
||||
state( ac, 0, 0, 1 );
|
||||
var element = $( "#list1" ).accordion();
|
||||
element.accordion( "activate", 2 );
|
||||
accordion_state( element, 0, 0, 1 );
|
||||
element.accordion( "activate", false );
|
||||
accordion_state( element, 0, 0, 1 );
|
||||
});
|
||||
|
||||
test( "activate, string expression", function() {
|
||||
var ac = $( "#list1" ).accordion({ active: "h3:last" });
|
||||
state( ac, 0, 0, 1 );
|
||||
ac.accordion( "activate", ":first" );
|
||||
state( ac, 1, 0, 0 );
|
||||
ac.accordion( "activate", ":eq(1)" );
|
||||
state( ac, 0, 1, 0 );
|
||||
ac.accordion( "activate", ":last" );
|
||||
state( ac, 0, 0, 1 );
|
||||
var element = $( "#list1" ).accordion({ active: "h3:last" });
|
||||
accordion_state( element, 0, 0, 1 );
|
||||
element.accordion( "activate", ":first" );
|
||||
accordion_state( element, 1, 0, 0 );
|
||||
element.accordion( "activate", ":eq(1)" );
|
||||
accordion_state( element, 0, 1, 0 );
|
||||
element.accordion( "activate", ":last" );
|
||||
accordion_state( element, 0, 0, 1 );
|
||||
});
|
||||
|
||||
test( "activate, jQuery or DOM element", function() {
|
||||
var ac = $( "#list1" ).accordion({ active: $( "#list1 h3:last" ) });
|
||||
state( ac, 0, 0, 1 );
|
||||
ac.accordion( "activate", $( "#list1 h3:first" ) );
|
||||
state( ac, 1, 0, 0 );
|
||||
ac.accordion( "activate", $( "#list1 h3" )[ 1 ] );
|
||||
state( ac, 0, 1, 0 );
|
||||
var element = $( "#list1" ).accordion({ active: $( "#list1 h3:last" ) });
|
||||
accordion_state( element, 0, 0, 1 );
|
||||
element.accordion( "activate", $( "#list1 h3:first" ) );
|
||||
accordion_state( element, 1, 0, 0 );
|
||||
element.accordion( "activate", $( "#list1 h3" )[ 1 ] );
|
||||
accordion_state( element, 0, 1, 0 );
|
||||
});
|
||||
|
||||
test( "{ active: Selector }", function() {
|
||||
var ac = $("#list1").accordion({
|
||||
var element = $("#list1").accordion({
|
||||
active: "h3:last"
|
||||
});
|
||||
state( ac, 0, 0, 1 );
|
||||
ac.accordion( "option", "active", "h3:eq(1)" );
|
||||
state( ac, 0, 1, 0 );
|
||||
accordion_state( element, 0, 0, 1 );
|
||||
element.accordion( "option", "active", "h3:eq(1)" );
|
||||
accordion_state( element, 0, 1, 0 );
|
||||
});
|
||||
|
||||
test( "{ active: Element }", function() {
|
||||
var ac = $( "#list1" ).accordion({
|
||||
var element = $( "#list1" ).accordion({
|
||||
active: $( "#list1 h3:last" )[ 0 ]
|
||||
});
|
||||
state( ac, 0, 0, 1 );
|
||||
ac.accordion( "option", "active", $( "#list1 h3:eq(1)" )[ 0 ] );
|
||||
state( ac, 0, 1, 0 );
|
||||
accordion_state( element, 0, 0, 1 );
|
||||
element.accordion( "option", "active", $( "#list1 h3:eq(1)" )[ 0 ] );
|
||||
accordion_state( element, 0, 1, 0 );
|
||||
});
|
||||
|
||||
test( "{ active: jQuery Object }", function() {
|
||||
var ac = $( "#list1" ).accordion({
|
||||
var element = $( "#list1" ).accordion({
|
||||
active: $( "#list1 h3:last" )
|
||||
});
|
||||
state( ac, 0, 0, 1 );
|
||||
ac.accordion( "option", "active", $( "#list1 h3:eq(1)" ) );
|
||||
state( ac, 0, 1, 0 );
|
||||
accordion_state( element, 0, 0, 1 );
|
||||
element.accordion( "option", "active", $( "#list1 h3:eq(1)" ) );
|
||||
accordion_state( element, 0, 1, 0 );
|
||||
});
|
||||
|
||||
|
||||
@ -99,9 +99,9 @@ test( "{ autoHeight: true }, default", function() {
|
||||
});
|
||||
|
||||
test("{ autoHeight: false }", function() {
|
||||
var accordion = $('#navigation').accordion({ autoHeight: false });
|
||||
var element = $('#navigation').accordion({ autoHeight: false });
|
||||
var sizes = [];
|
||||
accordion.find(".ui-accordion-content").each(function() {
|
||||
element.find(".ui-accordion-content").each(function() {
|
||||
sizes.push($(this).height());
|
||||
});
|
||||
ok( sizes[0] >= 70 && sizes[0] <= 105, "was " + sizes[0] );
|
||||
@ -111,8 +111,8 @@ test("{ autoHeight: false }", function() {
|
||||
|
||||
test( "{ fillSpace: true }", function() {
|
||||
$( "#navigationWrapper" ).height( 500 );
|
||||
var ac = $( "#navigation" ).accordion({ fillSpace: true });
|
||||
equalHeights( ac, 446, 458 );
|
||||
var element = $( "#navigation" ).accordion({ fillSpace: true });
|
||||
equalHeights( element, 446, 458 );
|
||||
});
|
||||
|
||||
test( "{ fillSapce: true } with sibling", function() {
|
||||
@ -124,8 +124,8 @@ test( "{ fillSapce: true } with sibling", function() {
|
||||
marginBottom: 30
|
||||
})
|
||||
.prependTo( "#navigationWrapper" );
|
||||
var ac = $( "#navigation" ).accordion({ fillSpace: true });
|
||||
equalHeights( ac , 346, 358);
|
||||
var element = $( "#navigation" ).accordion({ fillSpace: true });
|
||||
equalHeights( element , 346, 358);
|
||||
});
|
||||
|
||||
test( "{ fillSpace: true } with multiple siblings", function() {
|
||||
@ -152,8 +152,8 @@ test( "{ fillSpace: true } with multiple siblings", function() {
|
||||
marginBottom: 15
|
||||
})
|
||||
.prependTo( "#navigationWrapper" );
|
||||
var ac = $( "#navigation" ).accordion({ fillSpace: true });
|
||||
equalHeights( ac, 296, 308 );
|
||||
var element = $( "#navigation" ).accordion({ fillSpace: true });
|
||||
equalHeights( element, 296, 308 );
|
||||
});
|
||||
|
||||
|
||||
@ -163,13 +163,13 @@ test( "{ fillSpace: true } with multiple siblings", function() {
|
||||
module( "accordion (deprecated) - icons", accordionSetupTeardown() );
|
||||
|
||||
test( "icons, headerSelected", function() {
|
||||
var list = $( "#list1" ).accordion({
|
||||
var element = $( "#list1" ).accordion({
|
||||
icons: { headerSelected: "a1", header: "h1" }
|
||||
});
|
||||
ok( list.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) );
|
||||
list.accordion( "option", "icons", { headerSelected: "a2", header: "h2" } );
|
||||
ok( !list.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) );
|
||||
ok( list.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a2" ) );
|
||||
ok( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) );
|
||||
element.accordion( "option", "icons", { headerSelected: "a2", header: "h2" } );
|
||||
ok( !element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) );
|
||||
ok( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a2" ) );
|
||||
});
|
||||
|
||||
|
||||
@ -179,18 +179,18 @@ test( "icons, headerSelected", function() {
|
||||
module( "accordion (deprecated) - resize", accordionSetupTeardown() );
|
||||
|
||||
test( "resize", function() {
|
||||
var expected = $( "#navigation" )
|
||||
var element = $( "#navigation" )
|
||||
.parent()
|
||||
.height( 300 )
|
||||
.end()
|
||||
.accordion({
|
||||
heightStyle: "fill"
|
||||
});
|
||||
equalHeights( expected, 246, 258 );
|
||||
equalHeights( element, 246, 258 );
|
||||
|
||||
expected.parent().height( 500 );
|
||||
expected.accordion( "resize" );
|
||||
equalHeights( expected, 446, 458 );
|
||||
element.parent().height( 500 );
|
||||
element.accordion( "resize" );
|
||||
equalHeights( element, 446, 458 );
|
||||
});
|
||||
|
||||
|
||||
@ -200,25 +200,25 @@ test( "resize", function() {
|
||||
module( "accordion (deprecated) - navigation", accordionSetupTeardown() );
|
||||
|
||||
test( "{ navigation: true, navigationFilter: header }", function() {
|
||||
var ac = $( "#navigation" ).accordion({
|
||||
var element = $( "#navigation" ).accordion({
|
||||
navigation: true,
|
||||
navigationFilter: function() {
|
||||
return /\?p=1\.1\.3$/.test( this.href );
|
||||
}
|
||||
});
|
||||
equal( ac.accordion( "option", "active" ), 2 );
|
||||
state( ac, 0, 0, 1 );
|
||||
equal( element.accordion( "option", "active" ), 2 );
|
||||
accordion_state( element, 0, 0, 1 );
|
||||
});
|
||||
|
||||
test( "{ navigation: true, navigationFilter: content }", function() {
|
||||
var ac = $("#navigation").accordion({
|
||||
var element = $("#navigation").accordion({
|
||||
navigation: true,
|
||||
navigationFilter: function() {
|
||||
return /\?p=1\.1\.3\.2$/.test(this.href);
|
||||
}
|
||||
});
|
||||
equal( ac.accordion( "option", "active" ), 2 );
|
||||
state( ac, 0, 0, 1 );
|
||||
equal( element.accordion( "option", "active" ), 2 );
|
||||
accordion_state( element, 0, 0, 1 );
|
||||
});
|
||||
|
||||
|
||||
@ -229,26 +229,26 @@ module( "accordion (deprecated) - changestart/change events", accordionSetupTear
|
||||
|
||||
test( "changestart", function() {
|
||||
expect( 26 );
|
||||
var ac = $( "#list1" ).accordion({
|
||||
var element = $( "#list1" ).accordion({
|
||||
active: false,
|
||||
collapsible: true
|
||||
});
|
||||
var headers = ac.find( ".ui-accordion-header" );
|
||||
var content = ac.find( ".ui-accordion-content" );
|
||||
var headers = element.find( ".ui-accordion-header" );
|
||||
var content = element.find( ".ui-accordion-content" );
|
||||
|
||||
ac.one( "accordionchangestart", function( event, ui ) {
|
||||
element.one( "accordionchangestart", function( event, ui ) {
|
||||
equals( ui.oldHeader.size(), 0 );
|
||||
equals( ui.oldContent.size(), 0 );
|
||||
equals( ui.newHeader.size(), 1 );
|
||||
strictEqual( ui.newHeader[ 0 ], headers[ 0 ] );
|
||||
equals( ui.newContent.size(), 1 );
|
||||
strictEqual( ui.newContent[ 0 ], content[ 0 ] );
|
||||
state( ac, 0, 0, 0 );
|
||||
accordion_state( element, 0, 0, 0 );
|
||||
});
|
||||
ac.accordion( "option", "active", 0 );
|
||||
state( ac, 1, 0, 0 );
|
||||
element.accordion( "option", "active", 0 );
|
||||
accordion_state( element, 1, 0, 0 );
|
||||
|
||||
ac.one( "accordionchangestart", function( event, ui ) {
|
||||
element.one( "accordionchangestart", function( event, ui ) {
|
||||
equals( ui.oldHeader.size(), 1 );
|
||||
strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] );
|
||||
equals( ui.oldContent.size(), 1 );
|
||||
@ -257,34 +257,34 @@ test( "changestart", function() {
|
||||
strictEqual( ui.newHeader[ 0 ], headers[ 1 ] );
|
||||
equals( ui.newContent.size(), 1 );
|
||||
strictEqual( ui.newContent[ 0 ], content[ 1 ] );
|
||||
state( ac, 1, 0, 0 );
|
||||
accordion_state( element, 1, 0, 0 );
|
||||
});
|
||||
headers.eq( 1 ).click();
|
||||
state( ac, 0, 1, 0 );
|
||||
accordion_state( element, 0, 1, 0 );
|
||||
|
||||
ac.one( "accordionchangestart", function( event, ui ) {
|
||||
element.one( "accordionchangestart", function( event, ui ) {
|
||||
equals( ui.oldHeader.size(), 1 );
|
||||
strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] );
|
||||
equals( ui.oldContent.size(), 1 );
|
||||
strictEqual( ui.oldContent[ 0 ], content[ 1 ] );
|
||||
equals( ui.newHeader.size(), 0 );
|
||||
equals( ui.newContent.size(), 0 );
|
||||
state( ac, 0, 1, 0 );
|
||||
accordion_state( element, 0, 1, 0 );
|
||||
});
|
||||
ac.accordion( "option", "active", false );
|
||||
state( ac, 0, 0, 0 );
|
||||
element.accordion( "option", "active", false );
|
||||
accordion_state( element, 0, 0, 0 );
|
||||
});
|
||||
|
||||
test( "change", function() {
|
||||
expect( 20 );
|
||||
var ac = $( "#list1" ).accordion({
|
||||
var element = $( "#list1" ).accordion({
|
||||
active: false,
|
||||
collapsible: true
|
||||
});
|
||||
var headers = ac.find( ".ui-accordion-header" );
|
||||
var content = ac.find( ".ui-accordion-content" );
|
||||
var headers = element.find( ".ui-accordion-header" );
|
||||
var content = element.find( ".ui-accordion-content" );
|
||||
|
||||
ac.one( "accordionchange", function( event, ui ) {
|
||||
element.one( "accordionchange", function( event, ui ) {
|
||||
equals( ui.oldHeader.size(), 0 );
|
||||
equals( ui.oldContent.size(), 0 );
|
||||
equals( ui.newHeader.size(), 1 );
|
||||
@ -292,9 +292,9 @@ test( "change", function() {
|
||||
equals( ui.newContent.size(), 1 );
|
||||
strictEqual( ui.newContent[ 0 ], content[ 0 ] );
|
||||
});
|
||||
ac.accordion( "option", "active", 0 );
|
||||
element.accordion( "option", "active", 0 );
|
||||
|
||||
ac.one( "accordionchange", function( event, ui ) {
|
||||
element.one( "accordionchange", function( event, ui ) {
|
||||
equals( ui.oldHeader.size(), 1 );
|
||||
strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] );
|
||||
equals( ui.oldContent.size(), 1 );
|
||||
@ -306,7 +306,7 @@ test( "change", function() {
|
||||
});
|
||||
headers.eq( 1 ).click();
|
||||
|
||||
ac.one( "accordionchange", function( event, ui ) {
|
||||
element.one( "accordionchange", function( event, ui ) {
|
||||
equals( ui.oldHeader.size(), 1 );
|
||||
strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] );
|
||||
equals( ui.oldContent.size(), 1 );
|
||||
@ -314,7 +314,7 @@ test( "change", function() {
|
||||
equals( ui.newHeader.size(), 0 );
|
||||
equals( ui.newContent.size(), 0 );
|
||||
});
|
||||
ac.accordion( "option", "active", false );
|
||||
element.accordion( "option", "active", false );
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
|
||||
@ -4,14 +4,14 @@ module( "accordion: events", accordionSetupTeardown() );
|
||||
|
||||
test( "beforeActivate", function() {
|
||||
expect( 38 );
|
||||
var ac = $( "#list1" ).accordion({
|
||||
var element = $( "#list1" ).accordion({
|
||||
active: false,
|
||||
collapsible: true
|
||||
});
|
||||
var headers = ac.find( ".ui-accordion-header" );
|
||||
var content = ac.find( ".ui-accordion-content" );
|
||||
var headers = element.find( ".ui-accordion-header" );
|
||||
var content = element.find( ".ui-accordion-content" );
|
||||
|
||||
ac.one( "accordionbeforeactivate", function( event, ui ) {
|
||||
element.one( "accordionbeforeactivate", function( event, ui ) {
|
||||
ok( !( "originalEvent" in event ) );
|
||||
equals( ui.oldHeader.size(), 0 );
|
||||
equals( ui.oldContent.size(), 0 );
|
||||
@ -19,12 +19,12 @@ test( "beforeActivate", function() {
|
||||
strictEqual( ui.newHeader[ 0 ], headers[ 0 ] );
|
||||
equals( ui.newContent.size(), 1 );
|
||||
strictEqual( ui.newContent[ 0 ], content[ 0 ] );
|
||||
state( ac, 0, 0, 0 );
|
||||
accordion_state( element, 0, 0, 0 );
|
||||
});
|
||||
ac.accordion( "option", "active", 0 );
|
||||
state( ac, 1, 0, 0 );
|
||||
element.accordion( "option", "active", 0 );
|
||||
accordion_state( element, 1, 0, 0 );
|
||||
|
||||
ac.one( "accordionbeforeactivate", function( event, ui ) {
|
||||
element.one( "accordionbeforeactivate", function( event, ui ) {
|
||||
equals( event.originalEvent.type, "click" );
|
||||
equals( ui.oldHeader.size(), 1 );
|
||||
strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] );
|
||||
@ -34,12 +34,12 @@ test( "beforeActivate", function() {
|
||||
strictEqual( ui.newHeader[ 0 ], headers[ 1 ] );
|
||||
equals( ui.newContent.size(), 1 );
|
||||
strictEqual( ui.newContent[ 0 ], content[ 1 ] );
|
||||
state( ac, 1, 0, 0 );
|
||||
accordion_state( element, 1, 0, 0 );
|
||||
});
|
||||
headers.eq( 1 ).click();
|
||||
state( ac, 0, 1, 0 );
|
||||
accordion_state( element, 0, 1, 0 );
|
||||
|
||||
ac.one( "accordionbeforeactivate", function( event, ui ) {
|
||||
element.one( "accordionbeforeactivate", function( event, ui ) {
|
||||
ok( !( "originalEvent" in event ) );
|
||||
equals( ui.oldHeader.size(), 1 );
|
||||
strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] );
|
||||
@ -47,12 +47,12 @@ test( "beforeActivate", function() {
|
||||
strictEqual( ui.oldContent[ 0 ], content[ 1 ] );
|
||||
equals( ui.newHeader.size(), 0 );
|
||||
equals( ui.newContent.size(), 0 );
|
||||
state( ac, 0, 1, 0 );
|
||||
accordion_state( element, 0, 1, 0 );
|
||||
});
|
||||
ac.accordion( "option", "active", false );
|
||||
state( ac, 0, 0, 0 );
|
||||
element.accordion( "option", "active", false );
|
||||
accordion_state( element, 0, 0, 0 );
|
||||
|
||||
ac.one( "accordionbeforeactivate", function( event, ui ) {
|
||||
element.one( "accordionbeforeactivate", function( event, ui ) {
|
||||
ok( !( "originalEvent" in event ) );
|
||||
equals( ui.oldHeader.size(), 0 );
|
||||
equals( ui.oldContent.size(), 0 );
|
||||
@ -61,22 +61,22 @@ test( "beforeActivate", function() {
|
||||
equals( ui.newContent.size(), 1 );
|
||||
strictEqual( ui.newContent[ 0 ], content[ 2 ] );
|
||||
event.preventDefault();
|
||||
state( ac, 0, 0, 0 );
|
||||
accordion_state( element, 0, 0, 0 );
|
||||
});
|
||||
ac.accordion( "option", "active", 2 );
|
||||
state( ac, 0, 0, 0 );
|
||||
element.accordion( "option", "active", 2 );
|
||||
accordion_state( element, 0, 0, 0 );
|
||||
});
|
||||
|
||||
test( "activate", function() {
|
||||
expect( 21 );
|
||||
var ac = $( "#list1" ).accordion({
|
||||
var element = $( "#list1" ).accordion({
|
||||
active: false,
|
||||
collapsible: true
|
||||
});
|
||||
var headers = ac.find( ".ui-accordion-header" );
|
||||
var content = ac.find( ".ui-accordion-content" );
|
||||
var headers = element.find( ".ui-accordion-header" );
|
||||
var content = element.find( ".ui-accordion-content" );
|
||||
|
||||
ac.one( "accordionactivate", function( event, ui ) {
|
||||
element.one( "accordionactivate", function( event, ui ) {
|
||||
equals( ui.oldHeader.size(), 0 );
|
||||
equals( ui.oldContent.size(), 0 );
|
||||
equals( ui.newHeader.size(), 1 );
|
||||
@ -84,9 +84,9 @@ test( "activate", function() {
|
||||
equals( ui.newContent.size(), 1 );
|
||||
strictEqual( ui.newContent[ 0 ], content[ 0 ] );
|
||||
});
|
||||
ac.accordion( "option", "active", 0 );
|
||||
element.accordion( "option", "active", 0 );
|
||||
|
||||
ac.one( "accordionactivate", function( event, ui ) {
|
||||
element.one( "accordionactivate", function( event, ui ) {
|
||||
equals( ui.oldHeader.size(), 1 );
|
||||
strictEqual( ui.oldHeader[ 0 ], headers[ 0 ] );
|
||||
equals( ui.oldContent.size(), 1 );
|
||||
@ -98,7 +98,7 @@ test( "activate", function() {
|
||||
});
|
||||
headers.eq( 1 ).click();
|
||||
|
||||
ac.one( "accordionactivate", function( event, ui ) {
|
||||
element.one( "accordionactivate", function( event, ui ) {
|
||||
equals( ui.oldHeader.size(), 1 );
|
||||
strictEqual( ui.oldHeader[ 0 ], headers[ 1 ] );
|
||||
equals( ui.oldContent.size(), 1 );
|
||||
@ -106,17 +106,17 @@ test( "activate", function() {
|
||||
equals( ui.newHeader.size(), 0 );
|
||||
equals( ui.newContent.size(), 0 );
|
||||
});
|
||||
ac.accordion( "option", "active", false );
|
||||
element.accordion( "option", "active", false );
|
||||
|
||||
// prevent activation
|
||||
ac.one( "accordionbeforeactivate", function( event ) {
|
||||
element.one( "accordionbeforeactivate", function( event ) {
|
||||
ok( true );
|
||||
event.preventDefault();
|
||||
});
|
||||
ac.one( "accordionactivate", function() {
|
||||
element.one( "accordionactivate", function() {
|
||||
ok( false );
|
||||
});
|
||||
ac.accordion( "option", "active", 1 );
|
||||
element.accordion( "option", "active", 1 );
|
||||
});
|
||||
|
||||
}( jQuery ) );
|
||||
|
||||
@ -9,29 +9,29 @@ test( "destroy", function() {
|
||||
});
|
||||
|
||||
test( "enable/disable", function() {
|
||||
var accordion = $('#list1').accordion();
|
||||
state( accordion, 1, 0, 0 );
|
||||
accordion.accordion( "disable" );
|
||||
accordion.accordion( "option", "active", 1 );
|
||||
state( accordion, 1, 0, 0 );
|
||||
accordion.accordion( "enable" );
|
||||
accordion.accordion( "option", "active", 1 );
|
||||
state( accordion, 0, 1, 0 );
|
||||
var element = $('#list1').accordion();
|
||||
accordion_state( element, 1, 0, 0 );
|
||||
element.accordion( "disable" );
|
||||
element.accordion( "option", "active", 1 );
|
||||
accordion_state( element, 1, 0, 0 );
|
||||
element.accordion( "enable" );
|
||||
element.accordion( "option", "active", 1 );
|
||||
accordion_state( element, 0, 1, 0 );
|
||||
});
|
||||
|
||||
test( "refresh", function() {
|
||||
var expected = $( "#navigation" )
|
||||
var element = $( "#navigation" )
|
||||
.parent()
|
||||
.height( 300 )
|
||||
.end()
|
||||
.accordion({
|
||||
heightStyle: "fill"
|
||||
});
|
||||
equalHeights( expected, 246, 258 );
|
||||
equalHeights( element, 246, 258 );
|
||||
|
||||
expected.parent().height( 500 );
|
||||
expected.accordion( "refresh" );
|
||||
equalHeights( expected, 446, 458 );
|
||||
element.parent().height( 500 );
|
||||
element.accordion( "refresh" );
|
||||
equalHeights( element, 446, 458 );
|
||||
});
|
||||
|
||||
}( jQuery ) );
|
||||
|
||||
@ -3,184 +3,184 @@
|
||||
module( "accordion: options", accordionSetupTeardown() );
|
||||
|
||||
test( "{ active: default }", function() {
|
||||
var ac = $( "#list1" ).accordion();
|
||||
equals( ac.accordion( "option", "active" ), 0 );
|
||||
state( ac, 1, 0, 0 );
|
||||
var element = $( "#list1" ).accordion();
|
||||
equals( element.accordion( "option", "active" ), 0 );
|
||||
accordion_state( element, 1, 0, 0 );
|
||||
});
|
||||
|
||||
test( "{ active: false }", function() {
|
||||
var ac = $( "#list1" ).accordion({
|
||||
var element = $( "#list1" ).accordion({
|
||||
active: false,
|
||||
collapsible: true
|
||||
});
|
||||
state( ac, 0, 0, 0 );
|
||||
equals( ac.find( ".ui-accordion-header.ui-state-active" ).size(), 0, "no headers selected" );
|
||||
equals( ac.accordion( "option", "active" ), false );
|
||||
accordion_state( element, 0, 0, 0 );
|
||||
equals( element.find( ".ui-accordion-header.ui-state-active" ).size(), 0, "no headers selected" );
|
||||
equals( element.accordion( "option", "active" ), false );
|
||||
|
||||
ac.accordion( "option", "collapsible", false );
|
||||
state( ac, 1, 0, 0 );
|
||||
equals( ac.accordion( "option", "active" ), 0 );
|
||||
element.accordion( "option", "collapsible", false );
|
||||
accordion_state( element, 1, 0, 0 );
|
||||
equals( element.accordion( "option", "active" ), 0 );
|
||||
|
||||
ac.accordion( "destroy" );
|
||||
ac.accordion({
|
||||
element.accordion( "destroy" );
|
||||
element.accordion({
|
||||
active: false
|
||||
});
|
||||
state( ac, 1, 0, 0 );
|
||||
strictEqual( ac.accordion( "option", "active" ), 0 );
|
||||
accordion_state( element, 1, 0, 0 );
|
||||
strictEqual( element.accordion( "option", "active" ), 0 );
|
||||
});
|
||||
|
||||
test( "{ active: Number }", function() {
|
||||
var ac = $( "#list1" ).accordion({
|
||||
var element = $( "#list1" ).accordion({
|
||||
active: 2
|
||||
});
|
||||
equals( ac.accordion( "option", "active" ), 2 );
|
||||
state( ac, 0, 0, 1 );
|
||||
equals( element.accordion( "option", "active" ), 2 );
|
||||
accordion_state( element, 0, 0, 1 );
|
||||
|
||||
ac.accordion( "option", "active", 0 );
|
||||
equals( ac.accordion( "option", "active" ), 0 );
|
||||
state( ac, 1, 0, 0 );
|
||||
element.accordion( "option", "active", 0 );
|
||||
equals( element.accordion( "option", "active" ), 0 );
|
||||
accordion_state( element, 1, 0, 0 );
|
||||
|
||||
ac.find( ".ui-accordion-header" ).eq( 1 ).click();
|
||||
equals( ac.accordion( "option", "active" ), 1 );
|
||||
state( ac, 0, 1, 0 );
|
||||
element.find( ".ui-accordion-header" ).eq( 1 ).click();
|
||||
equals( element.accordion( "option", "active" ), 1 );
|
||||
accordion_state( element, 0, 1, 0 );
|
||||
|
||||
ac.accordion( "option", "active", 10 );
|
||||
equals( ac.accordion( "option", "active" ), 1 );
|
||||
state( ac, 0, 1, 0 );
|
||||
element.accordion( "option", "active", 10 );
|
||||
equals( element.accordion( "option", "active" ), 1 );
|
||||
accordion_state( element, 0, 1, 0 );
|
||||
});
|
||||
|
||||
if ( $.uiBackCompat === false ) {
|
||||
test( "{ active: -Number }", function() {
|
||||
var ac = $( "#list1" ).accordion({
|
||||
var element = $( "#list1" ).accordion({
|
||||
active: -1
|
||||
});
|
||||
equals( ac.accordion( "option", "active" ), 2 );
|
||||
state( ac, 0, 0, 1 );
|
||||
equals( element.accordion( "option", "active" ), 2 );
|
||||
accordion_state( element, 0, 0, 1 );
|
||||
|
||||
ac.accordion( "option", "active", -2 );
|
||||
equals( ac.accordion( "option", "active" ), 1 );
|
||||
state( ac, 0, 1, 0 );
|
||||
element.accordion( "option", "active", -2 );
|
||||
equals( element.accordion( "option", "active" ), 1 );
|
||||
accordion_state( element, 0, 1, 0 );
|
||||
|
||||
ac.accordion( "option", "active", -10 );
|
||||
equals( ac.accordion( "option", "active" ), 1 );
|
||||
state( ac, 0, 1, 0 );
|
||||
element.accordion( "option", "active", -10 );
|
||||
equals( element.accordion( "option", "active" ), 1 );
|
||||
accordion_state( element, 0, 1, 0 );
|
||||
|
||||
ac.accordion( "option", "active", -3 );
|
||||
equals( ac.accordion( "option", "active" ), 0 );
|
||||
state( ac, 1, 0, 0 );
|
||||
element.accordion( "option", "active", -3 );
|
||||
equals( element.accordion( "option", "active" ), 0 );
|
||||
accordion_state( element, 1, 0, 0 );
|
||||
});
|
||||
}
|
||||
|
||||
// TODO: add animation tests
|
||||
|
||||
test( "{ collapsible: false }", function() {
|
||||
var ac = $( "#list1" ).accordion({
|
||||
var element = $( "#list1" ).accordion({
|
||||
active: 1
|
||||
});
|
||||
ac.accordion( "option", "active", false );
|
||||
equal( ac.accordion( "option", "active" ), 1 );
|
||||
state( ac, 0, 1, 0 );
|
||||
element.accordion( "option", "active", false );
|
||||
equal( element.accordion( "option", "active" ), 1 );
|
||||
accordion_state( element, 0, 1, 0 );
|
||||
|
||||
ac.find( ".ui-accordion-header" ).eq( 1 ).click();
|
||||
equal( ac.accordion( "option", "active" ), 1 );
|
||||
state( ac, 0, 1, 0 );
|
||||
element.find( ".ui-accordion-header" ).eq( 1 ).click();
|
||||
equal( element.accordion( "option", "active" ), 1 );
|
||||
accordion_state( element, 0, 1, 0 );
|
||||
});
|
||||
|
||||
test( "{ collapsible: true }", function() {
|
||||
var ac = $( "#list1" ).accordion({
|
||||
var element = $( "#list1" ).accordion({
|
||||
active: 1,
|
||||
collapsible: true
|
||||
});
|
||||
|
||||
ac.accordion( "option", "active", false );
|
||||
equal( ac.accordion( "option", "active" ), false );
|
||||
state( ac, 0, 0, 0 );
|
||||
element.accordion( "option", "active", false );
|
||||
equal( element.accordion( "option", "active" ), false );
|
||||
accordion_state( element, 0, 0, 0 );
|
||||
|
||||
ac.accordion( "option", "active", 1 );
|
||||
equal( ac.accordion( "option", "active" ), 1 );
|
||||
state( ac, 0, 1, 0 );
|
||||
element.accordion( "option", "active", 1 );
|
||||
equal( element.accordion( "option", "active" ), 1 );
|
||||
accordion_state( element, 0, 1, 0 );
|
||||
|
||||
ac.find( ".ui-accordion-header" ).eq( 1 ).click();
|
||||
equals( ac.accordion( "option", "active" ), false );
|
||||
state( ac, 0, 0, 0 );
|
||||
element.find( ".ui-accordion-header" ).eq( 1 ).click();
|
||||
equals( element.accordion( "option", "active" ), false );
|
||||
accordion_state( element, 0, 0, 0 );
|
||||
});
|
||||
|
||||
test( "{ event: null }", function() {
|
||||
var ac = $( "#list1" ).accordion({
|
||||
var element = $( "#list1" ).accordion({
|
||||
event: null
|
||||
});
|
||||
state( ac, 1, 0, 0 );
|
||||
accordion_state( element, 1, 0, 0 );
|
||||
|
||||
ac.accordion( "option", "active", 1 );
|
||||
equal( ac.accordion( "option", "active" ), 1 );
|
||||
state( ac, 0, 1, 0 );
|
||||
element.accordion( "option", "active", 1 );
|
||||
equal( element.accordion( "option", "active" ), 1 );
|
||||
accordion_state( element, 0, 1, 0 );
|
||||
|
||||
// ensure default click handler isn't bound
|
||||
ac.find( ".ui-accordion-header" ).eq( 2 ).click();
|
||||
equal( ac.accordion( "option", "active" ), 1 );
|
||||
state( ac, 0, 1, 0 );
|
||||
element.find( ".ui-accordion-header" ).eq( 2 ).click();
|
||||
equal( element.accordion( "option", "active" ), 1 );
|
||||
accordion_state( element, 0, 1, 0 );
|
||||
});
|
||||
|
||||
test( "{ event: custom }", function() {
|
||||
var ac = $( "#list1" ).accordion({
|
||||
var element = $( "#list1" ).accordion({
|
||||
event: "custom1 custom2"
|
||||
});
|
||||
state( ac, 1, 0, 0 );
|
||||
accordion_state( element, 1, 0, 0 );
|
||||
|
||||
ac.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom1" );
|
||||
equal( ac.accordion( "option", "active" ), 1 );
|
||||
state( ac, 0, 1, 0 );
|
||||
element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom1" );
|
||||
equal( element.accordion( "option", "active" ), 1 );
|
||||
accordion_state( element, 0, 1, 0 );
|
||||
|
||||
// ensure default click handler isn't bound
|
||||
ac.find( ".ui-accordion-header" ).eq( 2 ).trigger( "click" );
|
||||
equal( ac.accordion( "option", "active" ), 1 );
|
||||
state( ac, 0, 1, 0 );
|
||||
element.find( ".ui-accordion-header" ).eq( 2 ).trigger( "click" );
|
||||
equal( element.accordion( "option", "active" ), 1 );
|
||||
accordion_state( element, 0, 1, 0 );
|
||||
|
||||
ac.find( ".ui-accordion-header" ).eq( 2 ).trigger( "custom2" );
|
||||
equal( ac.accordion( "option", "active" ), 2 );
|
||||
state( ac, 0, 0, 1 );
|
||||
element.find( ".ui-accordion-header" ).eq( 2 ).trigger( "custom2" );
|
||||
equal( element.accordion( "option", "active" ), 2 );
|
||||
accordion_state( element, 0, 0, 1 );
|
||||
|
||||
ac.accordion( "option", "event", "custom3" );
|
||||
element.accordion( "option", "event", "custom3" );
|
||||
|
||||
// ensure old event handlers are unbound
|
||||
ac.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom1" );
|
||||
equal( ac.accordion( "option", "active" ), 2 );
|
||||
state( ac, 0, 0, 1 );
|
||||
element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom1" );
|
||||
equal( element.accordion( "option", "active" ), 2 );
|
||||
accordion_state( element, 0, 0, 1 );
|
||||
|
||||
ac.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom3" );
|
||||
equal( ac.accordion( "option", "active" ), 1 );
|
||||
state( ac, 0, 1, 0 );
|
||||
element.find( ".ui-accordion-header" ).eq( 1 ).trigger( "custom3" );
|
||||
equal( element.accordion( "option", "active" ), 1 );
|
||||
accordion_state( element, 0, 1, 0 );
|
||||
});
|
||||
|
||||
test( "{ header: default }", function() {
|
||||
// default: > li > :first-child,> :not(li):even
|
||||
// > :not(li):even
|
||||
state( $( "#list1" ).accordion(), 1, 0, 0);
|
||||
accordion_state( $( "#list1" ).accordion(), 1, 0, 0);
|
||||
// > li > :first-child
|
||||
state( $( "#navigation" ).accordion(), 1, 0, 0);
|
||||
accordion_state( $( "#navigation" ).accordion(), 1, 0, 0);
|
||||
});
|
||||
|
||||
test( "{ header: custom }", function() {
|
||||
var ac = $( "#navigationWrapper" ).accordion({
|
||||
var element = $( "#navigationWrapper" ).accordion({
|
||||
header: "h2"
|
||||
});
|
||||
ac.find( "h2" ).each(function() {
|
||||
element.find( "h2" ).each(function() {
|
||||
ok( $( this ).hasClass( "ui-accordion-header" ) );
|
||||
});
|
||||
equal( ac.find( ".ui-accordion-header" ).length, 3 );
|
||||
state( ac, 1, 0, 0 );
|
||||
ac.accordion( "option", "active", 2 );
|
||||
state( ac, 0, 0, 1 );
|
||||
equal( element.find( ".ui-accordion-header" ).length, 3 );
|
||||
accordion_state( element, 1, 0, 0 );
|
||||
element.accordion( "option", "active", 2 );
|
||||
accordion_state( element, 0, 0, 1 );
|
||||
});
|
||||
|
||||
test( "{ heightStyle: 'auto' }", function() {
|
||||
var ac = $( "#navigation" ).accordion({ heightStyle: "auto" });
|
||||
equalHeights( ac, 95, 130 );
|
||||
var element = $( "#navigation" ).accordion({ heightStyle: "auto" });
|
||||
equalHeights( element, 95, 130 );
|
||||
});
|
||||
|
||||
test( "{ heightStyle: 'content' }", function() {
|
||||
var ac = $( "#navigation" ).accordion({ heightStyle: "content" });
|
||||
var sizes = ac.find( ".ui-accordion-content" ).map(function() {
|
||||
var element = $( "#navigation" ).accordion({ heightStyle: "content" });
|
||||
var sizes = element.find( ".ui-accordion-content" ).map(function() {
|
||||
return $( this ).height();
|
||||
}).get();
|
||||
ok( sizes[ 0 ] >= 70 && sizes[ 0 ] <= 105, "was " + sizes[ 0 ] );
|
||||
@ -190,8 +190,8 @@ test( "{ heightStyle: 'content' }", function() {
|
||||
|
||||
test( "{ heightStyle: 'fill' }", function() {
|
||||
$( "#navigationWrapper" ).height( 500 );
|
||||
var ac = $( "#navigation" ).accordion({ heightStyle: "fill" });
|
||||
equalHeights( ac, 446, 458 );
|
||||
var element = $( "#navigation" ).accordion({ heightStyle: "fill" });
|
||||
equalHeights( element, 446, 458 );
|
||||
});
|
||||
|
||||
test( "{ heightStyle: 'fill' } with sibling", function() {
|
||||
@ -203,8 +203,8 @@ test( "{ heightStyle: 'fill' } with sibling", function() {
|
||||
marginBottom: 30
|
||||
})
|
||||
.prependTo( "#navigationWrapper" );
|
||||
var ac = $( "#navigation" ).accordion({ heightStyle: "fill" });
|
||||
equalHeights( ac , 346, 358);
|
||||
var element = $( "#navigation" ).accordion({ heightStyle: "fill" });
|
||||
equalHeights( element , 346, 358);
|
||||
});
|
||||
|
||||
test( "{ heightStyle: 'fill' } with multiple siblings", function() {
|
||||
@ -231,36 +231,36 @@ test( "{ heightStyle: 'fill' } with multiple siblings", function() {
|
||||
marginBottom: 15
|
||||
})
|
||||
.prependTo( "#navigationWrapper" );
|
||||
var ac = $( "#navigation" ).accordion({ heightStyle: "fill" });
|
||||
equalHeights( ac, 296, 308 );
|
||||
var element = $( "#navigation" ).accordion({ heightStyle: "fill" });
|
||||
equalHeights( element, 296, 308 );
|
||||
});
|
||||
|
||||
test( "{ icons: false }", function() {
|
||||
var list = $( "#list1" );
|
||||
var element = $( "#list1" );
|
||||
function icons( on ) {
|
||||
same( list.find( "span.ui-icon").length, on ? 3 : 0 );
|
||||
same( list.hasClass( "ui-accordion-icons" ), on );
|
||||
same( element.find( "span.ui-icon").length, on ? 3 : 0 );
|
||||
same( element.hasClass( "ui-accordion-icons" ), on );
|
||||
}
|
||||
list.accordion();
|
||||
element.accordion();
|
||||
icons( true );
|
||||
list.accordion( "destroy" ).accordion({
|
||||
element.accordion( "destroy" ).accordion({
|
||||
icons: false
|
||||
});
|
||||
icons( false );
|
||||
list.accordion( "option", "icons", { header: "foo", activeHeader: "bar" } );
|
||||
element.accordion( "option", "icons", { header: "foo", activeHeader: "bar" } );
|
||||
icons( true );
|
||||
list.accordion( "option", "icons", false );
|
||||
element.accordion( "option", "icons", false );
|
||||
icons( false );
|
||||
});
|
||||
|
||||
test( "{ icons: hash }", function() {
|
||||
var list = $( "#list1" ).accordion({
|
||||
var element = $( "#list1" ).accordion({
|
||||
icons: { activeHeader: "a1", header: "h1" }
|
||||
});
|
||||
ok( list.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) );
|
||||
list.accordion( "option", "icons", { activeHeader: "a2", header: "h2" } );
|
||||
ok( !list.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) );
|
||||
ok( list.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a2" ) );
|
||||
ok( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) );
|
||||
element.accordion( "option", "icons", { activeHeader: "a2", header: "h2" } );
|
||||
ok( !element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a1" ) );
|
||||
ok( element.find( ".ui-accordion-header.ui-state-active span.ui-icon" ).hasClass( "a2" ) );
|
||||
});
|
||||
|
||||
}( jQuery ) );
|
||||
|
||||
@ -1,19 +1,25 @@
|
||||
/*
|
||||
* autocomplete_defaults.js
|
||||
*/
|
||||
commonWidgetTests( "autocomplete", {
|
||||
defaults: {
|
||||
appendTo: "body",
|
||||
autoFocus: false,
|
||||
delay: 300,
|
||||
disabled: false,
|
||||
minLength: 1,
|
||||
position: {
|
||||
my: "left top",
|
||||
at: "left bottom",
|
||||
collision: "none"
|
||||
},
|
||||
source: null,
|
||||
|
||||
var autocomplete_defaults = {
|
||||
appendTo: "body",
|
||||
autoFocus: false,
|
||||
delay: 300,
|
||||
disabled: false,
|
||||
minLength: 1,
|
||||
position: {
|
||||
my: "left top",
|
||||
at: "left bottom",
|
||||
collision: "none"
|
||||
},
|
||||
source: null
|
||||
};
|
||||
|
||||
commonWidgetTests('autocomplete', { defaults: autocomplete_defaults });
|
||||
// callbacks
|
||||
change: null,
|
||||
close: null,
|
||||
create: null,
|
||||
focus: null,
|
||||
open: null,
|
||||
response: null,
|
||||
search: null,
|
||||
select: null
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
/*
|
||||
* button_defaults.js
|
||||
*/
|
||||
commonWidgetTests( "button", {
|
||||
defaults: {
|
||||
disabled: null,
|
||||
icons: {
|
||||
primary: null,
|
||||
secondary: null
|
||||
},
|
||||
label: null,
|
||||
text: true,
|
||||
|
||||
var button_defaults = {
|
||||
disabled: null,
|
||||
text: true,
|
||||
label: null,
|
||||
icons: {
|
||||
primary: null,
|
||||
secondary: null
|
||||
// callbacks
|
||||
create: null
|
||||
}
|
||||
};
|
||||
|
||||
commonWidgetTests('button', { defaults: button_defaults });
|
||||
});
|
||||
|
||||
@ -1,35 +1,34 @@
|
||||
/*
|
||||
* dialog_defaults.js
|
||||
*/
|
||||
commonWidgetTests( "dialog", {
|
||||
defaults: {
|
||||
autoOpen: true,
|
||||
buttons: {},
|
||||
closeOnEscape: true,
|
||||
closeText: 'close',
|
||||
disabled: false,
|
||||
dialogClass: '',
|
||||
draggable: true,
|
||||
height: 'auto',
|
||||
hide: null,
|
||||
maxHeight: false,
|
||||
maxWidth: false,
|
||||
minHeight: 150,
|
||||
minWidth: 150,
|
||||
modal: false,
|
||||
position: {
|
||||
my: 'center',
|
||||
at: 'center',
|
||||
of: window,
|
||||
collision: 'fit',
|
||||
using: $.ui.dialog.prototype.options.position.using
|
||||
},
|
||||
resizable: true,
|
||||
show: null,
|
||||
stack: true,
|
||||
title: '',
|
||||
width: 300,
|
||||
zIndex: 1000,
|
||||
|
||||
var dialog_defaults = {
|
||||
autoOpen: true,
|
||||
buttons: {},
|
||||
closeOnEscape: true,
|
||||
closeText: 'close',
|
||||
disabled: false,
|
||||
dialogClass: '',
|
||||
draggable: true,
|
||||
height: 'auto',
|
||||
hide: null,
|
||||
maxHeight: false,
|
||||
maxWidth: false,
|
||||
minHeight: 150,
|
||||
minWidth: 150,
|
||||
modal: false,
|
||||
position: {
|
||||
my: 'center',
|
||||
at: 'center',
|
||||
of: window,
|
||||
collision: 'fit',
|
||||
using: $.ui.dialog.prototype.options.position.using
|
||||
},
|
||||
resizable: true,
|
||||
show: null,
|
||||
stack: true,
|
||||
title: '',
|
||||
width: 300,
|
||||
zIndex: 1000
|
||||
};
|
||||
|
||||
commonWidgetTests('dialog', { defaults: dialog_defaults });
|
||||
// callbacks
|
||||
create: null
|
||||
}
|
||||
});
|
||||
|
||||
@ -180,7 +180,7 @@ test("height", function() {
|
||||
expect(3);
|
||||
|
||||
el = $('<div></div>').dialog();
|
||||
equals(dlg().height(), dialog_defaults.minHeight, "default height");
|
||||
equals(dlg().height(), 150, "default height");
|
||||
el.remove();
|
||||
|
||||
el = $('<div></div>').dialog({ height: 237 });
|
||||
@ -431,7 +431,7 @@ test("width", function() {
|
||||
expect(3);
|
||||
|
||||
el = $('<div></div>').dialog();
|
||||
equals(dlg().width(), dialog_defaults.width, "default width");
|
||||
equals(dlg().width(), 300, "default width");
|
||||
el.remove();
|
||||
|
||||
el = $('<div></div>').dialog({width: 437 });
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
/*
|
||||
* menu_defaults.js
|
||||
*/
|
||||
commonWidgetTests( "menu", {
|
||||
defaults: {
|
||||
disabled: false,
|
||||
position: {
|
||||
my: "left top",
|
||||
at: "right top"
|
||||
},
|
||||
|
||||
var menu_defaults = {
|
||||
disabled: false,
|
||||
position: {
|
||||
my: "left top",
|
||||
at: "right top"
|
||||
// callbacks
|
||||
create: null
|
||||
}
|
||||
};
|
||||
|
||||
commonWidgetTests('menu', { defaults: menu_defaults });
|
||||
});
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
/*
|
||||
* progressbar_defaults.js
|
||||
*/
|
||||
commonWidgetTests( "progressbar", {
|
||||
defaults: {
|
||||
disabled: false,
|
||||
value: 0,
|
||||
max: 100,
|
||||
|
||||
var progressbar_defaults = {
|
||||
disabled: false,
|
||||
value: 0,
|
||||
max: 100
|
||||
};
|
||||
|
||||
commonWidgetTests('progressbar', { defaults: progressbar_defaults });
|
||||
//callbacks
|
||||
create: null
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,20 +1,19 @@
|
||||
/*
|
||||
* slider_defaults.js
|
||||
*/
|
||||
commonWidgetTests( "slider", {
|
||||
defaults: {
|
||||
animate: false,
|
||||
cancel: function() {},
|
||||
delay: 0,
|
||||
disabled: false,
|
||||
distance: 0,
|
||||
max: 100,
|
||||
min: 0,
|
||||
orientation: 'horizontal',
|
||||
range: false,
|
||||
step: 1,
|
||||
value: 0,
|
||||
values: null,
|
||||
|
||||
var slider_defaults = {
|
||||
animate: false,
|
||||
cancel: function() {},
|
||||
delay: 0,
|
||||
disabled: false,
|
||||
distance: 0,
|
||||
max: 100,
|
||||
min: 0,
|
||||
orientation: 'horizontal',
|
||||
range: false,
|
||||
step: 1,
|
||||
value: 0,
|
||||
values: null
|
||||
};
|
||||
|
||||
commonWidgetTests('slider', { defaults: slider_defaults });
|
||||
// callbacks
|
||||
create: null
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,16 +1,15 @@
|
||||
/*
|
||||
* spinner_defaults.js
|
||||
*/
|
||||
commonWidgetTests( "spinner", {
|
||||
defaults: {
|
||||
disabled: false,
|
||||
incremental: true,
|
||||
max: null,
|
||||
min: null,
|
||||
numberformat: null,
|
||||
page: 10,
|
||||
step: null,
|
||||
value: null,
|
||||
|
||||
var spinner_defaults = {
|
||||
disabled: false,
|
||||
incremental: true,
|
||||
max: null,
|
||||
min: null,
|
||||
numberformat: null,
|
||||
page: 10,
|
||||
step: null,
|
||||
value: null
|
||||
};
|
||||
|
||||
commonWidgetTests('spinner', { defaults: spinner_defaults });
|
||||
// callbacks
|
||||
create: null
|
||||
}
|
||||
});
|
||||
|
||||
@ -30,10 +30,57 @@
|
||||
function tabs_state( tabs ) {
|
||||
var expected = $.makeArray( arguments ).slice( 1 );
|
||||
var actual = tabs.find( ".ui-tabs-nav li" ).map(function() {
|
||||
return $( this ).hasClass( "ui-state-active" ) ? 1 : 0;
|
||||
var tab = $( this ),
|
||||
panel = $( $.ui.tabs.prototype._sanitizeSelector(
|
||||
"#" + tab.find( "a" ).attr( "aria-controls" ) ) ),
|
||||
tabIsActive = tab.hasClass( "ui-state-active" ),
|
||||
panelIsActive = panel.css( "display" ) !== "none";
|
||||
|
||||
if ( tabIsActive && panelIsActive ) {
|
||||
return 1;
|
||||
}
|
||||
if ( !tabIsActive && !panelIsActive ) {
|
||||
return 0;
|
||||
}
|
||||
return -1; // mixed state - invalid
|
||||
}).get();
|
||||
same( actual, expected );
|
||||
}
|
||||
|
||||
function tabs_disabled( tabs, state ) {
|
||||
var expected = $.map( new Array( tabs.find ( ".ui-tabs-nav li" ).length ), function( _, index ) {
|
||||
if ( typeof state === "boolean" ) {
|
||||
return state ? 1 : 0;
|
||||
} else {
|
||||
return $.inArray( index, state ) !== -1 ? 1 : 0;
|
||||
}
|
||||
});
|
||||
|
||||
var internalState = tabs.tabs( "option", "disabled" );
|
||||
if ( internalState === false ) {
|
||||
internalState = [];
|
||||
}
|
||||
if ( internalState === true ) {
|
||||
internalState = $.map( new Array( tabs.find( ".ui-tabs-nav li" ).length ), function( _, index ) {
|
||||
return index;
|
||||
});
|
||||
}
|
||||
|
||||
var actual = tabs.find( ".ui-tabs-nav li" ).map(function( index ) {
|
||||
var tab = $( this ),
|
||||
tabIsDisabled = tab.hasClass( "ui-state-disabled" );
|
||||
|
||||
if ( tabIsDisabled && $.inArray( index, internalState ) !== -1 ) {
|
||||
return 1;
|
||||
}
|
||||
if ( !tabIsDisabled && $.inArray( index, internalState ) === -1 ) {
|
||||
return 0;
|
||||
}
|
||||
return -1; // mixed state - invalid
|
||||
}).get();
|
||||
same( tabs.tabs( "option", "disabled" ), state );
|
||||
same( actual, expected );
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
// disable this stale testsuite for testswarm only
|
||||
|
||||
@ -26,6 +26,22 @@ $.each({
|
||||
});
|
||||
});
|
||||
|
||||
// #5893 - Sublist in the tab list are considered as tab
|
||||
test( "nested list", function() {
|
||||
expect( 1 );
|
||||
|
||||
var element = $( "#tabs6" ).tabs();
|
||||
equals( element.data( "tabs" ).anchors.length, 2, "should contain 2 tab" );
|
||||
});
|
||||
|
||||
test( "disconnected from DOM", function() {
|
||||
expect( 2 );
|
||||
|
||||
var element = $( "#tabs1" ).remove().tabs();
|
||||
equals( element.find( ".ui-tabs-nav" ).length, 1, "should initialize nav" );
|
||||
equals( element.find( ".ui-tabs-panel" ).length, 3, "should initialize panels" );
|
||||
});
|
||||
|
||||
test( "aria-controls", function() {
|
||||
expect( 7 );
|
||||
var element = $( "#tabs1" ).tabs(),
|
||||
|
||||
@ -1,13 +1,16 @@
|
||||
commonWidgetTests( "tabs", {
|
||||
defaults: {
|
||||
activate: null,
|
||||
active: null,
|
||||
beforeLoad: null,
|
||||
beforeActivate: null,
|
||||
collapsible: false,
|
||||
disabled: false,
|
||||
event: "click",
|
||||
fx: null,
|
||||
|
||||
// callbacks
|
||||
activate: null,
|
||||
beforeActivate: null,
|
||||
beforeLoad: null,
|
||||
create: null,
|
||||
load: null
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,26 +1,29 @@
|
||||
commonWidgetTests( "tabs", {
|
||||
defaults: {
|
||||
activate: null,
|
||||
active: null,
|
||||
add: null,
|
||||
ajaxOptions: null,
|
||||
beforeLoad: null,
|
||||
beforeActivate: null,
|
||||
cache: false,
|
||||
collapsible: false,
|
||||
cookie: null,
|
||||
disable: null,
|
||||
disabled: false,
|
||||
enable: null,
|
||||
event: "click",
|
||||
fx: null,
|
||||
idPrefix: "ui-tabs-",
|
||||
load: null,
|
||||
panelTemplate: "<div></div>",
|
||||
spinner: "<em>Loading…</em>",
|
||||
tabTemplate: "<li><a href='#{href}'><span>#{label}</span></a></li>",
|
||||
|
||||
// callbacks
|
||||
activate: null,
|
||||
add: null,
|
||||
beforeActivate: null,
|
||||
beforeLoad: null,
|
||||
create: null,
|
||||
disable: null,
|
||||
enable: null,
|
||||
load: null,
|
||||
remove: null,
|
||||
select: null,
|
||||
show: null,
|
||||
spinner: "<em>Loading…</em>",
|
||||
tabTemplate: "<li><a href='#{href}'><span>#{label}</span></a></li>"
|
||||
show: null
|
||||
}
|
||||
});
|
||||
|
||||
@ -29,10 +29,57 @@
|
||||
function tabs_state( tabs ) {
|
||||
var expected = $.makeArray( arguments ).slice( 1 );
|
||||
var actual = tabs.find( ".ui-tabs-nav li" ).map(function() {
|
||||
return $( this ).hasClass( "ui-state-active" ) ? 1 : 0;
|
||||
var tab = $( this ),
|
||||
panel = $( $.ui.tabs.prototype._sanitizeSelector(
|
||||
"#" + tab.find( "a" ).attr( "aria-controls" ) ) ),
|
||||
tabIsActive = tab.hasClass( "ui-state-active" ),
|
||||
panelIsActive = panel.css( "display" ) !== "none";
|
||||
|
||||
if ( tabIsActive && panelIsActive ) {
|
||||
return 1;
|
||||
}
|
||||
if ( !tabIsActive && !panelIsActive ) {
|
||||
return 0;
|
||||
}
|
||||
return -1; // mixed state - invalid
|
||||
}).get();
|
||||
same( actual, expected );
|
||||
}
|
||||
|
||||
function tabs_disabled( tabs, state ) {
|
||||
var expected = $.map( new Array( tabs.find ( ".ui-tabs-nav li" ).length ), function( _, index ) {
|
||||
if ( typeof state === "boolean" ) {
|
||||
return state ? 1 : 0;
|
||||
} else {
|
||||
return $.inArray( index, state ) !== -1 ? 1 : 0;
|
||||
}
|
||||
});
|
||||
|
||||
var internalState = tabs.tabs( "option", "disabled" );
|
||||
if ( internalState === false ) {
|
||||
internalState = [];
|
||||
}
|
||||
if ( internalState === true ) {
|
||||
internalState = $.map( new Array( tabs.find( ".ui-tabs-nav li" ).length ), function( _, index ) {
|
||||
return index;
|
||||
});
|
||||
}
|
||||
|
||||
var actual = tabs.find( ".ui-tabs-nav li" ).map(function( index ) {
|
||||
var tab = $( this ),
|
||||
tabIsDisabled = tab.hasClass( "ui-state-disabled" );
|
||||
|
||||
if ( tabIsDisabled && $.inArray( index, internalState ) !== -1 ) {
|
||||
return 1;
|
||||
}
|
||||
if ( !tabIsDisabled && $.inArray( index, internalState ) === -1 ) {
|
||||
return 0;
|
||||
}
|
||||
return -1; // mixed state - invalid
|
||||
}).get();
|
||||
same( tabs.tabs( "option", "disabled" ), state );
|
||||
same( actual, expected );
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
// disable this stale testsuite for testswarm only
|
||||
|
||||
@ -187,25 +187,6 @@ test('disable', function() {
|
||||
equals(uiObj.index, 1, 'contain index');
|
||||
});
|
||||
|
||||
test('add', function() {
|
||||
|
||||
// TODO move to methods, not at all event related...
|
||||
|
||||
var el = $('<div id="tabs"><ul></ul></div>').tabs();
|
||||
equals(el.tabs('option', 'selected'), -1, 'Initially empty, no selected tab');
|
||||
|
||||
el.tabs('add', '#test1', 'Test 1');
|
||||
equals(el.tabs('option', 'selected'), 0, 'First tab added should be auto selected');
|
||||
|
||||
el.tabs('add', '#test2', 'Test 2');
|
||||
equals(el.tabs('option', 'selected'), 0, 'Second tab added should not be auto selected');
|
||||
|
||||
});
|
||||
|
||||
test('remove', function() {
|
||||
ok(false, "missing test - untested code is broken code.");
|
||||
});
|
||||
|
||||
test('show', function() {
|
||||
expect(5);
|
||||
|
||||
@ -247,42 +228,108 @@ test('select', function() {
|
||||
equals( evenObj.originalEvent.type, "click", "select triggered by click" );
|
||||
});
|
||||
|
||||
module("tabs (deprecated): methods");
|
||||
module( "tabs (deprecated): methods" );
|
||||
|
||||
test('add', function() {
|
||||
expect(4);
|
||||
test( "add", function() {
|
||||
expect( 27 );
|
||||
|
||||
el = $('#tabs1').tabs();
|
||||
el.tabs('add', '#new', 'New');
|
||||
var element = $( "#tabs1" ).tabs();
|
||||
tabs_state( element, 1, 0, 0 );
|
||||
|
||||
var added = $('li:last', el).simulate('mouseover');
|
||||
ok(added.is('.ui-state-hover'), 'should add mouseover handler to added tab');
|
||||
added.simulate('mouseout');
|
||||
var other = $('li:first', el).simulate('mouseover');
|
||||
ok(other.is('.ui-state-hover'), 'should not remove mouseover handler from existing tab');
|
||||
other.simulate('mouseout');
|
||||
// add without index
|
||||
element.one( "tabsadd", function( event, ui ) {
|
||||
equal( ui.index, 3, "ui.index" );
|
||||
equal( $( ui.tab ).text(), "New", "ui.tab" );
|
||||
equal( ui.panel.id, "new", "ui.panel" );
|
||||
});
|
||||
element.tabs( "add", "#new", "New" );
|
||||
tabs_state( element, 1, 0, 0, 0 );
|
||||
var tab = element.find( ".ui-tabs-nav li" ).last(),
|
||||
anchor = tab.find( "a" );
|
||||
equals( tab.text(), "New", "label" );
|
||||
equals( anchor.attr( "href" ), "#new", "href" );
|
||||
equals( anchor.attr( "aria-controls" ), "new", "aria-controls" );
|
||||
ok( !tab.hasClass( "ui-state-hover" ), "not hovered" );
|
||||
anchor.simulate( "mouseover" );
|
||||
ok( tab.hasClass( "ui-state-hover" ), "hovered" );
|
||||
anchor.simulate( "click" );
|
||||
tabs_state( element, 0, 0, 0, 1 );
|
||||
|
||||
equals($('a', added).attr('href'), '#new', 'should not expand href to full url of current page');
|
||||
// add remote tab with index
|
||||
element.one( "tabsadd", function( event, ui ) {
|
||||
equal( ui.index, 1, "ui.index" );
|
||||
equal( $( ui.tab ).text(), "New Remote", "ui.tab" );
|
||||
equal( ui.panel.id, $( ui.tab ).attr( "aria-controls" ), "ui.panel" );
|
||||
});
|
||||
element.tabs( "add", "data/test.html", "New Remote", 1 );
|
||||
tabs_state( element, 0, 0, 0, 0, 1 );
|
||||
tab = element.find( ".ui-tabs-nav li" ).eq( 1 );
|
||||
anchor = tab.find( "a" );
|
||||
equals( tab.text(), "New Remote", "label" );
|
||||
equals( anchor.attr( "href" ), "data/test.html", "href" );
|
||||
ok( /^ui-tabs-\d+$/.test( anchor.attr( "aria-controls" ) ), "aria controls" );
|
||||
ok( !tab.hasClass( "ui-state-hover" ), "not hovered" );
|
||||
anchor.simulate( "mouseover" );
|
||||
ok( tab.hasClass( "ui-state-hover" ), "hovered" );
|
||||
anchor.simulate( "click" );
|
||||
tabs_state( element, 0, 1, 0, 0, 0 );
|
||||
|
||||
ok(false, "missing test - untested code is broken code.");
|
||||
// add to empty tab set
|
||||
element = $( "<div><ul></ul></div>" ).tabs();
|
||||
equals( element.tabs( "option", "active" ), false, "active: false on init" );
|
||||
element.one( "tabsadd", function( event, ui ) {
|
||||
equal( ui.index, 0, "ui.index" );
|
||||
equal( $( ui.tab ).text(), "First", "ui.tab" );
|
||||
equal( ui.panel.id, "first", "ui.panel" );
|
||||
});
|
||||
element.tabs( "add", "#first", "First" );
|
||||
tabs_state( element, 1 );
|
||||
equals( element.tabs( "option", "active" ), 0, "active: 0 after add" );
|
||||
});
|
||||
|
||||
test('remove', function() {
|
||||
expect(4);
|
||||
test( "#5069 - ui.tabs.add creates two tab panels when using a full URL", function() {
|
||||
expect( 2 );
|
||||
|
||||
el = $('#tabs1').tabs();
|
||||
var element = $( "#tabs2" ).tabs();
|
||||
equals( element.children( "div" ).length, element.find( ".ui-tabs-nav li" ).length );
|
||||
element.tabs( "add", "/new", "New" );
|
||||
equals( element.children( "div" ).length, element.find( ".ui-tabs-nav li" ).length );
|
||||
});
|
||||
|
||||
el.tabs('remove', 0);
|
||||
equals(el.tabs('length'), 2, 'remove tab');
|
||||
equals($('li a[href$="fragment-1"]', el).length, 0, 'remove associated list item');
|
||||
equals($('#fragment-1').length, 0, 'remove associated panel');
|
||||
test( "remove", function() {
|
||||
expect( 17 );
|
||||
|
||||
// TODO delete tab -> focus tab to right
|
||||
// TODO delete last tab -> focus tab to left
|
||||
var element = $( "#tabs1" ).tabs({ active: 1 });
|
||||
tabs_state( element, 0, 1, 0 );
|
||||
|
||||
el.tabs('select', 1);
|
||||
el.tabs('remove', 1);
|
||||
equals(el.tabs('option', 'selected'), 0, 'update selected property');
|
||||
element.one( "tabsremove", function( event, ui ) {
|
||||
equal( ui.index, -1, "ui.index" );
|
||||
equal( $( ui.tab ).text(), "2", "ui.tab" );
|
||||
equal( ui.panel.id, "fragment-2", "ui.panel" );
|
||||
});
|
||||
element.tabs( "remove", 1 );
|
||||
tabs_state( element, 0, 1 );
|
||||
equals( element.tabs( "option", "active" ), 1 );
|
||||
equals( element.find( ".ui-tabs-nav li a[href$='fragment-2']" ).length, 0,
|
||||
"remove correct list item" );
|
||||
equals( element.find( "#fragment-2" ).length, 0, "remove correct panel" );
|
||||
|
||||
element.one( "tabsremove", function( event, ui ) {
|
||||
equal( ui.index, -1, "ui.index" );
|
||||
equal( $( ui.tab ).text(), "3", "ui.tab" );
|
||||
equal( ui.panel.id, "fragment-3", "ui.panel" );
|
||||
});
|
||||
element.tabs( "remove", 1 );
|
||||
tabs_state( element, 1 );
|
||||
equals( element.tabs( "option", "active"), 0 );
|
||||
|
||||
element.one( "tabsremove", function( event, ui ) {
|
||||
equal( ui.index, -1, "ui.index" );
|
||||
equal( $( ui.tab ).text(), "1", "ui.tab" );
|
||||
equal( ui.panel.id, "fragment-1", "ui.panel" );
|
||||
});
|
||||
element.tabs( "remove", 0 );
|
||||
equals( element.tabs( "option", "active" ), false );
|
||||
});
|
||||
|
||||
test('select', function() {
|
||||
@ -314,17 +361,6 @@ test('select', function() {
|
||||
equals(el.tabs('option', 'active'), 1, 'should select tab by id');
|
||||
});
|
||||
|
||||
|
||||
test('#5069 - ui.tabs.add creates two tab panels when using a full URL', function() {
|
||||
// http://dev.jqueryui.com/ticket/5069
|
||||
expect(2);
|
||||
|
||||
el = $('#tabs2').tabs();
|
||||
equals(el.children('div').length, el.find('> ul > li').length, 'After creation, number of panels should be equal to number of tabs');
|
||||
el.tabs('add', '/ajax_html_echo', 'Test');
|
||||
equals(el.children('div').length, el.find('> ul > li').length, 'After add, number of panels should be equal to number of tabs');
|
||||
});
|
||||
|
||||
test( "length", function() {
|
||||
expect( 2 );
|
||||
|
||||
|
||||
@ -1,61 +1,6 @@
|
||||
/*
|
||||
* tabs_methods.js
|
||||
*/
|
||||
(function($) {
|
||||
(function( $ ) {
|
||||
|
||||
module("tabs: methods");
|
||||
|
||||
test('init', function() {
|
||||
expect(9);
|
||||
|
||||
el = $('#tabs1').tabs();
|
||||
|
||||
ok(true, '.tabs() called on element');
|
||||
ok( el.is('.ui-tabs.ui-widget.ui-widget-content.ui-corner-all'), 'attach classes to container');
|
||||
ok( $('ul', el).is('.ui-tabs-nav.ui-helper-reset.ui-helper-clearfix.ui-widget-header.ui-corner-all'), 'attach classes to list' );
|
||||
ok( $('div:eq(0)', el).is('.ui-tabs-panel.ui-widget-content.ui-corner-bottom'), 'attach classes to panel' );
|
||||
ok( $('li:eq(0)', el).is('.ui-tabs-active.ui-state-active.ui-corner-top'), 'attach classes to active li');
|
||||
ok( $('li:eq(1)', el).is('.ui-state-default.ui-corner-top'), 'attach classes to inactive li');
|
||||
equals( el.tabs('option', 'active'), 0, 'active option set' );
|
||||
equals( $('li', el).index( $('li.ui-tabs-active', el) ), 0, 'second tab active');
|
||||
equals( $('div', el).index( $('div:hidden', '#tabs1') ), 1, 'second panel should be hidden' );
|
||||
});
|
||||
|
||||
test('init with hash', function() {
|
||||
expect(5);
|
||||
|
||||
//set a hash in the url
|
||||
location.hash = '#fragment-2';
|
||||
|
||||
//selection of tab with divs ordered differently than list
|
||||
el = $('#tabs1').tabs();
|
||||
|
||||
equals(el.tabs('option', 'active'), 1, 'second tab should be active');
|
||||
|
||||
ok(!$('#tabs1 ul li:eq(0)').is('.ui-tabs-active.ui-state-active'), 'first tab should not be selected nor active');
|
||||
ok($('#tabs1 div:eq(0)').is(':hidden'), 'first div for first tab should be hidden');
|
||||
|
||||
ok($('#tabs1 ul li:eq(1)').is('.ui-tabs-active.ui-state-active'), 'second tab should be selected and active');
|
||||
ok(!$('#tabs1 div:eq(1)').is(':hidden'), 'second div for second tab should not be hidden');
|
||||
});
|
||||
|
||||
test('init mismatched order with hash', function() {
|
||||
expect(5);
|
||||
|
||||
//set a hash in the url
|
||||
location.hash = '#tabs7-2';
|
||||
|
||||
//selection of tab with divs ordered differently than list
|
||||
el = $('#tabs7').tabs();
|
||||
|
||||
equals(el.tabs('option', 'active'), 1, 'second tab should be active');
|
||||
|
||||
ok(!$('#tabs7-list li:eq(0)').is('.ui-tabs-active.ui-state-active'), 'first tab should not be selected nor active');
|
||||
ok($('#tabs7 div:eq(1)').is(':hidden'), 'second div for first tab should be hidden');
|
||||
|
||||
ok($('#tabs7-list li:eq(1)').is('.ui-tabs-active.ui-state-active'), 'second tab should be selected and active');
|
||||
ok(!$('#tabs7 div:eq(0)').is(':hidden'), 'first div for second tab should not be hidden');
|
||||
});
|
||||
module( "tabs: methods" );
|
||||
|
||||
test('destroy', function() {
|
||||
expect(6);
|
||||
@ -72,94 +17,145 @@ test('destroy', function() {
|
||||
ok( $('li:eq(2)', el).is(':not(.ui-state-hover, .ui-state-focus)'), 'remove classes from mouseovered or focused li');
|
||||
});
|
||||
|
||||
test('enable', function() {
|
||||
expect(8);
|
||||
test( "enable", function() {
|
||||
expect( 8 );
|
||||
|
||||
el = $('#tabs1').tabs({ disabled: [ 0, 1 ] });
|
||||
el.tabs("enable", 1);
|
||||
ok( $('li:eq(1)', el).is(':not(.ui-state-disabled)'), 'remove class from li');
|
||||
same(el.tabs('option', 'disabled'), [ 0 ], 'update property');
|
||||
|
||||
// enable all tabs
|
||||
el.tabs({ disabled: [ 0, 1 ] });
|
||||
el.tabs("enable");
|
||||
ok( !$('li.ui-state-disabled', el).length, 'enable all');
|
||||
same(el.tabs('option', 'disabled'), false, 'update property');
|
||||
var element = $( "#tabs1" ).tabs({ disabled: true });
|
||||
tabs_disabled( element, true );
|
||||
element.tabs( "enable" );
|
||||
tabs_disabled( element, false );
|
||||
element.tabs( "destroy" );
|
||||
|
||||
el.tabs('destroy');
|
||||
// enable all tabs one by one
|
||||
el.tabs({ disabled: [ 1, 2 ] });
|
||||
el.tabs("enable", 1);
|
||||
ok( $('li:eq(1)', el).is(':not(.ui-state-disabled)'), 'remove class from li');
|
||||
same(el.tabs('option', 'disabled'), [ 2 ], 'update property');
|
||||
el.tabs("enable", 2);
|
||||
ok( $('li:eq(2)', el).is(':not(.ui-state-disabled)'), 'remove class from li');
|
||||
same( el.tabs('option', 'disabled'), false, 'set to false');
|
||||
element.tabs({ disabled: [ 0, 1 ] });
|
||||
tabs_disabled( element, [ 0, 1 ] );
|
||||
element.tabs( "enable" );
|
||||
tabs_disabled( element, false );
|
||||
});
|
||||
|
||||
test('disable', function() {
|
||||
expect(12);
|
||||
test( "enable( index )", function() {
|
||||
expect( 10 );
|
||||
|
||||
// normal
|
||||
el = $('#tabs1').tabs();
|
||||
el.tabs('disable', 1);
|
||||
ok( $('li:eq(1)', el).is('.ui-state-disabled'), 'add class to li');
|
||||
same(el.tabs('option', 'disabled'), [ 1 ], 'update disabled property');
|
||||
|
||||
// disable selected
|
||||
el.tabs('disable', 0);
|
||||
ok( $('li:eq(0)', el).is('.ui-state-disabled'), 'add class to selected li');
|
||||
same(el.tabs('option', 'disabled'), [ 0, 1 ], 'update disabled property');
|
||||
|
||||
// disable all tabs
|
||||
el.tabs('disable');
|
||||
same( $('li.ui-state-disabled', el).length, 3, 'disable all');
|
||||
same(el.tabs('option', 'disabled'), true, 'set to true');
|
||||
|
||||
el.tabs("destroy");
|
||||
// disable all tabs one by one
|
||||
el.tabs();
|
||||
el.tabs('disable', 0);
|
||||
ok( $('li:eq(0)', el).is('.ui-state-disabled'), 'add class to li');
|
||||
same(el.tabs('option', 'disabled'), [ 0 ], 'update disabled property');
|
||||
el.tabs('disable', 1);
|
||||
ok( $('li:eq(1)', el).is('.ui-state-disabled'), 'add class to li');
|
||||
same(el.tabs('option', 'disabled'), [ 0, 1 ], 'update disabled property');
|
||||
el.tabs('disable', 2);
|
||||
ok( $('li:eq(2)', el).is('.ui-state-disabled'), 'add class to li');
|
||||
same(el.tabs('option', 'disabled'), true, 'set to true');
|
||||
var element = $( "#tabs1" ).tabs({ disabled: true });
|
||||
tabs_disabled( element, true );
|
||||
// fully disabled -> partially disabled
|
||||
element.tabs( "enable", 1 );
|
||||
tabs_disabled( element, [ 0, 2 ] );
|
||||
// partially disabled -> partially disabled
|
||||
element.tabs( "enable", 2 );
|
||||
tabs_disabled( element, [ 0 ] );
|
||||
// already enabled tab, no change
|
||||
element.tabs( "enable", 2 );
|
||||
tabs_disabled( element, [ 0 ] );
|
||||
// partially disabled -> fully enabled
|
||||
element.tabs( "enable", 0 );
|
||||
tabs_disabled( element, false );
|
||||
});
|
||||
|
||||
test('refresh', function() {
|
||||
expect(5);
|
||||
test( "disable", function() {
|
||||
expect( 8 );
|
||||
|
||||
var el = $('<div id="tabs"><ul></ul></div>').tabs(),
|
||||
ul = el.find('ul');
|
||||
var element = $( "#tabs1" ).tabs({ disabled: false });
|
||||
tabs_disabled( element, false );
|
||||
element.tabs( "disable" );
|
||||
tabs_disabled( element, true );
|
||||
element.tabs( "destroy" );
|
||||
|
||||
equals(el.tabs('option', 'active'), false, 'Initially empty, no active tab');
|
||||
element.tabs({ disabled: [ 0, 1 ] });
|
||||
tabs_disabled( element, [ 0, 1 ] );
|
||||
element.tabs( "disable" );
|
||||
tabs_disabled( element, true );
|
||||
});
|
||||
|
||||
ul.append('<li><a href="data/test.html">Test 1</a></li>');
|
||||
el.tabs('refresh');
|
||||
equals( el.find('.ui-tabs-panel').length, 1, 'Panel created after refresh');
|
||||
test( "disable( index )", function() {
|
||||
expect( 10 );
|
||||
|
||||
ul.find('li').remove();
|
||||
el.tabs('refresh');
|
||||
equals( el.find('.ui-tabs-panel').length, 0, 'Panel removed after refresh');
|
||||
var element = $( "#tabs1" ).tabs({ disabled: false });
|
||||
tabs_disabled( element, false );
|
||||
// fully enabled -> partially disabled
|
||||
element.tabs( "disable", 1 );
|
||||
tabs_disabled( element, [ 1 ] );
|
||||
// partially disabled -> partially disabled
|
||||
element.tabs( "disable", 2 );
|
||||
tabs_disabled( element, [ 1, 2 ] );
|
||||
// already disabled tab, no change
|
||||
element.tabs( "disable", 2 );
|
||||
tabs_disabled( element, [ 1, 2 ] );
|
||||
// partially disabled -> fully disabled
|
||||
element.tabs( "disable", 0 );
|
||||
tabs_disabled( element, true );
|
||||
});
|
||||
|
||||
ul.append('<li><a href="#test1">Test 1</a></li>');
|
||||
$('<div id="test1">Test Panel 1</div>').insertAfter( ul );
|
||||
el.tabs('refresh');
|
||||
el.tabs('option', 'active', 0);
|
||||
equals( el.tabs('option', 'active'), 0, 'First tab added should be auto active');
|
||||
test( "refersh", function() {
|
||||
expect( 27 );
|
||||
|
||||
ul.append('<li><a href="#test2">Test 2</a></li>');
|
||||
$('<div id="test2">Test Panel 2</div>').insertAfter( ul );
|
||||
el.tabs('refresh');
|
||||
equals( el.tabs('option', 'active'), 0, 'Second tab added should not be auto active');
|
||||
var element = $( "#tabs1" ).tabs();
|
||||
tabs_state( element, 1, 0, 0 );
|
||||
tabs_disabled( element, false );
|
||||
|
||||
// disable tab via markup
|
||||
element.find( ".ui-tabs-nav li" ).eq( 1 ).addClass( "ui-state-disabled" );
|
||||
element.tabs( "refresh" );
|
||||
tabs_state( element, 1, 0, 0 );
|
||||
tabs_disabled( element, [ 1 ] );
|
||||
|
||||
// add remote tab
|
||||
element.find( ".ui-tabs-nav" ).append( "<li id='newTab'><a href='data/test.html'>new</a></li>" );
|
||||
element.tabs( "refresh" );
|
||||
tabs_state( element, 1, 0, 0, 0 );
|
||||
tabs_disabled( element, [ 1 ] );
|
||||
equals( element.find( "#" + $( "#newTab a" ).attr( "aria-controls" ) ).length, 1,
|
||||
"panel added for remote tab" );
|
||||
|
||||
// remove all tabs
|
||||
element.find( ".ui-tabs-nav li, .ui-tabs-panel" ).remove();
|
||||
element.tabs( "refresh" );
|
||||
tabs_state( element );
|
||||
equals( element.tabs( "option", "active" ), false, "no active tab" );
|
||||
|
||||
// add tabs
|
||||
element.find( ".ui-tabs-nav" )
|
||||
.append( "<li class='ui-state-disabled'><a href='#newTab2'>new 2</a></li>" )
|
||||
.append( "<li><a href='#newTab3'>new 3</a></li>" )
|
||||
.append( "<li><a href='#newTab4'>new 4</a></li>" )
|
||||
.append( "<li><a href='#newTab5'>new 5</a></li>" );
|
||||
element
|
||||
.append( "<div id='newTab2'>new 2</div>" )
|
||||
.append( "<div id='newTab3'>new 3</div>" )
|
||||
.append( "<div id='newTab4'>new 4</div>" )
|
||||
.append( "<div id='newTab5'>new 5</div>" );
|
||||
element.tabs( "refresh" );
|
||||
tabs_state( element, 0, 0, 0, 0 );
|
||||
tabs_disabled( element, [ 0 ] );
|
||||
|
||||
// activate third tab
|
||||
element.tabs( "option", "active", 2 );
|
||||
tabs_state( element, 0, 0, 1, 0 );
|
||||
tabs_disabled( element, [ 0 ] );
|
||||
|
||||
// remove fourth tab, third tab should stay active
|
||||
element.find( ".ui-tabs-nav li" ).eq( 3 ).remove();
|
||||
element.find( ".ui-tabs-panel" ).eq( 3 ).remove();
|
||||
element.tabs( "refresh" );
|
||||
tabs_state( element, 0, 0, 1 );
|
||||
tabs_disabled( element, [ 0 ] );
|
||||
|
||||
// remove third (active) tab, second tab should become active
|
||||
element.find( ".ui-tabs-nav li" ).eq( 2 ).remove();
|
||||
element.find( ".ui-tabs-panel" ).eq( 2 ).remove();
|
||||
element.tabs( "refresh" );
|
||||
tabs_state( element, 0, 1 );
|
||||
tabs_disabled( element, [ 0 ] );
|
||||
|
||||
// remove first tab, previously active tab (now first) should stay active
|
||||
element.find( ".ui-tabs-nav li" ).eq( 0 ).remove();
|
||||
element.find( ".ui-tabs-panel" ).eq( 0 ).remove();
|
||||
element.tabs( "refresh" );
|
||||
tabs_state( element, 1 );
|
||||
tabs_disabled( element, false );
|
||||
});
|
||||
|
||||
test('load', function() {
|
||||
ok(false, "missing test - untested code is broken code.");
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
}( jQuery ) );
|
||||
|
||||
@ -10,10 +10,11 @@ test( "{ active: default }", function() {
|
||||
tabs_state( element, 1, 0, 0 );
|
||||
element.tabs( "destroy" );
|
||||
|
||||
window.location.hash = "#fragment-3";
|
||||
location.hash = "#fragment-3";
|
||||
element = $( "#tabs1" ).tabs();
|
||||
equals( element.tabs( "option", "active" ), 2, "should be 2 based on URL" );
|
||||
tabs_state( element, 0, 0, 1 );
|
||||
element.tabs( "destroy" );
|
||||
});
|
||||
|
||||
test( "{ active: false }", function() {
|
||||
@ -83,6 +84,17 @@ if ( $.uiBackCompat === false ) {
|
||||
});
|
||||
}
|
||||
|
||||
test( "active - mismatched tab/panel order", function() {
|
||||
expect( 3 );
|
||||
|
||||
location.hash = "#tabs7-2";
|
||||
var element = $( "#tabs7" ).tabs();
|
||||
equals( element.tabs( "option", "active" ), 1, "should be 1 based on URL" );
|
||||
tabs_state( element, 0, 1 );
|
||||
element.tabs( "option", "active", 0 );
|
||||
tabs_state( element, 1, 0 );
|
||||
});
|
||||
|
||||
test( "{ collapsible: false }", function() {
|
||||
expect( 4 );
|
||||
|
||||
|
||||
@ -5,39 +5,6 @@
|
||||
|
||||
module("tabs: tickets");
|
||||
|
||||
test('#2715 - id containing colon', function() {
|
||||
// http://dev.jqueryui.com/ticket/2715
|
||||
expect(4);
|
||||
|
||||
el = $('#tabs2').tabs();
|
||||
ok( $('div.ui-tabs-panel:eq(0)', '#tabs2').is(':visible'), 'first panel should be visible' );
|
||||
ok( $('div.ui-tabs-panel:eq(1)', '#tabs2').is(':hidden'), 'second panel should be hidden' );
|
||||
|
||||
el.tabs('option', 'active', 1).tabs('option', 'active', 0);
|
||||
ok( $('div.ui-tabs-panel:eq(0)', '#tabs2').is(':visible'), 'first panel should be visible' );
|
||||
ok( $('div.ui-tabs-panel:eq(1)', '#tabs2').is(':hidden'), 'second panel should be hidden' );
|
||||
|
||||
});
|
||||
|
||||
test('#???? - panel containing inline style', function() {
|
||||
expect(3);
|
||||
|
||||
var inlineStyle = function(property) {
|
||||
return $('#inline-style')[0].style[property];
|
||||
};
|
||||
var expected = inlineStyle('height');
|
||||
|
||||
el = $('#tabs2').tabs();
|
||||
equals(inlineStyle('height'), expected, 'init should not remove inline style');
|
||||
|
||||
el.tabs('option', 'active', 1);
|
||||
equals(inlineStyle('height'), expected, 'show tab should not remove inline style');
|
||||
|
||||
el.tabs('option', 'active', 0);
|
||||
equals(inlineStyle('height'), expected, 'hide tab should not remove inline style');
|
||||
|
||||
});
|
||||
|
||||
test('#3627 - Ajax tab with url containing a fragment identifier fails to load', function() {
|
||||
// http://dev.jqueryui.com/ticket/3627
|
||||
expect(1);
|
||||
@ -67,33 +34,4 @@ test('#4033 - IE expands hash to full url and misinterprets tab as ajax', functi
|
||||
equals($('a', el).attr('aria-controls'), 'tab', 'aria-contorls attribute is correct');
|
||||
});
|
||||
|
||||
test('#5893 - Sublist in the tab list are considered as tab', function() {
|
||||
// http://dev.jqueryui.com/ticket/5893
|
||||
expect(1);
|
||||
|
||||
el = $('#tabs6').tabs();
|
||||
equals(el.data("tabs").anchors.length, 2, 'should contain 2 tab');
|
||||
|
||||
});
|
||||
|
||||
test('#6710 - selectors are global', function() {
|
||||
// http://bugs.jqueryui.com/ticket/6710
|
||||
expect(1);
|
||||
|
||||
var container = $('\
|
||||
<div>\
|
||||
<div id="tabs_6710">\
|
||||
<ul>\
|
||||
<li><a href="#tabs-1_6710">Nunc tincidunt</a></li>\
|
||||
<li><a href="#tabs-2_6710">Proin dolor</a></li>\
|
||||
</ul>\
|
||||
<div id="tabs-1_6710"> <p>first</p> </div>\
|
||||
<div id="tabs-2_6710"> <p>second</p>\
|
||||
</div>\
|
||||
</div>');
|
||||
container.find('#tabs_6710').tabs();
|
||||
ok( container.find('#tabs-2_6710').is(':hidden'), 'should find panels and add corresponding classes' );
|
||||
});
|
||||
|
||||
|
||||
})(jQuery);
|
||||
|
||||
@ -1,16 +1,15 @@
|
||||
/*
|
||||
* tooltip_defaults.js
|
||||
*/
|
||||
commonWidgetTests( "tooltip", {
|
||||
defaults: {
|
||||
disabled: false,
|
||||
items: "[title]",
|
||||
content: $.ui.tooltip.prototype.options.content,
|
||||
position: {
|
||||
my: "left center",
|
||||
at: "right center",
|
||||
offset: "15 0"
|
||||
},
|
||||
|
||||
var tooltip_defaults = {
|
||||
disabled: false,
|
||||
items: "[title]",
|
||||
content: $.ui.tooltip.prototype.options.content,
|
||||
position: {
|
||||
my: "left center",
|
||||
at: "right center",
|
||||
offset: "15 0"
|
||||
// callbacks
|
||||
create: null
|
||||
}
|
||||
};
|
||||
|
||||
commonWidgetTests('tooltip', { defaults: tooltip_defaults });
|
||||
});
|
||||
|
||||
@ -202,6 +202,7 @@ test( "merge multiple option arguments", function() {
|
||||
$.widget( "ui.testWidget", {
|
||||
_create: function() {
|
||||
same( this.options, {
|
||||
create: null,
|
||||
disabled: false,
|
||||
option1: "value1",
|
||||
option2: "value2",
|
||||
@ -249,6 +250,7 @@ test( "._getCreateOptions()", function() {
|
||||
},
|
||||
_create: function() {
|
||||
same( this.options, {
|
||||
create: null,
|
||||
disabled: false,
|
||||
option1: "override1",
|
||||
option2: "value2",
|
||||
@ -418,6 +420,7 @@ test( ".option() - getter", function() {
|
||||
|
||||
var options = div.testWidget( "option" );
|
||||
same( options, {
|
||||
create: null,
|
||||
disabled: false,
|
||||
foo: "bar",
|
||||
baz: 5,
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
});
|
||||
}
|
||||
|
||||
var menus = $("#menu1, #menu2, #menu3");
|
||||
var menus = $("#menu1, #menu2, #menu3, #menu4");
|
||||
create();
|
||||
|
||||
$("#toggle-destroy").toggle(function() {
|
||||
@ -41,7 +41,7 @@
|
||||
<style>
|
||||
body { font-size:62.5%; }
|
||||
.ui-menu { width: 200px; margin-bottom: 2em; }
|
||||
#menu3 { height: 200px; overflow: auto; }
|
||||
#menu4 { height: 200px; overflow: auto; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -56,7 +56,7 @@
|
||||
<li><a href="#">Salzburg</a></li>
|
||||
</ul>
|
||||
|
||||
<ul id="menu1">
|
||||
<ul id="menu2">
|
||||
<li><a href="#">Aberdeen</a></li>
|
||||
<li><a href="#">Ada</a></li>
|
||||
<li><a href="#">Adamsville</a></li>
|
||||
@ -95,6 +95,44 @@
|
||||
</ul>
|
||||
|
||||
<ul id="menu3">
|
||||
<li><a href="#"><span class="ui-icon ui-icon-print"></span>Aberdeen</a></li>
|
||||
<li><a href="#"><span class="ui-icon ui-icon-scissors"></span>Ada</a></li>
|
||||
<li><a href="#">Adamsville</a></li>
|
||||
<li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Addyston</a></li>
|
||||
<li>
|
||||
<a href="#">Delphi</a>
|
||||
<ul>
|
||||
<li><a href="#">Ada</a></li>
|
||||
<li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Saarland</a></li>
|
||||
<li><a href="#">Salzburg</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Saarland</a></li>
|
||||
<li>
|
||||
<a href="#"><span class="ui-icon ui-icon-print"></span>Salzburg</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#"><span class="ui-icon ui-icon-wrench"></span>Delphi</a>
|
||||
<ul>
|
||||
<li><a href="#">Ada</a></li>
|
||||
<li><a href="#">Saarland</a></li>
|
||||
<li><a href="#">Salzburg</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Delphi</a>
|
||||
<ul>
|
||||
<li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Ada</a></li>
|
||||
<li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Saarland</a></li>
|
||||
<li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Salzburg</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Perch</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul id="menu4">
|
||||
<li><a href="#">Aberdeen</a></li>
|
||||
<li><a href="#">Ada</a></li>
|
||||
<li><a href="#">Adamsville</a></li>
|
||||
|
||||
@ -55,6 +55,16 @@
|
||||
.ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; outline: none; }
|
||||
.ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; }
|
||||
|
||||
.ui-menubar {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.ui-menubar-item {
|
||||
float: left;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
@ -66,85 +76,97 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="bar1" class="menubar">
|
||||
<a href="#">File</a>
|
||||
<ul>
|
||||
<li><a href="#">Open...</a></li>
|
||||
<li class="ui-state-disabled">Open recent...</li>
|
||||
<li><a href="#">Save</a></li>
|
||||
<li><a href="#">Save as...</a></li>
|
||||
<li><a href="#">Close</a></li>
|
||||
<li><a href="#">Quit</a></li>
|
||||
</ul>
|
||||
<a href="#">Edit</a>
|
||||
<ul>
|
||||
<li><a href="#">Copy</a></li>
|
||||
<li><a href="#">Cut</a></li>
|
||||
<li class="ui-state-disabled">Paste</li>
|
||||
</ul>
|
||||
<a href="#">View</a>
|
||||
<ul>
|
||||
<li><a href="#">Fullscreen</a></li>
|
||||
<li><a href="#">Fit into view</a></li>
|
||||
<li>
|
||||
<a href="#">Encoding</a>
|
||||
<ul>
|
||||
<li><a href="#">Auto-detect</a></li>
|
||||
<li><a href="#">UTF-8</a></li>
|
||||
<li>
|
||||
<a href="#">UTF-16</a>
|
||||
<ul>
|
||||
<li><a href="#">Option 1</a></li>
|
||||
<li><a href="#">Option 2</a></li>
|
||||
<li><a href="#">Option 3</a></li>
|
||||
<li><a href="#">Option 4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Customize...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul id="bar1" class="menubar">
|
||||
<li>
|
||||
<a href="#">File</a>
|
||||
<ul>
|
||||
<li><a href="#">Open...</a></li>
|
||||
<li class="ui-state-disabled">Open recent...</li>
|
||||
<li><a href="#">Save</a></li>
|
||||
<li><a href="#">Save as...</a></li>
|
||||
<li><a href="#">Close</a></li>
|
||||
<li><a href="#">Quit</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Edit</a>
|
||||
<ul>
|
||||
<li><a href="#">Copy</a></li>
|
||||
<li><a href="#">Cut</a></li>
|
||||
<li class="ui-state-disabled">Paste</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">View</a>
|
||||
<ul>
|
||||
<li><a href="#">Fullscreen</a></li>
|
||||
<li><a href="#">Fit into view</a></li>
|
||||
<li>
|
||||
<a href="#">Encoding</a>
|
||||
<ul>
|
||||
<li><a href="#">Auto-detect</a></li>
|
||||
<li><a href="#">UTF-8</a></li>
|
||||
<li>
|
||||
<a href="#">UTF-16</a>
|
||||
<ul>
|
||||
<li><a href="#">Option 1</a></li>
|
||||
<li><a href="#">Option 2</a></li>
|
||||
<li><a href="#">Option 3</a></li>
|
||||
<li><a href="#">Option 4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Customize...</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div id="bar2" class="menubar-icons">
|
||||
<a href="#">File</a>
|
||||
<ul>
|
||||
<li><a href="#">Open...</a></li>
|
||||
<li class="ui-state-disabled">Open recent...</li>
|
||||
<li><a href="#">Save</a></li>
|
||||
<li><a href="#">Save as...</a></li>
|
||||
<li><a href="#">Close</a></li>
|
||||
<li><a href="#">Quit</a></li>
|
||||
</ul>
|
||||
<a href="#">Edit</a>
|
||||
<ul>
|
||||
<li><a href="#">Copy</a></li>
|
||||
<li><a href="#">Cut</a></li>
|
||||
<li class="ui-state-disabled">Paste</li>
|
||||
</ul>
|
||||
<a href="#">View</a>
|
||||
<ul>
|
||||
<li><a href="#">Fullscreen</a></li>
|
||||
<li><a href="#">Fit into view</a></li>
|
||||
<li>
|
||||
<a href="#">Encoding</a>
|
||||
<ul>
|
||||
<li><a href="#">Auto-detect</a></li>
|
||||
<li><a href="#">UTF-8</a></li>
|
||||
<li>
|
||||
<a href="#">UTF-16</a>
|
||||
<ul>
|
||||
<li><a href="#">Option 1</a></li>
|
||||
<li><a href="#">Option 2</a></li>
|
||||
<li><a href="#">Option 3</a></li>
|
||||
<li><a href="#">Option 4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Customize...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul id="bar2" class="menubar-icons">
|
||||
<li>
|
||||
<a href="#">File</a>
|
||||
<ul>
|
||||
<li><a href="#">Open...</a></li>
|
||||
<li class="ui-state-disabled">Open recent...</li>
|
||||
<li><a href="#">Save</a></li>
|
||||
<li><a href="#">Save as...</a></li>
|
||||
<li><a href="#">Close</a></li>
|
||||
<li><a href="#">Quit</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Edit</a>
|
||||
<ul>
|
||||
<li><a href="#">Copy</a></li>
|
||||
<li><a href="#">Cut</a></li>
|
||||
<li class="ui-state-disabled">Paste</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">View</a>
|
||||
<ul>
|
||||
<li><a href="#">Fullscreen</a></li>
|
||||
<li><a href="#">Fit into view</a></li>
|
||||
<li>
|
||||
<a href="#">Encoding</a>
|
||||
<ul>
|
||||
<li><a href="#">Auto-detect</a></li>
|
||||
<li><a href="#">UTF-8</a></li>
|
||||
<li>
|
||||
<a href="#">UTF-16</a>
|
||||
<ul>
|
||||
<li><a href="#">Option 1</a></li>
|
||||
<li><a href="#">Option 2</a></li>
|
||||
<li><a href="#">Option 3</a></li>
|
||||
<li><a href="#">Option 4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Customize...</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<table id="movies" class="ui-widget">
|
||||
<thead>
|
||||
@ -161,24 +183,26 @@
|
||||
<td class="ui-widget-content">1993</td>
|
||||
<td class="ui-widget-content">3.6</td>
|
||||
<td class="ui-widget-content">
|
||||
<div class="menubar">
|
||||
<a href="#">Options</a>
|
||||
<ul>
|
||||
<li><a href="#">Order...</a></li>
|
||||
<li class="ui-state-disabled">Write a Review...</li>
|
||||
<li><a href="#">Find Similar Movies...</a></li>
|
||||
<li>
|
||||
<a href="#">Rate</a>
|
||||
<ul>
|
||||
<li><a href="#">5 stars</a></li>
|
||||
<li><a href="#">4 stars</a></li>
|
||||
<li><a href="#">3 stars</a></li>
|
||||
<li><a href="#">2 stars</a></li>
|
||||
<li><a href="#">1 stars</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="menubar">
|
||||
<li>
|
||||
<a href="#">Options</a>
|
||||
<ul>
|
||||
<li><a href="#">Order...</a></li>
|
||||
<li class="ui-state-disabled">Write a Review...</li>
|
||||
<li><a href="#">Find Similar Movies...</a></li>
|
||||
<li>
|
||||
<a href="#">Rate</a>
|
||||
<ul>
|
||||
<li><a href="#">5 stars</a></li>
|
||||
<li><a href="#">4 stars</a></li>
|
||||
<li><a href="#">3 stars</a></li>
|
||||
<li><a href="#">2 stars</a></li>
|
||||
<li><a href="#">1 stars</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
||||
@ -13,24 +13,31 @@ $.widget("ui.menubar", {
|
||||
},
|
||||
_create: function() {
|
||||
var self = this;
|
||||
var items = this.items = this.element.children("button, a");
|
||||
var items = this.items = this.element.children("li")
|
||||
.addClass("ui-menubar-item")
|
||||
.attr("role", "presentation")
|
||||
.children("button, a");
|
||||
items.slice(1).attr("tabIndex", -1);
|
||||
var o = this.options;
|
||||
|
||||
this.element.addClass('ui-menubar ui-widget-header ui-helper-clearfix');
|
||||
this.element.addClass('ui-menubar ui-widget-header ui-helper-clearfix').attr("role", "menubar");
|
||||
this._focusable(items);
|
||||
this._hoverable(items);
|
||||
items.next("ul").each(function(i, elm) {
|
||||
$(elm).menu({
|
||||
select: function(event, ui) {
|
||||
ui.item.parents("ul:last").hide()
|
||||
self.options.select.apply(this, arguments);
|
||||
ui.item.parents("ul.ui-menu:last").hide();
|
||||
self._trigger( "select", event, ui );
|
||||
self._close();
|
||||
$(event.target).prev().focus();
|
||||
}
|
||||
}).hide().keydown(function(event) {
|
||||
}).hide()
|
||||
.attr("aria-hidden", "true")
|
||||
.attr("aria-expanded", "false")
|
||||
.keydown(function(event) {
|
||||
var menu = $(this);
|
||||
if (menu.is(":hidden"))
|
||||
return;
|
||||
event.stopPropagation();
|
||||
switch (event.keyCode) {
|
||||
case $.ui.keyCode.LEFT:
|
||||
self._left(event);
|
||||
@ -41,9 +48,7 @@ $.widget("ui.menubar", {
|
||||
event.preventDefault();
|
||||
break;
|
||||
};
|
||||
}).blur(function( event ) {
|
||||
self._close( event );
|
||||
});
|
||||
})
|
||||
});
|
||||
items.each(function() {
|
||||
var input = $(this),
|
||||
@ -55,12 +60,11 @@ $.widget("ui.menubar", {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
if (event.type == "click" && menu.is(":visible") && self.active && self.active[0] == menu[0]) {
|
||||
self._close();
|
||||
return;
|
||||
}
|
||||
if (self.open || event.type == "click") {
|
||||
if ((self.open && event.type == "mouseenter") || event.type == "click") {
|
||||
self._open(event, menu);
|
||||
}
|
||||
})
|
||||
@ -83,6 +87,8 @@ $.widget("ui.menubar", {
|
||||
}
|
||||
})
|
||||
.addClass("ui-button ui-widget ui-button-text-only ui-menubar-link")
|
||||
.attr("role", "menuitem")
|
||||
.attr("aria-haspopup", "true")
|
||||
.wrapInner("<span class='ui-button-text'></span>");
|
||||
|
||||
if (o.menuIcon) {
|
||||
@ -95,35 +101,66 @@ $.widget("ui.menubar", {
|
||||
};
|
||||
|
||||
});
|
||||
self._bind(document, {
|
||||
click: function(event) {
|
||||
if (self.open && !$(event.target).closest(".ui-menubar").length) {
|
||||
self._close();
|
||||
}
|
||||
}
|
||||
})
|
||||
self._bind({
|
||||
keyup: function(event) {
|
||||
if (event.keyCode == $.ui.keyCode.ESCAPE && self.open) {
|
||||
if (self.active.menu("left", event) !== true) {
|
||||
keydown: function(event) {
|
||||
if (event.keyCode == $.ui.keyCode.ESCAPE) {
|
||||
if (self.active && self.active.menu("left", event) !== true) {
|
||||
var active = self.active;
|
||||
self.active.blur();
|
||||
self._close( event );
|
||||
active.prev().focus();
|
||||
}
|
||||
}
|
||||
},
|
||||
focusout : function( event ) {
|
||||
self.closeTimer = setTimeout(function() {
|
||||
self._close( event );
|
||||
}, 100);
|
||||
},
|
||||
focusin :function( event ) {
|
||||
clearTimeout(self.closeTimer);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
_destroy : function() {
|
||||
var items = this.element.children("li")
|
||||
.removeClass("ui-menubar-item")
|
||||
.removeAttr("role", "presentation")
|
||||
.children("button, a");
|
||||
|
||||
this.element.removeClass('ui-menubar ui-widget-header ui-helper-clearfix').removeAttr("role", "menubar").unbind(".menubar");;
|
||||
items.unbind("focusin focusout click focus mouseenter keydown");
|
||||
|
||||
items
|
||||
.removeClass("ui-button ui-widget ui-button-text-only ui-menubar-link ui-state-default")
|
||||
.removeAttr("role", "menuitem")
|
||||
.removeAttr("aria-haspopup", "true")
|
||||
.children("span.ui-button-text").each(function(i, e) {
|
||||
var item = $(this);
|
||||
item.parent().html(item.html());
|
||||
})
|
||||
.end()
|
||||
.children(".ui-icon").remove();
|
||||
|
||||
$(document).unbind(".menubar");
|
||||
|
||||
this.element.find(":ui-menu").menu("destroy")
|
||||
.show()
|
||||
.removeAttr("aria-hidden", "true")
|
||||
.removeAttr("aria-expanded", "false")
|
||||
.removeAttr("tabindex")
|
||||
.unbind("keydown", "blur")
|
||||
;
|
||||
},
|
||||
|
||||
_close: function() {
|
||||
this.active.menu("closeAll").hide();
|
||||
if (!this.active || !this.active.length)
|
||||
return;
|
||||
this.active.menu("closeAll").hide().attr("aria-hidden", "true").attr("aria-expanded", "false");
|
||||
this.active.prev().removeClass("ui-state-active").removeAttr("tabIndex");
|
||||
this.active = null;
|
||||
var self = this;
|
||||
// delay for the next focus event to see it as still "open"
|
||||
self.timer = setTimeout(function() {
|
||||
self.open = false;
|
||||
}, 13);
|
||||
this.open = false;
|
||||
},
|
||||
|
||||
_open: function(event, menu) {
|
||||
@ -133,55 +170,63 @@ $.widget("ui.menubar", {
|
||||
}
|
||||
// almost the same as _close above, but don't remove tabIndex
|
||||
if (this.active) {
|
||||
this.active.menu("closeAll").hide();
|
||||
this.active.menu("closeAll").hide().attr("aria-hidden", "true").attr("aria-expanded", "false");
|
||||
this.active.prev().removeClass("ui-state-active");
|
||||
}
|
||||
clearTimeout(this.timer);
|
||||
this.open = true;
|
||||
// set tabIndex -1 to have the button skipped on shift-tab when menu is open (it gets focus)
|
||||
var button = menu.prev().addClass("ui-state-active").attr("tabIndex", -1);
|
||||
this.active = menu.show().position({
|
||||
my: "left top",
|
||||
at: "left bottom",
|
||||
of: button
|
||||
}).focus();
|
||||
})
|
||||
.removeAttr("aria-hidden").attr("aria-expanded", "true")
|
||||
.menu("focus", event, menu.children("li").first())
|
||||
.focus()
|
||||
.focusin()
|
||||
;
|
||||
this.open = true;
|
||||
},
|
||||
|
||||
_prev: function( event, button ) {
|
||||
button.attr("tabIndex", -1);
|
||||
var prev = button.prevAll( ".ui-button" ).eq( 0 );
|
||||
var prev = button.parent().prevAll("li").children( ".ui-button" ).eq( 0 );
|
||||
if (prev.length) {
|
||||
prev.removeAttr("tabIndex")[0].focus();
|
||||
} else {
|
||||
this.element.children(".ui-button:last").removeAttr("tabIndex")[0].focus();
|
||||
var lastItem = this.element.children("li:last").children(".ui-button:last");
|
||||
lastItem.removeAttr("tabIndex")[0].focus();
|
||||
}
|
||||
},
|
||||
|
||||
_next: function( event, button ) {
|
||||
button.attr("tabIndex", -1);
|
||||
var next = button.nextAll( ".ui-button" ).eq( 0 );
|
||||
var next = button.parent().nextAll("li").children( ".ui-button" ).eq( 0 );
|
||||
if (next.length) {
|
||||
next.removeAttr("tabIndex")[0].focus();
|
||||
} else {
|
||||
this.element.children(".ui-button:first").removeAttr("tabIndex")[0].focus();
|
||||
var firstItem = this.element.children("li:first").children(".ui-button:first");
|
||||
firstItem.removeAttr("tabIndex")[0].focus();
|
||||
}
|
||||
},
|
||||
|
||||
_left: function(event) {
|
||||
var prev = this.active.prevAll( ".ui-menu" ).eq( 0 );
|
||||
var prev = this.active.parent().prevAll("li:eq(0)").children( ".ui-menu" ).eq( 0 );
|
||||
if (prev.length) {
|
||||
this._open(event, prev);
|
||||
} else {
|
||||
this._open(event, this.element.children(".ui-menu:last"));
|
||||
var lastItem = this.element.children("li:last").children(".ui-menu:first");
|
||||
this._open(event, lastItem);
|
||||
}
|
||||
},
|
||||
|
||||
_right: function(event) {
|
||||
var next = this.active.nextAll( ".ui-menu" ).eq( 0 );
|
||||
var next = this.active.parent().nextAll("li:eq(0)").children( ".ui-menu" ).eq( 0 );
|
||||
if (next.length) {
|
||||
this._open(event, next);
|
||||
} else {
|
||||
this._open(event, this.element.children(".ui-menu:first"));
|
||||
var firstItem = this.element.children("li:first").children(".ui-menu:first");
|
||||
this._open(event, firstItem);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -35,7 +35,7 @@ $.widget( "ui.popup", {
|
||||
this.element
|
||||
.addClass("ui-popup")
|
||||
this._close();
|
||||
|
||||
|
||||
this._bind(this.options.trigger, {
|
||||
click: function( event ) {
|
||||
event.preventDefault();
|
||||
@ -46,6 +46,10 @@ $.widget( "ui.popup", {
|
||||
}
|
||||
});
|
||||
|
||||
this._bind(this.element, {
|
||||
blur: "_close"
|
||||
});
|
||||
|
||||
this._bind({
|
||||
keyup: function( event ) {
|
||||
if (event.keyCode == $.ui.keyCode.ESCAPE && this.element.is( ":visible" )) {
|
||||
@ -94,6 +98,10 @@ $.widget( "ui.popup", {
|
||||
.attr( "aria-expanded", true )
|
||||
.position( position )
|
||||
.focus();
|
||||
|
||||
// take trigger out of tab order to allow shift-tab to skip trigger
|
||||
this.options.trigger.attr("tabindex", -1);
|
||||
|
||||
this.open = true;
|
||||
this._trigger( "open", event );
|
||||
},
|
||||
@ -103,6 +111,9 @@ $.widget( "ui.popup", {
|
||||
.hide()
|
||||
.attr( "aria-hidden", true )
|
||||
.attr( "aria-expanded", false );
|
||||
|
||||
this.options.trigger.attr("tabindex", 0);
|
||||
|
||||
this.open = false;
|
||||
this._trigger( "close", event );
|
||||
}
|
||||
|
||||
17
themes/base/jquery.ui.menu.css
vendored
17
themes/base/jquery.ui.menu.css
vendored
@ -26,11 +26,9 @@
|
||||
.ui-menu .ui-menu-item a {
|
||||
text-decoration:none;
|
||||
display:block;
|
||||
padding:.2em .4em;
|
||||
padding: 2px .4em;
|
||||
line-height:1.5;
|
||||
zoom:1;
|
||||
}
|
||||
.ui-menu .ui-menu-item a {
|
||||
font-weight: normal;
|
||||
}
|
||||
.ui-menu .ui-menu-item a.ui-state-focus,
|
||||
@ -39,6 +37,15 @@
|
||||
margin: -1px;
|
||||
}
|
||||
|
||||
.ui-menu .ui-icon { float: right; }
|
||||
|
||||
/* nested menus */
|
||||
.ui-menu .ui-menu { position: absolute; }
|
||||
|
||||
/* icon support */
|
||||
.ui-menu-icons { position: relative; }
|
||||
.ui-menu-icons .ui-menu-item a { position: relative; padding-left: 2em; }
|
||||
|
||||
/* left-aligned */
|
||||
.ui-menu .ui-icon { position: absolute; top: .2em; left: .2em; }
|
||||
|
||||
/* right-aligned */
|
||||
.ui-menu .ui-menu-icon { position: static; float: right; }
|
||||
2
themes/base/jquery.ui.resizable.css
vendored
2
themes/base/jquery.ui.resizable.css
vendored
@ -12,7 +12,7 @@
|
||||
/* http://bugs.jqueryui.com/ticket/7233
|
||||
- Resizable: resizable handles fail to work in IE if transparent and content overlaps
|
||||
*/
|
||||
background-image:url(data:);
|
||||
background-image:url(data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=);
|
||||
}
|
||||
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
|
||||
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
|
||||
|
||||
2
ui/i18n/jquery.ui.datepicker-nl.js
vendored
2
ui/i18n/jquery.ui.datepicker-nl.js
vendored
@ -14,7 +14,7 @@ jQuery(function($){
|
||||
dayNamesShort: ['zon', 'maa', 'din', 'woe', 'don', 'vri', 'zat'],
|
||||
dayNamesMin: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
|
||||
weekHeader: 'Wk',
|
||||
dateFormat: 'dd/mm/yy',
|
||||
dateFormat: 'dd-mm-yy',
|
||||
firstDay: 1,
|
||||
isRTL: false,
|
||||
showMonthAfterYear: false,
|
||||
|
||||
2
ui/i18n/jquery.ui.datepicker-sk.js
vendored
2
ui/i18n/jquery.ui.datepicker-sk.js
vendored
@ -10,7 +10,7 @@ jQuery(function($){
|
||||
'Júl','August','September','Október','November','December'],
|
||||
monthNamesShort: ['Jan','Feb','Mar','Apr','Máj','Jún',
|
||||
'Júl','Aug','Sep','Okt','Nov','Dec'],
|
||||
dayNames: ['Nedel\'a','Pondelok','Utorok','Streda','Štvrtok','Piatok','Sobota'],
|
||||
dayNames: ['Nedeľa','Pondelok','Utorok','Streda','Štvrtok','Piatok','Sobota'],
|
||||
dayNamesShort: ['Ned','Pon','Uto','Str','Štv','Pia','Sob'],
|
||||
dayNamesMin: ['Ne','Po','Ut','St','Št','Pia','So'],
|
||||
weekHeader: 'Ty',
|
||||
|
||||
47
ui/jquery.effects.core.js
vendored
47
ui/jquery.effects.core.js
vendored
@ -234,12 +234,12 @@ $.effects.animateClass = function( value, duration, easing, callback ) {
|
||||
easing = null;
|
||||
}
|
||||
|
||||
return this.queue( 'fx', function() {
|
||||
return this.queue(function() {
|
||||
var that = $( this ),
|
||||
originalStyleAttr = that.attr( 'style' ) || ' ',
|
||||
originalStyle = filterStyles( getElementStyles.call( this ) ),
|
||||
newStyle,
|
||||
className = that.attr( 'className' );
|
||||
className = that.attr( 'class' );
|
||||
|
||||
$.each( classAnimationActions, function(i, action) {
|
||||
if ( value[ action ] ) {
|
||||
@ -247,32 +247,31 @@ $.effects.animateClass = function( value, duration, easing, callback ) {
|
||||
}
|
||||
});
|
||||
newStyle = filterStyles( getElementStyles.call( this ) );
|
||||
that.attr( 'className', className );
|
||||
that.attr( 'class', className );
|
||||
|
||||
that.animate( styleDifference( originalStyle, newStyle ), duration, easing, function() {
|
||||
$.each( classAnimationActions, function( i, action ) {
|
||||
if ( value[ action ] ) {
|
||||
that[ action + 'Class' ]( value[ action ] );
|
||||
that.animate( styleDifference( originalStyle, newStyle ), {
|
||||
queue: false,
|
||||
duration: duration,
|
||||
easing: easing,
|
||||
complete: function() {
|
||||
$.each( classAnimationActions, function( i, action ) {
|
||||
if ( value[ action ] ) {
|
||||
that[ action + 'Class' ]( value[ action ] );
|
||||
}
|
||||
});
|
||||
// work around bug in IE by clearing the cssText before setting it
|
||||
if ( typeof that.attr( 'style' ) == 'object' ) {
|
||||
that.attr( 'style' ).cssText = '';
|
||||
that.attr( 'style' ).cssText = originalStyleAttr;
|
||||
} else {
|
||||
that.attr( 'style', originalStyleAttr );
|
||||
}
|
||||
});
|
||||
// work around bug in IE by clearing the cssText before setting it
|
||||
if ( typeof that.attr( 'style' ) == 'object' ) {
|
||||
that.attr( 'style' ).cssText = '';
|
||||
that.attr( 'style' ).cssText = originalStyleAttr;
|
||||
} else {
|
||||
that.attr( 'style', originalStyleAttr );
|
||||
}
|
||||
if ( callback ) {
|
||||
callback.apply( this, arguments );
|
||||
if ( callback ) {
|
||||
callback.apply( this, arguments );
|
||||
}
|
||||
$.dequeue( this );
|
||||
}
|
||||
});
|
||||
|
||||
// $.animate adds a function to the end of the queue
|
||||
// but we want it at the front
|
||||
var queue = $.queue( this ),
|
||||
anim = queue.splice( queue.length - 1, 1 )[ 0 ];
|
||||
queue.splice( 1, 0, anim );
|
||||
$.dequeue( this );
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
11
ui/jquery.ui.accordion.js
vendored
11
ui/jquery.ui.accordion.js
vendored
@ -25,7 +25,11 @@ $.widget( "ui.accordion", {
|
||||
icons: {
|
||||
activeHeader: "ui-icon-triangle-1-s",
|
||||
header: "ui-icon-triangle-1-e"
|
||||
}
|
||||
},
|
||||
|
||||
// callbacks
|
||||
activate: null,
|
||||
beforeActivate: null
|
||||
},
|
||||
|
||||
_create: function() {
|
||||
@ -649,6 +653,11 @@ if ( $.uiBackCompat !== false ) {
|
||||
|
||||
// change events
|
||||
(function( $, prototype ) {
|
||||
$.extend( prototype.options, {
|
||||
change: null,
|
||||
changestart: null
|
||||
});
|
||||
|
||||
var _trigger = prototype._trigger;
|
||||
prototype._trigger = function( type, event, data ) {
|
||||
var ret = _trigger.apply( this, arguments );
|
||||
|
||||
11
ui/jquery.ui.autocomplete.js
vendored
11
ui/jquery.ui.autocomplete.js
vendored
@ -30,7 +30,16 @@ $.widget( "ui.autocomplete", {
|
||||
at: "left bottom",
|
||||
collision: "none"
|
||||
},
|
||||
source: null
|
||||
source: null,
|
||||
|
||||
// callbacks
|
||||
change: null,
|
||||
close: null,
|
||||
focus: null,
|
||||
open: null,
|
||||
response: null,
|
||||
search: null,
|
||||
select: null
|
||||
},
|
||||
|
||||
pending: 0,
|
||||
|
||||
46
ui/jquery.ui.core.js
vendored
46
ui/jquery.ui.core.js
vendored
@ -174,6 +174,27 @@ $.each( [ "Width", "Height" ], function( i, name ) {
|
||||
});
|
||||
|
||||
// selectors
|
||||
function focusable( element, isTabIndexNotNaN ) {
|
||||
var nodeName = element.nodeName.toLowerCase();
|
||||
if ( "area" === nodeName ) {
|
||||
var map = element.parentNode,
|
||||
mapName = map.name,
|
||||
img;
|
||||
if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) {
|
||||
return false;
|
||||
}
|
||||
img = $( "img[usemap=#" + mapName + "]" )[0];
|
||||
return !!img && visible( img );
|
||||
}
|
||||
return ( /input|select|textarea|button|object/.test( nodeName )
|
||||
? !element.disabled
|
||||
: "a" == nodeName
|
||||
? element.href || isTabIndexNotNaN
|
||||
: isTabIndexNotNaN)
|
||||
// the element and all of its ancestors must be visible
|
||||
&& visible( element );
|
||||
}
|
||||
|
||||
function visible( element ) {
|
||||
return !$( element ).parents().andSelf().filter(function() {
|
||||
return $.curCSS( this, "visibility" ) === "hidden" ||
|
||||
@ -187,30 +208,13 @@ $.extend( $.expr[ ":" ], {
|
||||
},
|
||||
|
||||
focusable: function( element ) {
|
||||
var nodeName = element.nodeName.toLowerCase(),
|
||||
tabIndex = $.attr( element, "tabindex" );
|
||||
if ( "area" === nodeName ) {
|
||||
var map = element.parentNode,
|
||||
mapName = map.name,
|
||||
img;
|
||||
if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) {
|
||||
return false;
|
||||
}
|
||||
img = $( "img[usemap=#" + mapName + "]" )[0];
|
||||
return !!img && visible( img );
|
||||
}
|
||||
return ( /input|select|textarea|button|object/.test( nodeName )
|
||||
? !element.disabled
|
||||
: "a" == nodeName
|
||||
? element.href || !isNaN( tabIndex )
|
||||
: !isNaN( tabIndex ))
|
||||
// the element and all of its ancestors must be visible
|
||||
&& visible( element );
|
||||
return focusable( element, !isNaN( $.attr( element, "tabindex" ) ) );
|
||||
},
|
||||
|
||||
tabbable: function( element ) {
|
||||
var tabIndex = $.attr( element, "tabindex" );
|
||||
return ( isNaN( tabIndex ) || tabIndex >= 0 ) && $( element ).is( ":focusable" );
|
||||
var tabIndex = $.attr( element, "tabindex" ),
|
||||
isTabIndexNaN = isNaN( tabIndex );
|
||||
return ( isTabIndexNaN || tabIndex >= 0 ) && focusable( element, !isTabIndexNaN );
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
100
ui/jquery.ui.menu.js
vendored
100
ui/jquery.ui.menu.js
vendored
@ -28,11 +28,14 @@ $.widget("ui.menu", {
|
||||
var self = this;
|
||||
this.activeMenu = this.element;
|
||||
this.menuId = this.element.attr( "id" ) || "ui-menu-" + idIncrement++;
|
||||
if (this.element.find(".ui-icon").length) {
|
||||
this.element.addClass("ui-menu-icons");
|
||||
}
|
||||
this.element
|
||||
.addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
|
||||
.attr({
|
||||
id: this.menuId,
|
||||
role: "listbox"
|
||||
role: "menu"
|
||||
})
|
||||
.bind( "click.menu", function( event ) {
|
||||
var item = $( event.target ).closest( ".ui-menu-item:has(a)" );
|
||||
@ -108,9 +111,16 @@ $.widget("ui.menu", {
|
||||
event.preventDefault();
|
||||
break;
|
||||
case $.ui.keyCode.ENTER:
|
||||
self.select( event );
|
||||
if (self.active.children("a[aria-haspopup='true']").length) {
|
||||
if (self.right( event )) {
|
||||
event.stopImmediatePropagation();
|
||||
}
|
||||
}
|
||||
else {
|
||||
self.select( event );
|
||||
event.stopImmediatePropagation();
|
||||
}
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
break;
|
||||
case $.ui.keyCode.ESCAPE:
|
||||
if ( self.left( event ) ) {
|
||||
@ -132,13 +142,13 @@ $.widget("ui.menu", {
|
||||
function escape(value) {
|
||||
return value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
|
||||
}
|
||||
var match = self.widget().children(".ui-menu-item").filter(function() {
|
||||
var match = self.activeMenu.children(".ui-menu-item").filter(function() {
|
||||
return new RegExp("^" + escape(character), "i").test($(this).children("a").text());
|
||||
});
|
||||
var match = skip && match.index(self.active.next()) != -1 ? self.active.nextAll(".ui-menu-item") : match;
|
||||
if (!match.length) {
|
||||
character = String.fromCharCode(event.keyCode);
|
||||
match = self.widget().children(".ui-menu-item").filter(function() {
|
||||
match = self.activeMenu.children(".ui-menu-item").filter(function() {
|
||||
return new RegExp("^" + escape(character), "i").test($(this).children("a").text());
|
||||
});
|
||||
}
|
||||
@ -160,41 +170,62 @@ $.widget("ui.menu", {
|
||||
},
|
||||
|
||||
_destroy: function() {
|
||||
//destroy (sub)menus
|
||||
this.element
|
||||
.removeAttr( "aria-activedescendant" )
|
||||
.find("ul")
|
||||
.andSelf()
|
||||
.removeClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
|
||||
.removeAttr( "tabIndex" )
|
||||
.removeAttr( "role" )
|
||||
.removeAttr( "aria-activedescendant" );
|
||||
.removeAttr("id")
|
||||
.removeAttr( "aria-labelledby" )
|
||||
.removeAttr( "aria-expanded" )
|
||||
.removeAttr( "aria-hidden" )
|
||||
.show();
|
||||
|
||||
this.element.children( ".ui-menu-item" )
|
||||
//destroy menu items
|
||||
this.element.find( ".ui-menu-item" )
|
||||
.unbind( ".menu" )
|
||||
.removeClass( "ui-menu-item" )
|
||||
.removeAttr( "role" )
|
||||
.children( "a" )
|
||||
.removeClass( "ui-corner-all ui-state-hover" )
|
||||
.removeAttr( "tabIndex" )
|
||||
.unbind( ".menu" );
|
||||
.removeAttr( "role" )
|
||||
.removeAttr( "aria-haspopup" )
|
||||
.removeAttr( "id" )
|
||||
.children(".ui-icon").remove();
|
||||
},
|
||||
|
||||
refresh: function() {
|
||||
var self = this;
|
||||
// initialize nested menus
|
||||
// TODO add role=listbox to these, too? or just the top level menu?
|
||||
var submenus = this.element.find("ul:not(.ui-menu)")
|
||||
.addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
|
||||
.attr("role", "menu")
|
||||
.hide()
|
||||
|
||||
submenus
|
||||
.prev("a")
|
||||
.prepend('<span class="ui-icon ui-icon-carat-1-e"></span>');
|
||||
|
||||
.attr("aria-hidden", "true")
|
||||
.attr("aria-expanded", "false")
|
||||
;
|
||||
|
||||
// don't refresh list items that are already adapted
|
||||
var items = submenus.add(this.element).children( "li:not(.ui-menu-item):has(a)" )
|
||||
.addClass( "ui-menu-item" )
|
||||
.attr( "role", "menuitem" );
|
||||
.attr( "role", "presentation" );
|
||||
|
||||
items.children( "a" )
|
||||
.addClass( "ui-corner-all" )
|
||||
.attr( "tabIndex", -1 );
|
||||
.attr( "tabIndex", -1 )
|
||||
.attr( "role", "menuitem" )
|
||||
.attr("id", function(i) {return self.element.attr("id") + "-" + i});
|
||||
|
||||
submenus.each(function() {
|
||||
var menu = $(this);
|
||||
var item = menu.prev("a")
|
||||
item.attr("aria-haspopup", "true")
|
||||
.prepend('<span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span>');
|
||||
menu.attr("aria-labelledby", item.attr("id"));
|
||||
});
|
||||
},
|
||||
|
||||
focus: function( event, item ) {
|
||||
@ -219,13 +250,11 @@ $.widget("ui.menu", {
|
||||
this.active = item.first()
|
||||
.children( "a" )
|
||||
.addClass( "ui-state-focus" )
|
||||
.attr( "id", function(index, id) {
|
||||
return (self.itemId = id || self.menuId + "-activedescendant");
|
||||
})
|
||||
.end();
|
||||
// need to remove the attribute before adding it for the screenreader to pick up the change
|
||||
// see http://groups.google.com/group/jquery-a11y/msg/929e0c1e8c5efc8f
|
||||
this.element.removeAttr("aria-activedescendant").attr("aria-activedescendant", self.itemId)
|
||||
self.element.attr("aria-activedescendant", self.active.children("a").attr("id"))
|
||||
|
||||
// highlight active parent menu item, if any
|
||||
this.active.parent().closest(".ui-menu-item").children("a:first").addClass("ui-state-active");
|
||||
|
||||
self.timer = setTimeout(function() {
|
||||
self._close();
|
||||
@ -247,10 +276,6 @@ $.widget("ui.menu", {
|
||||
clearTimeout(this.timer);
|
||||
|
||||
this.active.children( "a" ).removeClass( "ui-state-focus" );
|
||||
// remove only generated id
|
||||
$( "#" + this.menuId + "-activedescendant" ).removeAttr( "id" );
|
||||
this.element.removeAttr( "aria-activedescenant" );
|
||||
this._trigger( "blur", event );
|
||||
this.active = null;
|
||||
},
|
||||
|
||||
@ -264,23 +289,20 @@ $.widget("ui.menu", {
|
||||
},
|
||||
|
||||
_open: function(submenu) {
|
||||
this.element.find(".ui-menu").not(submenu.parents()).hide();
|
||||
|
||||
clearTimeout(this.timer);
|
||||
this.element.find(".ui-menu").not(submenu.parents()).hide().attr("aria-hidden", "true");
|
||||
var position = $.extend({}, {
|
||||
of: this.active
|
||||
}, $.type(this.options.position) == "function"
|
||||
? this.options.position(this.active)
|
||||
: this.options.position
|
||||
);
|
||||
|
||||
submenu.show().position(position);
|
||||
|
||||
this.active.find(">a:first").addClass("ui-state-active");
|
||||
submenu.show().removeAttr("aria-hidden").attr("aria-expanded", "true").position(position);
|
||||
},
|
||||
|
||||
closeAll: function() {
|
||||
this.element
|
||||
.find("ul").hide().end()
|
||||
.find("ul").hide().attr("aria-hidden", "true").attr("aria-expanded", "false").end()
|
||||
.find("a.ui-state-active").removeClass("ui-state-active");
|
||||
this.blur();
|
||||
this.activeMenu = this.element;
|
||||
@ -288,25 +310,27 @@ $.widget("ui.menu", {
|
||||
|
||||
_close: function() {
|
||||
this.active.parent()
|
||||
.find("ul").hide().end()
|
||||
.find("ul").hide().attr("aria-hidden", "true").attr("aria-expanded", "false").end()
|
||||
.find("a.ui-state-active").removeClass("ui-state-active");
|
||||
},
|
||||
|
||||
left: function(event) {
|
||||
var newItem = this.active && this.active.parents("li").first();
|
||||
var newItem = this.active && this.active.parents("li:not(.ui-menubar-item)").first();
|
||||
if (newItem && newItem.length) {
|
||||
this.active.parent().hide();
|
||||
this.active.parent().attr("aria-hidden", "true").attr("aria-expanded", "false").hide();
|
||||
this.focus(event, newItem);
|
||||
return true;
|
||||
}
|
||||
},
|
||||
|
||||
right: function(event) {
|
||||
var self= this;
|
||||
var newItem = this.active && this.active.children("ul").children("li").first();
|
||||
if (newItem && newItem.length) {
|
||||
this._open(newItem.parent());
|
||||
var current = this.active;
|
||||
this.focus(event, newItem);
|
||||
//timeout so Firefox will not hide activedescendant change in expanding submenu from AT
|
||||
setTimeout(function(){self.focus(event, newItem)}, 20);
|
||||
return true;
|
||||
}
|
||||
},
|
||||
|
||||
239
ui/jquery.ui.tabs.js
vendored
239
ui/jquery.ui.tabs.js
vendored
@ -26,13 +26,15 @@ function getNextListId() {
|
||||
|
||||
$.widget( "ui.tabs", {
|
||||
options: {
|
||||
activate: null,
|
||||
active: null,
|
||||
beforeActivate: null,
|
||||
beforeLoad: null,
|
||||
collapsible: false,
|
||||
event: "click",
|
||||
fx: null, // e.g. { height: 'toggle', opacity: 'toggle', duration: 200 }
|
||||
|
||||
// callbacks
|
||||
activate: null,
|
||||
beforeActivate: null,
|
||||
beforeLoad: null,
|
||||
load: null
|
||||
},
|
||||
|
||||
@ -79,7 +81,7 @@ $.widget( "ui.tabs", {
|
||||
options.active = active;
|
||||
|
||||
// don't allow collapsible: false and active: false
|
||||
if ( !options.collapsible && options.active === false ) {
|
||||
if ( !options.collapsible && options.active === false && this.anchors.length ) {
|
||||
options.active = 0;
|
||||
}
|
||||
|
||||
@ -128,13 +130,26 @@ $.widget( "ui.tabs", {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( key === "disabled" ) {
|
||||
// don't use the widget factory's disabled handling
|
||||
this._setupDisabled( value );
|
||||
return;
|
||||
}
|
||||
|
||||
this._super( "_setOption", key, value);
|
||||
|
||||
// setting collapsible: false while collapsed; open first panel
|
||||
if ( key === "collapsible" && !value && this.options.active === false ) {
|
||||
this._activate( 0 );
|
||||
}
|
||||
|
||||
this.options[ key ] = value;
|
||||
this.refresh();
|
||||
if ( key === "event" ) {
|
||||
this._setupEvents( value );
|
||||
}
|
||||
|
||||
if ( key === "fx" ) {
|
||||
this._setupFx( value );
|
||||
}
|
||||
},
|
||||
|
||||
_tabId: function( a ) {
|
||||
@ -155,39 +170,45 @@ $.widget( "ui.tabs", {
|
||||
},
|
||||
|
||||
refresh: function() {
|
||||
var self = this;
|
||||
var self = this,
|
||||
options = this.options,
|
||||
lis = this.list.children( ":has(a[href])" );
|
||||
|
||||
// get disabled tabs from class attribute from HTML
|
||||
// this will get converted to a boolean if needed in _refresh()
|
||||
options.disabled = $.map( lis.filter( ".ui-state-disabled" ), function( tab ) {
|
||||
return lis.index( tab );
|
||||
});
|
||||
|
||||
this._processTabs();
|
||||
|
||||
this._refresh();
|
||||
this.panels.not( this._getPanelForTab( this.active ) ).hide();
|
||||
|
||||
// Remove panels that we created that are missing their tab
|
||||
this.element.find(".ui-tabs-panel:data(destroy.tabs)").each( function( index, panel ) {
|
||||
var anchor = self.anchors.filter( "[aria-controls='" + panel.id + "']");
|
||||
if ( !anchor.length ) {
|
||||
$( panel ).remove();
|
||||
}
|
||||
});
|
||||
// was collapsed or no tabs
|
||||
if ( options.active === false || !this.anchors.length ) {
|
||||
options.active = false;
|
||||
this.active = $();
|
||||
// was active, but active tab is gone
|
||||
} else if ( this.active.length && !$.contains( this.list[ 0 ], this.active[ 0 ] ) ) {
|
||||
// activate previous tab
|
||||
var next = options.active - 1;
|
||||
this._activate( next >= 0 ? next : 0 );
|
||||
// was active, active tab still exists
|
||||
} else {
|
||||
// make sure active index is correct
|
||||
options.active = this.anchors.index( this.active );
|
||||
}
|
||||
},
|
||||
|
||||
_refresh: function() {
|
||||
var that = this,
|
||||
options = that.options;
|
||||
var options = this.options;
|
||||
|
||||
this.element.toggleClass( "ui-tabs-collapsible", options.collapsible );
|
||||
this.list.addClass("ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" );
|
||||
this.list.addClass( "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" );
|
||||
this.lis.addClass( "ui-state-default ui-corner-top" );
|
||||
this.panels.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" );
|
||||
|
||||
if ( !options.disabled.length ) {
|
||||
options.disabled = false;
|
||||
}
|
||||
|
||||
// disable tabs
|
||||
for ( var i = 0, li; ( li = this.lis[ i ] ); i++ ) {
|
||||
$( li ).toggleClass( "ui-state-disabled", $.inArray( i, options.disabled ) !== -1 );
|
||||
}
|
||||
|
||||
this._setupDisabled( options.disabled );
|
||||
this._setupEvents( options.event );
|
||||
|
||||
// remove all handlers, may run on existing tabs
|
||||
@ -258,6 +279,23 @@ $.widget( "ui.tabs", {
|
||||
.data( "destroy.tabs", true );
|
||||
},
|
||||
|
||||
_setupDisabled: function( disabled ) {
|
||||
if ( $.isArray( disabled ) ) {
|
||||
if ( !disabled.length ) {
|
||||
disabled = false;
|
||||
} else if ( disabled.length === this.anchors.length ) {
|
||||
disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
// disable tabs
|
||||
for ( var i = 0, li; ( li = this.lis[ i ] ); i++ ) {
|
||||
$( li ).toggleClass( "ui-state-disabled", ( disabled === true || $.inArray( i, disabled ) !== -1 ) );
|
||||
}
|
||||
|
||||
this.options.disabled = disabled;
|
||||
},
|
||||
|
||||
_setupFx: function( fx ) {
|
||||
// set up animations
|
||||
if ( fx ) {
|
||||
@ -500,53 +538,48 @@ $.widget( "ui.tabs", {
|
||||
},
|
||||
|
||||
enable: function( index ) {
|
||||
if ( index === undefined ) {
|
||||
for ( var i = 0, len = this.lis.length; i < len; i++ ) {
|
||||
this.enable( i );
|
||||
}
|
||||
return this;
|
||||
}
|
||||
index = this._getIndex( index );
|
||||
var o = this.options;
|
||||
if ( !o.disabled || ($.isArray( o.disabled ) && $.inArray( index, o.disabled ) == -1 ) ) {
|
||||
var disabled = this.options.disabled;
|
||||
if ( disabled === false ) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.lis.eq( index ).removeClass( "ui-state-disabled" );
|
||||
o.disabled = this.lis.map( function( i ) {
|
||||
return $(this).is( ".ui-state-disabled" ) ? i : null;
|
||||
}).get();
|
||||
|
||||
if ( !o.disabled.length ) {
|
||||
o.disabled = false;
|
||||
if ( index === undefined ) {
|
||||
disabled = false;
|
||||
} else {
|
||||
index = this._getIndex( index );
|
||||
if ( $.isArray( disabled ) ) {
|
||||
disabled = $.map( disabled, function( num ) {
|
||||
return num !== index ? num : null;
|
||||
});
|
||||
} else {
|
||||
disabled = $.map( this.lis, function( li, num ) {
|
||||
return num !== index ? num : null;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return this;
|
||||
this._setupDisabled( disabled );
|
||||
},
|
||||
|
||||
disable: function( index ) {
|
||||
var disabled = this.options.disabled;
|
||||
if ( disabled === true ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( index === undefined ) {
|
||||
for ( var i = 0, len = this.lis.length; i < len; i++ ) {
|
||||
this.disable( i );
|
||||
disabled = true;
|
||||
} else {
|
||||
index = this._getIndex( index );
|
||||
if ( $.inArray( index, disabled ) !== -1 ) {
|
||||
return;
|
||||
}
|
||||
return this;
|
||||
}
|
||||
index = this._getIndex( index );
|
||||
var o = this.options;
|
||||
if ( !o.disabled || ($.isArray( o.disabled ) && $.inArray( index, o.disabled ) == -1 ) ) {
|
||||
this.lis.eq( index ).addClass( "ui-state-disabled" );
|
||||
|
||||
o.disabled = this.lis.map( function( i ) {
|
||||
return $(this).is( ".ui-state-disabled" ) ? i : null;
|
||||
}).get();
|
||||
|
||||
if ( o.disabled.length === this.anchors.length ) {
|
||||
o.disabled = true;
|
||||
if ( $.isArray( disabled ) ) {
|
||||
disabled = $.merge( [ index ], disabled ).sort();
|
||||
} else {
|
||||
disabled = [ index ];
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return this;
|
||||
this._setupDisabled( disabled );
|
||||
},
|
||||
|
||||
load: function( index, event ) {
|
||||
@ -626,6 +659,14 @@ $.extend( $.ui.tabs, {
|
||||
|
||||
// DEPRECATED
|
||||
if ( $.uiBackCompat !== false ) {
|
||||
|
||||
// url method
|
||||
(function( $, prototype ) {
|
||||
prototype.url = function( index, url ) {
|
||||
this.anchors.eq( index ).attr( "href", url );
|
||||
};
|
||||
}( jQuery, jQuery.ui.tabs.prototype ) );
|
||||
|
||||
// ajaxOptions and cache options
|
||||
(function( $, prototype ) {
|
||||
$.extend( prototype.options, {
|
||||
@ -636,7 +677,7 @@ if ( $.uiBackCompat !== false ) {
|
||||
var _create = prototype._create,
|
||||
_setOption = prototype._setOption,
|
||||
_destroy = prototype._destroy,
|
||||
oldurl = prototype._url;
|
||||
oldurl = prototype.url || $.noop;
|
||||
|
||||
$.extend( prototype, {
|
||||
_create: function() {
|
||||
@ -785,43 +826,38 @@ if ( $.uiBackCompat !== false ) {
|
||||
index = this.anchors.length;
|
||||
}
|
||||
|
||||
var self = this,
|
||||
o = this.options,
|
||||
$li = $( o.tabTemplate.replace( /#\{href\}/g, url ).replace( /#\{label\}/g, label ) ),
|
||||
id = !url.indexOf( "#" ) ? url.replace( "#", "" ) : this._tabId( $( "a", $li )[ 0 ] );
|
||||
var options = this.options,
|
||||
li = $( options.tabTemplate
|
||||
.replace( /#\{href\}/g, url )
|
||||
.replace( /#\{label\}/g, label ) ),
|
||||
id = !url.indexOf( "#" ) ?
|
||||
url.replace( "#", "" ) :
|
||||
this._tabId( li.find( "a" )[ 0 ] );
|
||||
|
||||
$li.addClass( "ui-state-default ui-corner-top" ).data( "destroy.tabs", true );
|
||||
li.addClass( "ui-state-default ui-corner-top" ).data( "destroy.tabs", true );
|
||||
li.find( "a" ).attr( "aria-controls", id );
|
||||
|
||||
// try to find an existing element before creating a new one
|
||||
var $panel = self.element.find( "#" + id );
|
||||
if ( !$panel.length ) {
|
||||
$panel = self._createPanel( id );
|
||||
var panel = this.element.find( "#" + id );
|
||||
if ( !panel.length ) {
|
||||
panel = this._createPanel( id );
|
||||
}
|
||||
$panel.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" ).hide();
|
||||
panel.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" ).hide();
|
||||
|
||||
if ( index >= this.lis.length ) {
|
||||
$li.appendTo( this.list );
|
||||
$panel.appendTo( this.list[ 0 ].parentNode );
|
||||
li.appendTo( this.list );
|
||||
panel.appendTo( this.list[ 0 ].parentNode );
|
||||
} else {
|
||||
$li.insertBefore( this.lis[ index ] );
|
||||
$panel.insertBefore( this.panels[ index ] );
|
||||
li.insertBefore( this.lis[ index ] );
|
||||
panel.insertBefore( this.panels[ index ] );
|
||||
}
|
||||
|
||||
o.disabled = $.map( o.disabled, function( n, i ) {
|
||||
options.disabled = $.map( options.disabled, function( n ) {
|
||||
return n >= index ? ++n : n;
|
||||
});
|
||||
|
||||
this.refresh();
|
||||
|
||||
if ( this.anchors.length == 1 ) {
|
||||
o.active = o.selected = 0;
|
||||
$li.addClass( "ui-tabs-active ui-state-active" );
|
||||
$panel.show();
|
||||
this.element.queue( "tabs", function() {
|
||||
self._trigger( "activate", null, self._ui( self.anchors[ 0 ], self.panels[ 0 ] ) );
|
||||
});
|
||||
|
||||
this.load( 0 );
|
||||
if ( this.lis.length === 1 && options.active === false ) {
|
||||
this.option( "active", 0 );
|
||||
}
|
||||
|
||||
this._trigger( "add", null, this._ui( this.anchors[ index ], this.panels[ index ] ) );
|
||||
@ -830,27 +866,27 @@ if ( $.uiBackCompat !== false ) {
|
||||
|
||||
prototype.remove = function( index ) {
|
||||
index = this._getIndex( index );
|
||||
var o = this.options,
|
||||
$li = this.lis.eq( index ).remove(),
|
||||
$panel = this.panels.eq( index ).remove();
|
||||
var options = this.options,
|
||||
tab = this.lis.eq( index ).remove(),
|
||||
panel = this.panels.eq( index ).remove();
|
||||
|
||||
// If selected tab was removed focus tab to the right or
|
||||
// in case the last tab was removed the tab to the left.
|
||||
if ( $li.hasClass( "ui-tabs-active" ) && this.anchors.length > 1) {
|
||||
if ( tab.hasClass( "ui-tabs-active" ) && this.anchors.length > 1) {
|
||||
this._activate( index + ( index + 1 < this.anchors.length ? 1 : -1 ) );
|
||||
}
|
||||
|
||||
o.disabled = $.map(
|
||||
$.grep( o.disabled, function(n, i) {
|
||||
return n != index;
|
||||
options.disabled = $.map(
|
||||
$.grep( options.disabled, function( n ) {
|
||||
return n !== index;
|
||||
}),
|
||||
function( n, i ) {
|
||||
function( n ) {
|
||||
return n >= index ? --n : n;
|
||||
});
|
||||
|
||||
this.refresh();
|
||||
|
||||
this._trigger( "remove", null, this._ui( $li.find( "a" )[ 0 ], $panel[ 0 ] ) );
|
||||
this._trigger( "remove", null, this._ui( tab.find( "a" )[ 0 ], panel[ 0 ] ) );
|
||||
return this;
|
||||
};
|
||||
}( jQuery, jQuery.ui.tabs.prototype ) );
|
||||
@ -862,13 +898,6 @@ if ( $.uiBackCompat !== false ) {
|
||||
};
|
||||
}( jQuery, jQuery.ui.tabs.prototype ) );
|
||||
|
||||
// url method
|
||||
(function( $, prototype ) {
|
||||
prototype.url = function( index, url ) {
|
||||
this.anchors.eq( index ).attr( "href", url );
|
||||
};
|
||||
}( jQuery, jQuery.ui.tabs.prototype ) );
|
||||
|
||||
// panel ids (idPrefix option + title attribute)
|
||||
(function( $, prototype ) {
|
||||
$.extend( prototype.options, {
|
||||
|
||||
5
ui/jquery.ui.widget.js
vendored
5
ui/jquery.ui.widget.js
vendored
@ -155,7 +155,10 @@ $.Widget.prototype = {
|
||||
widgetEventPrefix: "",
|
||||
defaultElement: "<div>",
|
||||
options: {
|
||||
disabled: false
|
||||
disabled: false,
|
||||
|
||||
// callbacks
|
||||
create: null
|
||||
},
|
||||
_createWidget: function( options, element ) {
|
||||
element = $( element || this.defaultElement || this )[ 0 ];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user