library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Tests: Use demo bootstrap for visual tests

Browse Source 
Adds a data-composite option and fixes paths for effects. Otherwise
just applies the same conversion as already applied to demos, sometimes
moving a <style> element to the right place.
This commit is contained in:
Jörn Zaefferer 2015-09-30 09:49:13 +02:00
parent c02f59981f
commit b698f809de
35 changed files with 243 additions and 485 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
Gruntfile.js
View File

@ -147,15 +147,12 @@ grunt.initConfig({
}, },
uglify: minify, uglify: minify,
htmllint: { htmllint: {
good: [ "tests/**/*.html" ].concat( htmllintBad.map( function( file ) { good: {
return "!" + file;
} ) ),
demos: {
options: { options: {
ignore: [ ignore: [
/The text content of element “script” was not in the required format: Expected space, tab, newline, or slash but found “.” instead/ /The text content of element “script” was not in the required format: Expected space, tab, newline, or slash but found “.” instead/
] }, ] },
src: [ "demos/**/*.html" ].concat( htmllintBad.map( function( file ) { src: [ "demos/**/*.html", "tests/**/*.html" ].concat( htmllintBad.map( function( file ) {
return "!" + file; return "!" + file;
} ) ) } ) )
}, },

19
demos/bootstrap.js vendored
View File

@ -7,6 +7,7 @@ var script = scripts[ scripts.length - 1 ];
// Read the modules // Read the modules
var modules = script.getAttribute( "data-modules" ); var modules = script.getAttribute( "data-modules" );
var composite = script.getAttribute( "data-composite" ) || false;
var pathParts = window.location.pathname.split( "/" ); var pathParts = window.location.pathname.split( "/" );
var effectsAll = [ var effectsAll = [
"effects/effect-blind", "effects/effect-blind",
@ -22,7 +23,8 @@ var effectsAll = [
"effects/effect-scale", "effects/effect-scale",
"effects/effect-shake", "effects/effect-shake",
"effects/effect-size", "effects/effect-size",
"effects/effect-slide" "effects/effect-slide",
"effects/effect-transfer"
]; ];
var widgets = [ var widgets = [
"accordion", "accordion",
@ -52,8 +54,13 @@ function getPath( module ) {
} }
} }
for ( var j = 0; j < effectsAll.length; j++ ) { for ( var j = 0; j < effectsAll.length; j++ ) {
if ( module !== "effect" && effectsAll[ j ].indexOf( module ) !== -1 ) { if ( module !== "effect" ) {
return "effects/" + module; if ( effectsAll[ j ] === module ) {
return module;
}
if ( effectsAll[ j ].indexOf( module ) !== -1 ) {
return "effects/" + module;
}
} }
} }
return module; return module;
@ -69,7 +76,7 @@ function fixPaths( modules ) {
document.documentElement.className = "demo-loading"; document.documentElement.className = "demo-loading";
require.config( { require.config( {
baseUrl: "../../ui", baseUrl: window.location.pathname.indexOf( "demos/" ) !== -1 ? "../../ui" : "../../../ui",
paths: { paths: {
jquery: "../external/jquery/jquery", jquery: "../external/jquery/jquery",
external: "../external/" external: "../external/"
@ -86,7 +93,9 @@ if ( modules && modules.indexOf( "effects-all" ) !== -1 ) {
} }
modules = modules ? modules.replace( /^\s+|\s+$/g, "" ).split( /\s+/ ) : []; modules = modules ? modules.replace( /^\s+|\s+$/g, "" ).split( /\s+/ ) : [];
modules.push( pathParts[ pathParts.length - 2 ] ); if ( !composite ) {
modules.push( pathParts[ pathParts.length - 2 ] );
}
modules = fixPaths( modules ); modules = fixPaths( modules );
require( modules, function() { require( modules, function() {

9
tests/visual/accordion/icons.html
View File

@ -4,12 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Accordion Visual Test</title> <title>Accordion Visual Test</title>
<link rel="stylesheet" href="../../../themes/base/all.css"> <link rel="stylesheet" href="../../../themes/base/all.css">
<script src="../../../external/jquery/jquery.js"></script> <script src="../../../external/requirejs/require.js"></script>
<script src="../../../ui/core.js"></script> <script src="../../../demos/bootstrap.js">
<script src="../../../ui/widget.js"></script>
<script src="../../../ui/accordion.js"></script>
<script>
$(function() {
$( "#accordion-ynynyn" ).accordion({ icons: null }); $( "#accordion-ynynyn" ).accordion({ icons: null });
$( "#accordion-ynyny" ).accordion(); $( "#accordion-ynyny" ).accordion();
$( "#accordion-ynyn" ).accordion({ icons: null }); $( "#accordion-ynyn" ).accordion({ icons: null });
@ -23,7 +19,6 @@
$( "#accordion-nyn" ).accordion({ icons: null }); $( "#accordion-nyn" ).accordion({ icons: null });
$( "#accordion-ny" ).accordion(); $( "#accordion-ny" ).accordion();
$( "#accordion-n" ).accordion({ icons: null }); $( "#accordion-n" ).accordion({ icons: null });
});
</script> </script>
</head> </head>
<body> <body>

7
tests/visual/addClass/queue.html
View File

@ -4,8 +4,6 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>addClass Visual Test : Queue</title> <title>addClass Visual Test : Queue</title>
<link rel="stylesheet" href="../../../themes/base/all.css"> <link rel="stylesheet" href="../../../themes/base/all.css">
<script src="../../../external/jquery/jquery.js"></script>
<script src="../../../ui/effect.js"></script>
<style> <style>
.box { .box {
width: 100px; width: 100px;
@ -22,8 +20,8 @@
background-color: #00f; background-color: #00f;
} }
</style> </style>
<script> <script src="../../../external/requirejs/require.js"></script>
$(function() { <script src="../../../demos/bootstrap.js" data-modules="effect" data-composite="true">
$( "#box1" ) $( "#box1" )
.delay( 500 ) .delay( 500 )
.addClass( "red", 2000 ) .addClass( "red", 2000 )
@ -37,7 +35,6 @@
.addClass( "green", 2000 ) .addClass( "green", 2000 )
.delay( 500 ) .delay( 500 )
.addClass( "blue", 2000 ); .addClass( "blue", 2000 );
});
</script> </script>
</head> </head>
<body> <body>

9
tests/visual/button/button.html
View File

@ -4,12 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Button Visual Test</title> <title>Button Visual Test</title>
<link rel="stylesheet" href="../../../themes/base/all.css"> <link rel="stylesheet" href="../../../themes/base/all.css">
<script src="../../../external/jquery/jquery.js"></script> <script src="../../../external/requirejs/require.js"></script>
<script src="../../../ui/core.js"></script> <script src="../../../demos/bootstrap.js">
<script src="../../../ui/widget.js"></script>
<script src="../../../ui/button.js"></script>
<script>
$(function() {
$( ".buttons" ).each(function() { $( ".buttons" ).each(function() {
$( this ).children() $( this ).children()
.eq( 0 ) .eq( 0 )
@ -31,7 +27,6 @@
.eq( 2 ) .eq( 2 )
.button(); .button();
}); });
});
</script> </script>
</head> </head>
<body> <body>

9
tests/visual/button/performance.html
View File

@ -4,12 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Button Visual Test: Initialization Performance</title> <title>Button Visual Test: Initialization Performance</title>
<link rel="stylesheet" href="../../../themes/base/all.css"> <link rel="stylesheet" href="../../../themes/base/all.css">
<script src="../../../external/jquery/jquery.js"></script> <script src="../../../external/requirejs/require.js"></script>
<script src="../../../ui/core.js"></script> <script src="../../../demos/bootstrap.js">
<script src="../../../ui/widget.js"></script>
<script src="../../../ui/button.js"></script>
<script>
$(function() {
var start, var start,
html = new Array( 500 ).join( "<button>button</button>" ); html = new Array( 500 ).join( "<button>button</button>" );
$( html ).appendTo( "body" ); $( html ).appendTo( "body" );
@ -17,7 +13,6 @@
start = $.now(); start = $.now();
$( "button" ).button(); $( "button" ).button();
$( "<p>" ).text( "Time to initialize: " + ($.now() - start) + "ms" ).prependTo( "body" ); $( "<p>" ).text( "Time to initialize: " + ($.now() - start) + "ms" ).prependTo( "body" );
});
</script> </script>
</head> </head>
<body> <body>

10
tests/visual/compound/accordion_tabs.html
View File

@ -5,16 +5,10 @@
<title>Compound Visual Test : Accordion in Tabs</title> <title>Compound Visual Test : Accordion in Tabs</title>
<link rel="stylesheet" href="../visual.css"> <link rel="stylesheet" href="../visual.css">
<link rel="stylesheet" href="../../../themes/base/all.css"> <link rel="stylesheet" href="../../../themes/base/all.css">
<script src="../../../external/jquery/jquery.js"></script> <script src="../../../external/requirejs/require.js"></script>
<script src="../../../ui/core.js"></script> <script src="../../../demos/bootstrap.js" data-modules="tabs accordion" data-composite="true">
<script src="../../../ui/widget.js"></script>
<script src="../../../ui/accordion.js"></script>
<script src="../../../ui/tabs.js"></script>
<script>
$(function() {
$( "#accordion-1, #accordion-2" ).accordion(); $( "#accordion-1, #accordion-2" ).accordion();
$( "#tabs" ).tabs(); $( "#tabs" ).tabs();
});
</script> </script>
</head> </head>
<body> <body>

15
tests/visual/compound/datepicker_dialog.html
View File

@ -5,21 +5,10 @@
<title>Compound Visual Test : Datepicker in Dialog</title> <title>Compound Visual Test : Datepicker in Dialog</title>
<link rel="stylesheet" href="../visual.css"> <link rel="stylesheet" href="../visual.css">
<link rel="stylesheet" href="../../../themes/base/all.css"> <link rel="stylesheet" href="../../../themes/base/all.css">
<script src="../../../external/jquery/jquery.js"></script> <script src="../../../external/requirejs/require.js"></script>
<script src="../../../ui/core.js"></script> <script src="../../../demos/bootstrap.js" data-modules="datepicker dialog" data-composite="true">
<script src="../../../ui/widget.js"></script>
<script src="../../../ui/mouse.js"></script>
<script src="../../../ui/position.js"></script>
<script src="../../../ui/resizable.js"></script>
<script src="../../../ui/draggable.js"></script>
<script src="../../../ui/button.js"></script>
<script src="../../../ui/datepicker.js"></script>
<script src="../../../ui/dialog.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker(); $( "#datepicker" ).datepicker();
$( "#dialog" ).dialog(); $( "#dialog" ).dialog();
});
</script> </script>
</head> </head>
<body> <body>

25
tests/visual/compound/dialog_widgets.html
View File

@ -5,26 +5,10 @@
<title>Compound Visual Test : All Widgets in Dialog</title> <title>Compound Visual Test : All Widgets in Dialog</title>
<link rel="stylesheet" href="../visual.css"> <link rel="stylesheet" href="../visual.css">
<link rel="stylesheet" href="../../../themes/base/all.css"> <link rel="stylesheet" href="../../../themes/base/all.css">
<script src="../../../external/jquery/jquery.js"></script> <script src="../../../external/requirejs/require.js"></script>
<script src="../../../ui/core.js"></script> <script src="../../../demos/bootstrap.js"
<script src="../../../ui/widget.js"></script> data-modules="accordion autocomplete button datepicker dialog progressbar slider tabs tooltip selectmenu"
<script src="../../../ui/mouse.js"></script> data-composite="true">
<script src="../../../ui/position.js"></script>
<script src="../../../ui/menu.js"></script>
<script src="../../../ui/resizable.js"></script>
<script src="../../../ui/draggable.js"></script>
<script src="../../../ui/accordion.js"></script>
<script src="../../../ui/autocomplete.js"></script>
<script src="../../../ui/button.js"></script>
<script src="../../../ui/datepicker.js"></script>
<script src="../../../ui/dialog.js"></script>
<script src="../../../ui/progressbar.js"></script>
<script src="../../../ui/slider.js"></script>
<script src="../../../ui/tabs.js"></script>
<script src="../../../ui/tooltip.js"></script>
<script src="../../../ui/selectmenu.js"></script>
<script>
$(function() {
$( "#dialog" ).dialog(); $( "#dialog" ).dialog();
$( "[title]" ).tooltip(); $( "[title]" ).tooltip();
$( "#accordion" ).accordion(); $( "#accordion" ).accordion();
@ -54,7 +38,6 @@
height: 75, height: 75,
modal: true modal: true
}); });
});
</script> </script>
</head> </head>
<body> <body>

12
tests/visual/compound/draggable_accordion.html
View File

@ -5,20 +5,15 @@
<title>Compound Visual Test : Draggable in Accordion</title> <title>Compound Visual Test : Draggable in Accordion</title>
<link rel="stylesheet" href="../visual.css"> <link rel="stylesheet" href="../visual.css">
<link rel="stylesheet" href="../../../themes/base/all.css"> <link rel="stylesheet" href="../../../themes/base/all.css">
<script src="../../../external/jquery/jquery.js"></script>
<script src="../../../ui/core.js"></script>
<script src="../../../ui/widget.js"></script>
<script src="../../../ui/mouse.js"></script>
<script src="../../../ui/accordion.js"></script>
<script src="../../../ui/draggable.js"></script>
<style> <style>
.draggable { .draggable {
width: 10em; width: 10em;
margin: 0.5em; margin: 0.5em;
} }
</style> </style>
<script> <script src="../../../external/requirejs/require.js"></script>
$(function() { <script src="../../../demos/bootstrap.js" data-modules="accordion draggable"
data-composite="true">
$( ".draggable" ).addClass( "ui-widget ui-widget-content ui-corner-all" ) $( ".draggable" ).addClass( "ui-widget ui-widget-content ui-corner-all" )
$( "#first .draggable" ).draggable(); $( "#first .draggable" ).draggable();
$( "#second .draggable" ).draggable({ $( "#second .draggable" ).draggable({
@ -29,7 +24,6 @@
appendTo: "body" appendTo: "body"
}); });
$( "#accordion" ).accordion(); $( "#accordion" ).accordion();
});
</script> </script>
</head> </head>
<body> <body>

13
tests/visual/compound/draggable_accordion_accordion_tabs_draggable.html
View File

@ -5,13 +5,6 @@
<title>Compound Visual Test : Draggable in Accordion</title> <title>Compound Visual Test : Draggable in Accordion</title>
<link rel="stylesheet" href="../visual.css"> <link rel="stylesheet" href="../visual.css">
<link rel="stylesheet" href="../../../themes/base/all.css"> <link rel="stylesheet" href="../../../themes/base/all.css">
<script src="../../../external/jquery/jquery.js"></script>
<script src="../../../ui/core.js"></script>
<script src="../../../ui/widget.js"></script>
<script src="../../../ui/mouse.js"></script>
<script src="../../../ui/accordion.js"></script>
<script src="../../../ui/draggable.js"></script>
<script src="../../../ui/tabs.js"></script>
<style> <style>
#main-draggable { #main-draggable {
width: 300px; width: 300px;
@ -27,8 +20,9 @@
margin: 0.5em; margin: 0.5em;
} }
</style> </style>
<script> <script src="../../../external/requirejs/require.js"></script>
$(function() { <script src="../../../demos/bootstrap.js" data-modules="accordion draggable tabs"
data-composite="true">
$( ".draggable" ) $( ".draggable" )
.addClass( "ui-widget ui-widget-content ui-corner-all" ) .addClass( "ui-widget ui-widget-content ui-corner-all" )
.draggable({ .draggable({
@ -44,7 +38,6 @@
$( "#main-draggable" ).draggable({ $( "#main-draggable" ).draggable({
handle: "#main-draggable-handle" handle: "#main-draggable-handle"
}); });
});
</script> </script>
</head> </head>
<body> <body>

12
tests/visual/compound/draggable_resizable.html
View File

@ -5,12 +5,6 @@
<title>Compound Visual Test: Draggable and Resizable block element</title> <title>Compound Visual Test: Draggable and Resizable block element</title>
<link rel="stylesheet" href="../visual.css"> <link rel="stylesheet" href="../visual.css">
<link rel="stylesheet" href="../../../themes/base/all.css"> <link rel="stylesheet" href="../../../themes/base/all.css">
<script src="../../../external/jquery/jquery.js"></script>
<script src="../../../ui/core.js"></script>
<script src="../../../ui/widget.js"></script>
<script src="../../../ui/mouse.js"></script>
<script src="../../../ui/draggable.js"></script>
<script src="../../../ui/resizable.js"></script>
<style> <style>
.draggable { .draggable {
margin: 0.5em; margin: 0.5em;
@ -21,8 +15,9 @@
position: absolute !important; position: absolute !important;
} }
</style> </style>
<script> <script src="../../../external/requirejs/require.js"></script>
$(function() { <script src="../../../demos/bootstrap.js" data-modules="draggable resizable"
data-composite="true">
$( ".draggable" ) $( ".draggable" )
.addClass( "ui-widget ui-widget-header ui-corner-all" ) .addClass( "ui-widget ui-widget-header ui-corner-all" )
.draggable({ .draggable({
@ -33,7 +28,6 @@
handles: "s" handles: "s"
}); });
$( ".draggable:last" ).addClass( "absolute" ); $( ".draggable:last" ).addClass( "absolute" );
});
</script> </script>
</head> </head>
<body> <body>

13
tests/visual/compound/sortable_accordion_sortable_tabs.html
View File

@ -5,15 +5,9 @@
<title>Compound Visual Test : Accordion in Tabs</title> <title>Compound Visual Test : Accordion in Tabs</title>
<link rel="stylesheet" href="../visual.css"> <link rel="stylesheet" href="../visual.css">
<link rel="stylesheet" href="../../../themes/base/all.css"> <link rel="stylesheet" href="../../../themes/base/all.css">
<script src="../../../external/jquery/jquery.js"></script> <script src="../../../external/requirejs/require.js"></script>
<script src="../../../ui/core.js"></script> <script src="../../../demos/bootstrap.js" data-modules="accordion tabs sortable"
<script src="../../../ui/widget.js"></script> data-composite="true">
<script src="../../../ui/mouse.js"></script>
<script src="../../../ui/sortable.js"></script>
<script src="../../../ui/accordion.js"></script>
<script src="../../../ui/tabs.js"></script>
<script>
$(function() {
$( "#accordion-1, #accordion-2" ) $( "#accordion-1, #accordion-2" )
.accordion({ .accordion({
header: "> div > h3" header: "> div > h3"
@ -24,7 +18,6 @@
.tabs() .tabs()
.find( ".ui-tabs-nav" ) .find( ".ui-tabs-nav" )
.sortable(); .sortable();
});
</script> </script>
</head> </head>
<body> <body>

12
tests/visual/compound/tabs_selectmenu.html
View File

@ -5,18 +5,10 @@
<title>Compound Visual Test : Selectmenu in Tabs</title> <title>Compound Visual Test : Selectmenu in Tabs</title>
<link rel="stylesheet" href="../visual.css"> <link rel="stylesheet" href="../visual.css">
<link rel="stylesheet" href="../../../themes/base/all.css"> <link rel="stylesheet" href="../../../themes/base/all.css">
<script src="../../../external/jquery/jquery.js"></script> <script src="../../../external/requirejs/require.js"></script>
<script src="../../../ui/core.js"></script> <script src="../../../demos/bootstrap.js" data-modules="tabs selectmenu" data-composite="true">
<script src="../../../ui/widget.js"></script>
<script src="../../../ui/position.js"></script>
<script src="../../../ui/menu.js"></script>
<script src="../../../ui/selectmenu.js"></script>
<script src="../../../ui/tabs.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs(); $( "#tabs" ).tabs();
$( "select" ).selectmenu(); $( "select" ).selectmenu();
});
</script> </script>
<style> <style>
select { width: 200px; } select { width: 200px; }

10
tests/visual/compound/tabs_tabs.html
View File

@ -5,15 +5,9 @@
<title>Compound Visual Test : Tabs in Tabs</title> <title>Compound Visual Test : Tabs in Tabs</title>
<link rel="stylesheet" href="../visual.css"> <link rel="stylesheet" href="../visual.css">
<link rel="stylesheet" href="../../../themes/base/all.css"> <link rel="stylesheet" href="../../../themes/base/all.css">
<script src="../../../external/jquery/jquery.js"></script> <script src="../../../external/requirejs/require.js"></script>
<script src="../../../ui/core.js"></script> <script src="../../../demos/bootstrap.js" data-modules="tabs" data-composite="true">
<script src="../../../ui/widget.js"></script>
<script src="../../../ui/accordion.js"></script>
<script src="../../../ui/tabs.js"></script>
<script>
$(function() {
$( "#tabs, #tabs-a, #tabs-b" ).tabs(); $( "#tabs, #tabs-a, #tabs-b" ).tabs();
});
</script> </script>
</head> </head>
<body> <body>

11
tests/visual/compound/tabs_tooltips.html
View File

@ -5,17 +5,10 @@
<title>Compound Visual Test : Tabs in Tabs</title> <title>Compound Visual Test : Tabs in Tabs</title>
<link rel="stylesheet" href="../visual.css"> <link rel="stylesheet" href="../visual.css">
<link rel="stylesheet" href="../../../themes/base/all.css"> <link rel="stylesheet" href="../../../themes/base/all.css">
<script src="../../../external/jquery/jquery.js"></script> <script src="../../../external/requirejs/require.js"></script>
<script src="../../../ui/core.js"></script> <script src="../../../demos/bootstrap.js" data-modules="tabs tooltip" data-composite="true">
<script src="../../../ui/widget.js"></script>
<script src="../../../ui/position.js"></script>
<script src="../../../ui/tooltip.js"></script>
<script src="../../../ui/tabs.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs(); $( "#tabs" ).tabs();
$( "a" ).tooltip(); $( "a" ).tooltip();
});
</script> </script>
</head> </head>
<body> <body>

17
tests/visual/dialog/animated.html
View File

@ -4,20 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Dialog Visual Test</title> <title>Dialog Visual Test</title>
<link rel="stylesheet" href="../../../themes/base/all.css"> <link rel="stylesheet" href="../../../themes/base/all.css">
<script src="../../../external/jquery/jquery.js"></script> <script src="../../../external/requirejs/require.js"></script>
<script src="../../../ui/core.js"></script> <script src="../../../demos/bootstrap.js" data-modules="effect-blind effect-explode">
<script src="../../../ui/widget.js"></script>
<script src="../../../ui/mouse.js"></script>
<script src="../../../ui/draggable.js"></script>
<script src="../../../ui/position.js"></script>
<script src="../../../ui/resizable.js"></script>
<script src="../../../ui/button.js"></script>
<script src="../../../ui/dialog.js"></script>
<script src="../../../ui/effect.js"></script>
<script src="../../../ui/effect-blind.js"></script>
<script src="../../../ui/effect-explode.js"></script>
<script>
$(function() {
$( "#dialog" ).dialog({ $( "#dialog" ).dialog({
autoOpen: false, autoOpen: false,
show: { show: {
@ -34,7 +22,6 @@
$( "#opener" ).on( "click", function() { $( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" ); $( "#dialog" ).dialog( "open" );
}); });
});
</script> </script>
</head> </head>
<body> <body>

21
tests/visual/dialog/complex-dialogs.html
View File

@ -4,24 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Dialog Visual Test</title> <title>Dialog Visual Test</title>
<link rel="stylesheet" href="../../../themes/base/all.css"> <link rel="stylesheet" href="../../../themes/base/all.css">
<script src="../../../external/jquery/jquery.js"></script> <script src="../../../external/requirejs/require.js"></script>
<script src="../../../ui/core.js"></script> <script src="../../../demos/bootstrap.js" data-modules="datepicker autocomplete tooltip">
<script src="../../../ui/widget.js"></script>
<script src="../../../ui/mouse.js"></script>
<script src="../../../ui/draggable.js"></script>
<script src="../../../ui/position.js"></script>
<script src="../../../ui/resizable.js"></script>
<script src="../../../ui/button.js"></script>
<script src="../../../ui/dialog.js"></script>
<!-- stuff needed to make things complex -->
<script src="../../../ui/datepicker.js"></script>
<script src="../../../ui/menu.js"></script>
<script src="../../../ui/autocomplete.js"></script>
<script src="../../../ui/tooltip.js"></script>
<script>
$(function() {
var dialog = $( "#dialog" ).dialog({ var dialog = $( "#dialog" ).dialog({
modal: true, modal: true,
width: 500, width: 500,
@ -87,7 +71,6 @@
}); });
$( document ).tooltip(); $( document ).tooltip();
});
</script> </script>
</head> </head>
<body> <body>

17
tests/visual/dialog/form.html
View File

@ -4,20 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Dialog Visual Test</title> <title>Dialog Visual Test</title>
<link rel="stylesheet" href="../../../themes/base/all.css"> <link rel="stylesheet" href="../../../themes/base/all.css">
<script src="../../../external/jquery/jquery.js"></script> <script src="../../../external/requirejs/require.js"></script>
<script src="../../../ui/core.js"></script> <script src="../../../demos/bootstrap.js">
<script src="../../../ui/widget.js"></script>
<script src="../../../ui/mouse.js"></script>
<script src="../../../ui/draggable.js"></script>
<script src="../../../ui/position.js"></script>
<script src="../../../ui/resizable.js"></script>
<script src="../../../ui/button.js"></script>
<script src="../../../ui/dialog.js"></script>
<script src="../../../ui/effect.js"></script>
<script src="../../../ui/effect-blind.js"></script>
<script src="../../../ui/effect-explode.js"></script>
<script>
$(function() {
$( "#form-dialog, #prompt-dialog" ).dialog({ $( "#form-dialog, #prompt-dialog" ).dialog({
autoOpen: false, autoOpen: false,
modal: true modal: true
@ -30,7 +18,6 @@
$( "#open-prompt" ).on( "click", function() { $( "#open-prompt" ).on( "click", function() {
$( "#prompt-dialog" ).dialog( "open" ); $( "#prompt-dialog" ).dialog( "open" );
}); });
});
</script> </script>
<style> <style>
label { label {

14
tests/visual/dialog/performance.html
View File

@ -4,17 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Dialog Visual Test - Modal Dialog in Large DOM</title> <title>Dialog Visual Test - Modal Dialog in Large DOM</title>
<link rel="stylesheet" href="../../../themes/base/all.css"> <link rel="stylesheet" href="../../../themes/base/all.css">
<script src="../../../external/jquery/jquery.js"></script> <script src="../../../external/requirejs/require.js"></script>
<script src="../../../ui/core.js"></script> <script src="../../../demos/bootstrap.js">
<script src="../../../ui/position.js"></script>
<script src="../../../ui/widget.js"></script>
<script src="../../../ui/mouse.js"></script>
<script src="../../../ui/draggable.js"></script>
<script src="../../../ui/resizable.js"></script>
<script src="../../../ui/button.js"></script>
<script src="../../../ui/dialog.js"></script>
<script>
$(function() {
var start, var start,
html = new Array( 500 ).join( $.trim( $( "#template" ).html() ) ); html = new Array( 500 ).join( $.trim( $( "#template" ).html() ) );
$( html ).appendTo( "body" ); $( html ).appendTo( "body" );
@ -31,7 +22,6 @@
$( "#dialog" ).dialog( "open" ); $( "#dialog" ).dialog( "open" );
$( "<li>Open: " + ($.now() - start) + "ms</li>" ).appendTo( "#log" ); $( "<li>Open: " + ($.now() - start) + "ms</li>" ).appendTo( "#log" );
}); });
});
</script> </script>
</head> </head>
<body> <body>

15
tests/visual/dialog/stacking.html
View File

@ -4,18 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Dialog Visual Test</title> <title>Dialog Visual Test</title>
<link rel="stylesheet" href="../../../themes/base/all.css"> <link rel="stylesheet" href="../../../themes/base/all.css">
<script src="../../../external/jquery/jquery.js"></script> <script src="../../../external/requirejs/require.js"></script>
<script src="../../../ui/core.js"></script> <script src="../../../demos/bootstrap.js">
<script src="../../../ui/widget.js"></script>
<script src="../../../ui/mouse.js"></script>
<script src="../../../ui/draggable.js"></script>
<script src="../../../ui/position.js"></script>
<script src="../../../ui/resizable.js"></script>
<script src="../../../ui/button.js"></script>
<script src="../../../ui/dialog.js"></script>
<script>
$(function() {
var iframeDialog = $( "#dialog-iframe" ).dialog({ var iframeDialog = $( "#dialog-iframe" ).dialog({
position: { position: {
my: "right-90 center" my: "right-90 center"
@ -34,7 +24,6 @@
width: 200, width: 200,
height: 150 height: 150
}); });
});
</script> </script>
</head> </head>
<body> <body>

10
tests/visual/draggable/replaced.html
View File

@ -4,19 +4,13 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Draggable Visual Test</title> <title>Draggable Visual Test</title>
<link rel="stylesheet" href="../../../themes/base/all.css"> <link rel="stylesheet" href="../../../themes/base/all.css">
<script src="../../../external/jquery/jquery.js"></script> <script src="../../../external/requirejs/require.js"></script>
<script src="../../../ui/core.js"></script> <script src="../../../demos/bootstrap.js">
<script src="../../../ui/widget.js"></script>
<script src="../../../ui/mouse.js"></script>
<script src="../../../ui/draggable.js"></script>
<script>
$(function() {
$( "#draggable" ) $( "#draggable" )
.draggable() .draggable()
.on( "mousedown", function() { .on( "mousedown", function() {
$( this ).html( "<div>replaced</div>" ); $( this ).html( "<div>replaced</div>" );
}); });
});
</script> </script>
<style> <style>

22
tests/visual/effects/all.html
View File

@ -4,24 +4,10 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery UI Effects Test Suite</title> <title>jQuery UI Effects Test Suite</title>
<link rel="stylesheet" href="effects.css"> <link rel="stylesheet" href="effects.css">
<script src="../../../external/jquery/jquery.js"></script> <script src="../../../external/requirejs/require.js"></script>
<script src="../../../ui/effect.js"></script> <script src="../../../demos/bootstrap.js" data-modules="effects-all" data-composite="true">
<script src="../../../ui/effect-blind.js"></script> require( ["./effects.js"] );
<script src="../../../ui/effect-bounce.js"></script> </script>
<script src="../../../ui/effect-clip.js"></script>
<script src="../../../ui/effect-drop.js"></script>
<script src="../../../ui/effect-explode.js"></script>
<script src="../../../ui/effect-fade.js"></script>
<script src="../../../ui/effect-fold.js"></script>
<script src="../../../ui/effect-highlight.js"></script>
<script src="../../../ui/effect-puff.js"></script>
<script src="../../../ui/effect-pulsate.js"></script>
<script src="../../../ui/effect-scale.js"></script>
<script src="../../../ui/effect-size.js"></script>
<script src="../../../ui/effect-shake.js"></script>
<script src="../../../ui/effect-slide.js"></script>
<script src="../../../ui/effect-transfer.js"></script>
<script src="effects.js"></script>
</head> </head>
<body> <body>

9
tests/visual/effects/clip.html
View File

@ -4,11 +4,9 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery UI Effects Test Suite</title> <title>jQuery UI Effects Test Suite</title>
<link rel="stylesheet" href="effects.css"> <link rel="stylesheet" href="effects.css">
<script src="../../../external/jquery/jquery.js"></script> <script src="../../../external/requirejs/require.js"></script>
<script src="../../../ui/effect.js"></script> <script src="../../../demos/bootstrap.js" data-modules="effect effect-clip"
<script src="../../../ui/effect-clip.js"></script> data-composite="true">
<script>
$(function() {
var target = $( ".target" ), var target = $( ".target" ),
duration = 2000; duration = 2000;
@ -33,7 +31,6 @@
direction: "vertical" direction: "vertical"
}, duration ); }, duration );
}); });
});
</script> </script>
<style> <style>
.clipped { .clipped {

4
tests/visual/effects/effects.js vendored
View File

@ -1,5 +1,3 @@
$( function() {
var duration = 1000, var duration = 1000,
wait = 500; wait = 500;
@ -104,5 +102,3 @@ $( "#removeClass" ).on( "click", function() {
$( "#toggleClass" ).on( "click", function() { $( "#toggleClass" ).on( "click", function() {
$( this ).toggleClass( "current", duration ); $( this ).toggleClass( "current", duration );
} ); } );
} );

71
tests/visual/effects/scale.html
View File

@ -4,12 +4,39 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery UI Effects Test Suite</title> <title>jQuery UI Effects Test Suite</title>
<link rel="stylesheet" href="effects.css"> <link rel="stylesheet" href="effects.css">
<script src="../../../external/jquery/jquery.js"></script> <style>
<script src="../../../ui/effect.js"></script> #testArea {
<script src="../../../ui/effect-scale.js"></script> width: 200px;
<script src="../../../ui/effect-size.js"></script> height: 200px;
<script> position: relative;
$(function() { }
#testBox {
width: 50px;
height: 50px;
background-color: #bada55;
color: black;
border: 10px solid #fff;
margin: 10px;
padding: 10px;
position: absolute;
left: 5px;
top: 5px;
}
label {
display: block;
}
#controls {
position: absolute;
z-index: 300;
left: 50%;
top: 50%;
margin-left: -200px;
width: 400px;
opacity: 0.8;
}
</style>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js" data-modules="effect-scale" data-composite="true">
var test = $( "#testBox" ), var test = $( "#testBox" ),
opts = $( ".arg" ), opts = $( ".arg" ),
optsRev = $( opts.get().reverse() ), optsRev = $( opts.get().reverse() ),
@ -84,39 +111,7 @@
.delay( 100 ) .delay( 100 )
.effect( effect ); .effect( effect );
} }
});
</script> </script>
<style>
#testArea {
width: 200px;
height: 200px;
position: relative;
}
#testBox {
width: 50px;
height: 50px;
background-color: #bada55;
color: black;
border: 10px solid #fff;
margin: 10px;
padding: 10px;
position: absolute;
left: 5px;
top: 5px;
}
label {
display: block;
}
#controls {
position: absolute;
z-index: 300;
left: 50%;
top: 50%;
margin-left: -200px;
width: 400px;
opacity: 0.8;
}
</style>
</head> </head>
<body> <body>

23
tests/visual/effects/shake.html
View File

@ -4,20 +4,6 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery UI Effects Test Suite</title> <title>jQuery UI Effects Test Suite</title>
<link rel="stylesheet" href="effects.css"> <link rel="stylesheet" href="effects.css">
<script src="../../../external/jquery/jquery.js"></script>
<script src="../../../ui/effect.js"></script>
<script src="../../../ui/effect-scale.js"></script>
<script src="../../../ui/effect-shake.js"></script>
<script>
$(function() {
$( "#btn" ).on( "click", function() {
$( ".shake" ).effect( "shake", {
duration: +$( "#duration" ).val(),
mode: "toggle"
});
});
});
</script>
<style> <style>
#inputbox { #inputbox {
background: green; background: green;
@ -54,6 +40,15 @@
padding: 10px; padding: 10px;
} }
</style> </style>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js" data-modules="effect-shake" data-composite="true">
$( "#btn" ).on( "click", function() {
$( ".shake" ).effect( "shake", {
duration: +$( "#duration" ).val(),
mode: "toggle"
});
});
</script>
</head> </head>
<body> <body>

1
tests/visual/index.html
View File

@ -89,6 +89,7 @@
<li><a href="compound/draggable_accordion_accordion_tabs_draggable.html">Nested Widgets</a></li> <li><a href="compound/draggable_accordion_accordion_tabs_draggable.html">Nested Widgets</a></li>
<li><a href="compound/draggable_resizable.html">Draggable Resizable</a></li> <li><a href="compound/draggable_resizable.html">Draggable Resizable</a></li>
<li><a href="compound/sortable_accordion_sortable_tabs.html">Sortable Tabs in Sortable Accordion</a></li> <li><a href="compound/sortable_accordion_sortable_tabs.html">Sortable Tabs in Sortable Accordion</a></li>
<li><a href="compound/tabs_selectmenu.html">Selectmenu in Tabs</a></li>
<li><a href="compound/tabs_tabs.html">Nested Tabs</a></li> <li><a href="compound/tabs_tabs.html">Nested Tabs</a></li>
<li><a href="compound/tabs_tooltips.html">Tabs with Tooltips</a></li> <li><a href="compound/tabs_tooltips.html">Tabs with Tooltips</a></li>
</ul> </ul>

24
tests/visual/menu/menu.html
View File

@ -4,13 +4,15 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Menu Visual Test: Default</title> <title>Menu Visual Test: Default</title>
<link rel="stylesheet" href="../../../themes/base/all.css"> <link rel="stylesheet" href="../../../themes/base/all.css">
<script src="../../../external/jquery/jquery.js"></script> <style>
<script src="../../../ui/core.js"></script> .ui-menu { width: 250px; margin-bottom: 2em; }
<script src="../../../ui/widget.js"></script> .menu4 { height: 225px; overflow-y: auto; overflow-x: hidden; }
<script src="../../../ui/position.js"></script> .address-item { border-bottom: 1px solid #999; }
<script src="../../../ui/menu.js"></script> .address-header { display: block; margin-bottom: .2em; font-weight: bold; }
<script> .address-content { display: block; margin-bottom: .2em; padding-left: 10px; }
$(function() { </style>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js">
function logger( event, ui ) { function logger( event, ui ) {
$( "<p>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" ); $( "<p>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" );
} }
@ -42,15 +44,7 @@
items: "> :not('.ui-menu-group')", items: "> :not('.ui-menu-group')",
select: logger select: logger
}); });
});
</script> </script>
<style>
.ui-menu { width: 250px; margin-bottom: 2em; }
.menu4 { height: 225px; overflow-y: auto; overflow-x: hidden; }
.address-item { border-bottom: 1px solid #999; }
.address-header { display: block; margin-bottom: .2em; font-weight: bold; }
.address-content { display: block; margin-bottom: .2em; padding-left: 10px; }
</style>
</head> </head>
<body> <body>

11
tests/visual/position/position.html
View File

@ -3,12 +3,6 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Position Visual Test</title> <title>Position Visual Test</title>
<script src="../../../external/jquery/jquery.js"></script>
<script src="../../../ui/core.js"></script>
<script src="../../../ui/widget.js"></script>
<script src="../../../ui/mouse.js"></script>
<script src="../../../ui/draggable.js"></script>
<script src="../../../ui/position.js"></script>
<style> <style>
.demo { .demo {
position: relative; position: relative;
@ -34,8 +28,8 @@
margin: 0 15px 15px 0; margin: 0 15px 15px 0;
} }
</style> </style>
<script> <script src="../../../external/requirejs/require.js"></script>
$(function() { <script src="../../../demos/bootstrap.js" data-modules="draggable">
var within = $( ".demo" ), var within = $( ".demo" ),
positionable = $( ".positionable" ); positionable = $( ".positionable" );
function position() { function position() {
@ -67,7 +61,6 @@
$( "select, input" ).on( "click keyup change", function() { position(); } ); $( "select, input" ).on( "click keyup change", function() { position(); } );
position(); position();
});
</script> </script>
</head> </head>
<body> <body>

128
tests/visual/position/position_feedback.html
View File

@ -4,13 +4,67 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Position Visual Test: Feedback</title> <title>Position Visual Test: Feedback</title>
<link rel="stylesheet" href="../../../themes/base/all.css"> <link rel="stylesheet" href="../../../themes/base/all.css">
<script src="../../../external/jquery/jquery.js"></script> <style>
<script src="../../../ui/core.js"></script> #target, .element {
<script src="../../../ui/widget.js"></script> position: absolute;
<script src="../../../ui/position.js"></script> border: 1px solid black;
<script src="../../../ui/menu.js"></script> border-radius: 5px;
<script> width: 75px;
$(function() { height: 25px;
padding: 5px;
font-size: 62.5%;
}
#target {
height: 75px;
}
.element:before {
font-size: 12pt;
content: "↑";
position: absolute;
top: -19px;
left: 5px;
}
.right:before {
left: auto;
right: 5px;
}
.bottom:before {
content: "↓";
top: auto;
bottom: -19px;
}
.center:before {
left: 50%;
right: auto;
}
.middle:before {
top: 50%;
bottom: auto;
}
.horizontal:before {
height: 10px;
top: 50%;
margin-top: -8px;
bottom: auto;
left: -18px;
right: auto;
content: "←";
}
.right.horizontal:before {
left: auto;
right: -18px;
content: "→";
}
.bottom.horizontal:before {
top: auto;
bottom: 5px;
}
.top.horizontal:before {
top: 5px;
}
</style>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js">
function using( position, feedback ) { function using( position, feedback ) {
$( this ) $( this )
.css( position ) .css( position )
@ -74,67 +128,7 @@
rightElement.position( positionWithOffset( rightElement.position( positionWithOffset(
0.9 * (event.pageX - targetOffset.left), -0.9 * (event.pageY - targetOffset.top) ) ); 0.9 * (event.pageX - targetOffset.left), -0.9 * (event.pageY - targetOffset.top) ) );
}); });
});
</script> </script>
<style>
#target, .element {
position: absolute;
border: 1px solid black;
border-radius: 5px;
width: 75px;
height: 25px;
padding: 5px;
font-size: 62.5%;
}
#target {
height: 75px;
}
.element:before {
font-size: 12pt;
content: "↑";
position: absolute;
top: -19px;
left: 5px;
}
.right:before {
left: auto;
right: 5px;
}
.bottom:before {
content: "↓";
top: auto;
bottom: -19px;
}
.center:before {
left: 50%;
right: auto;
}
.middle:before {
top: 50%;
bottom: auto;
}
.horizontal:before {
height: 10px;
top: 50%;
margin-top: -8px;
bottom: auto;
left: -18px;
right: auto;
content: "←";
}
.right.horizontal:before {
left: auto;
right: -18px;
content: "→";
}
.bottom.horizontal:before {
top: auto;
bottom: 5px;
}
.top.horizontal:before {
top: 5px;
}
</style>
</head> </head>
<body> <body>

31
tests/visual/selectmenu/selectmenu.html
View File

@ -4,14 +4,18 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Selectmenu Visual Test: Default</title> <title>Selectmenu Visual Test: Default</title>
<link rel="stylesheet" href="../../../themes/base/all.css"> <link rel="stylesheet" href="../../../themes/base/all.css">
<script src="../../../external/jquery/jquery.js"></script> <style>
<script src="../../../ui/core.js"></script> fieldset { border: 0; }
<script src="../../../ui/widget.js"></script> label { display: block; }
<script src="../../../ui/position.js"></script> select { width: 200px; }
<script src="../../../ui/menu.js"></script>
<script src="../../../ui/selectmenu.js"></script> .ui-selectmenu-button { display: block; margin-bottom: 1em;}
<script>
$(function() { /* width */
.width-menu { width: 196px; }
</style>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js">
var log = $("#log"), var log = $("#log"),
index = 0, index = 0,
text; text;
@ -119,18 +123,7 @@
var widthMenu = $("#width_menu").selectmenu(); var widthMenu = $("#width_menu").selectmenu();
widthMenu.selectmenu("menuWidget").addClass("width-menu"); widthMenu.selectmenu("menuWidget").addClass("width-menu");
});
</script> </script>
<style>
fieldset { border: 0; }
label { display: block; }
select { width: 200px; }
.ui-selectmenu-button { display: block; margin-bottom: 1em;}
/* width */
.width-menu { width: 196px; }
</style>
</head> </head>
<body> <body>

39
tests/visual/slider/range_slider.html
View File

@ -11,11 +11,23 @@
margin: 20px auto; margin: 20px auto;
} }
</style> </style>
<script src="../../../external/jquery/jquery.js"></script> <script src="../../../external/requirejs/require.js"></script>
<script src="../../../ui/core.js"></script> <script src="../../../demos/bootstrap.js">
<script src="../../../ui/widget.js"></script> var el = $( "#slider" ).slider({
<script src="../../../ui/mouse.js"></script> range: true,
<script src="../../../ui/slider.js"></script> min: 0,
max: 100,
values: [ 0, 50 ]
});
$( "#set-max-values" ).on( "click", function() {
el.slider( "option", { values: [ 100, 100 ] } );
});
$( "#set-min-values" ).on( "click", function() {
el.slider( "option", { values: [ 0, 0 ] } );
});
</script>
</head> </head>
<body> <body>
<div id="wrapper"> <div id="wrapper">
@ -26,22 +38,5 @@
<button id="set-max-values">set values to max</button> <button id="set-max-values">set values to max</button>
<button id="set-min-values">set values to min</button> <button id="set-min-values">set values to min</button>
</div> </div>
<script>
var el = $( "#slider" ).slider({
range: true,
min: 0,
max: 100,
values: [ 0, 50 ]
});
$( "#set-max-values" ).on( "click", function() {
el.slider( "option", { values: [ 100, 100 ] } );
});
$( "#set-min-values" ).on( "click", function() {
el.slider( "option", { values: [ 0, 0 ] } );
});
</script>
</body> </body>
</html> </html>

67
tests/visual/tooltip/animations.html
View File

@ -4,16 +4,6 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Tooltip Visual Test: Animations</title> <title>Tooltip Visual Test: Animations</title>
<link rel="stylesheet" href="../../../themes/base/all.css"> <link rel="stylesheet" href="../../../themes/base/all.css">
<script src="../../../external/jquery/jquery.js"></script>
<script src="../../../ui/core.js"></script>
<script src="../../../ui/widget.js"></script>
<script src="../../../ui/position.js"></script>
<script src="../../../ui/tooltip.js"></script>
<script src="../../../ui/effect.js"></script>
<script src="../../../ui/effect-blind.js"></script>
<script src="../../../ui/effect-bounce.js"></script>
<script src="../../../ui/effect-drop.js"></script>
<script src="../../../ui/effect-explode.js"></script>
<style> <style>
pre { pre {
width: 250px; width: 250px;
@ -21,52 +11,51 @@
padding: .5em; padding: .5em;
} }
</style> </style>
<script> <script src="../../../external/requirejs/require.js"></script>
$(function() { <script src="../../../demos/bootstrap.js">
$( "pre" ).each(function( index, elem ) { $( "pre" ).each(function( index, elem ) {
$( elem ) $( elem )
.attr( "title", "animated tooltips" ) .attr( "title", "animated tooltips" )
.tooltip( $.parseJSON( $( elem ).text() ) ); .tooltip( $.parseJSON( $( elem ).text() ) );
}); });
});
</script> </script>
</head> </head>
<body> <body>
<pre>{}</pre> <pre>{}</pre>
<pre>{ <pre>{
"show": { "show": {
"effect": "slideDown" "effect": "slideDown"
}, },
"hide": { "hide": {
"effect": "slideUp" "effect": "slideUp"
} }
}</pre> }</pre>
<pre>{ <pre>{
"show": { "show": {
"effect": "explode" "effect": "explode"
}, },
"hide": { "hide": {
"effect": "explode" "effect": "explode"
} }
}</pre> }</pre>
<pre>{ <pre>{
"show": { "show": {
"effect": "bounce" "effect": "bounce"
}, },
"hide": { "hide": {
"effect": "blind" "effect": "blind"
} }
}</pre> }</pre>
<pre>{ <pre>{
"show": { "show": {
"effect": "drop", "effect": "drop",
"direction": "right" "direction": "right"
}, },
"hide": { "hide": {
"effect": "drop", "effect": "drop",
"direction": "right" "direction": "right"
} }
}</pre> }</pre>
</body> </body>

11
tests/visual/tooltip/tooltip.html
View File

@ -4,19 +4,13 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Tooltip Visual Test: Default</title> <title>Tooltip Visual Test: Default</title>
<link rel="stylesheet" href="../../../themes/base/all.css"> <link rel="stylesheet" href="../../../themes/base/all.css">
<script src="../../../external/jquery/jquery.js"></script>
<script src="../../../ui/core.js"></script>
<script src="../../../ui/widget.js"></script>
<script src="../../../ui/position.js"></script>
<script src="../../../ui/button.js"></script>
<script src="../../../ui/tooltip.js"></script>
<style> <style>
.group { .group {
margin-top: 2em; margin-top: 2em;
} }
</style> </style>
<script> <script src="../../../external/requirejs/require.js"></script>
$(function() { <script src="../../../demos/bootstrap.js" data-modules="button">
// default // default
$( "#context1, form, #childish, #nested-input" ).tooltip(); $( "#context1, form, #childish, #nested-input" ).tooltip();
@ -103,7 +97,6 @@
}).on( "click", function() { }).on( "click", function() {
$( "#focus-on-me" ).trigger( "focus" ); $( "#focus-on-me" ).trigger( "focus" );
}); });
});
</script> </script>
</head> </head>
<body> <body>