148 demos/accordion/hoverintent.html
View file

This file was deleted.

1 demos/accordion/index.html
View file
@@ -12,7 +12,6 @@
<li><a href="fillspace.html">Fill space</a></li>
<li><a href="no-auto-height.html">No auto height</a></li>
<li><a href="collapsible.html">Collapse content</a></li>
<li><a href="hoverintent.html">Open on hoverintent</a></li>
<li><a href="custom-icons.html">Customize icons</a></li>
<li><a href="sortable.html">Sortable</a></li>
</ul>
9 demos/accordion/no-auto-height.html
View file
@@ -4,17 +4,12 @@
<meta charset="utf-8">
<title>jQuery UI Accordion - No auto height</title>
<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/accordion.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#accordion" ).accordion({
heightStyle: "content"
});
});
</script>
</head>
<body>
15 demos/accordion/sortable.html
View file
@@ -4,19 +4,9 @@
<meta charset="utf-8">
<title>jQuery UI Accordion - Sortable</title>
<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/sortable.js"></script>
<script src="../../ui/accordion.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
/* IE has layout issues when sorting (see #5413) */
.group { zoom: 1 }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js" data-modules="sortable">
$( "#accordion" )
.accordion({
header: "> div > h3"
@@ -33,7 +23,6 @@
$( this ).accordion( "refresh" );
}
});
});
</script>
</head>
<body>
55 demos/autocomplete/categories.html
View file
@@ -4,12 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Categories</title>
<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/menu.js"></script>
<script src="../../ui/autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.ui-autocomplete-category {
@@ -19,31 +13,29 @@
line-height: 1.5;
}
</style>
<script>
$.widget( "custom.catcomplete", $.ui.autocomplete, {
_create: function() {
this._super();
this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
},
_renderMenu: function( ul, items ) {
var that = this,
currentCategory = "";
$.each( items, function( index, item ) {
var li;
if ( item.category != currentCategory ) {
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
currentCategory = item.category;
}
li = that._renderItemData( ul, item );
if ( item.category ) {
li.attr( "aria-label", item.category + " : " + item.label );
}
});
}
});
</script>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$.widget( "custom.catcomplete", $.ui.autocomplete, {
_create: function() {
this._super();
this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
},
_renderMenu: function( ul, items ) {
var that = this,
currentCategory = "";
$.each( items, function( index, item ) {
var li;
if ( item.category != currentCategory ) {
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
currentCategory = item.category;
}
li = that._renderItemData( ul, item );
if ( item.category ) {
li.attr( "aria-label", item.category + " : " + item.label );
}
});
}
});
var data = [
{ label: "anders", category: "" },
{ label: "andreas", category: "" },
@@ -60,7 +52,6 @@
delay: 0,
source: data
});
});
</script>
</head>
<body>
15 demos/autocomplete/combobox.html
View file
@@ -4,14 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Combobox</title>
<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/button.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/menu.js"></script>
<script src="../../ui/autocomplete.js"></script>
<script src="../../ui/tooltip.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.custom-combobox {
@@ -30,8 +22,8 @@
padding: 5px 10px;
}
</style>
<script>
(function( $ ) {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js" data-modules="tooltip button">
$.widget( "custom.combobox", {
_create: function() {
this.wrapper = $( "<span>" )
@@ -161,14 +153,11 @@
this.element.show();
}
});
})( jQuery );

$(function() {
$( "#combobox" ).combobox();
$( "#toggle" ).on( "click", function() {
$( "#combobox" ).toggle();
});
});
</script>
</head>
<body>
11 demos/autocomplete/custom-data.html
View file
@@ -4,12 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Custom data and display</title>
<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/menu.js"></script>
<script src="../../ui/autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#project-label {
@@ -27,8 +21,8 @@
padding: 0;
}
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
var projects = [
{
value: "jquery",
@@ -71,7 +65,6 @@
.append( "<div>" + item.label + "<br>" + item.desc + "</div>" )
.appendTo( ul );
};
});
</script>
</head>
<body>
11 demos/autocomplete/default.html
View file
@@ -4,15 +4,9 @@
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<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/menu.js"></script>
<script src="../../ui/autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
var availableTags = [
"ActionScript",
"AppleScript",
@@ -40,7 +34,6 @@
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
11 demos/autocomplete/folding.html
View file
@@ -4,15 +4,9 @@
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Accent folding</title>
<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/menu.js"></script>
<script src="../../ui/autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
var names = [ "Jörn Zaefferer", "Scott González", "John Resig" ];

var accentMap = {
@@ -36,7 +30,6 @@
}) );
}
});
});
</script>
</head>
<body>
11 demos/autocomplete/maxheight.html
View file
@@ -4,12 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Scrollable results</title>
<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/menu.js"></script>
<script src="../../ui/autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.ui-autocomplete {
@@ -25,8 +19,8 @@
height: 100px;
}
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
var availableTags = [
"ActionScript",
"AppleScript",
@@ -54,7 +48,6 @@
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
11 demos/autocomplete/multiple-remote.html
View file
@@ -4,20 +4,14 @@
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Multiple, remote</title>
<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/menu.js"></script>
<script src="../../ui/autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.ui-autocomplete-loading {
background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
}
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
function split( val ) {
return val.split( /,\s*/ );
}
@@ -62,7 +56,6 @@
return false;
}
});
});
</script>
</head>
<body>
11 demos/autocomplete/multiple.html
View file
@@ -4,15 +4,9 @@
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Multiple values</title>
<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/menu.js"></script>
<script src="../../ui/autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
var availableTags = [
"ActionScript",
"AppleScript",
@@ -75,7 +69,6 @@
return false;
}
});
});
</script>
</head>
<body>
11 demos/autocomplete/remote-jsonp.html
View file
@@ -4,21 +4,15 @@
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Remote JSONP datasource</title>
<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/menu.js"></script>
<script src="../../ui/autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.ui-autocomplete-loading {
background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
}
#city { width: 25em; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
@@ -44,7 +38,6 @@
log( "Selected: " + ui.item.label );
}
} );
} );
</script>
</head>
<body>
11 demos/autocomplete/remote-with-cache.html
View file
@@ -4,20 +4,14 @@
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Remote with caching</title>
<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/menu.js"></script>
<script src="../../ui/autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.ui-autocomplete-loading {
background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
}
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
var cache = {};
$( "#birds" ).autocomplete({
minLength: 2,
@@ -34,7 +28,6 @@
});
}
});
});
</script>
</head>
<body>
11 demos/autocomplete/remote.html
View file
@@ -4,20 +4,14 @@
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Remote datasource</title>
<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/menu.js"></script>
<script src="../../ui/autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.ui-autocomplete-loading {
background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
}
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
@@ -32,7 +26,6 @@
"Nothing selected, input was " + this.value );
}
});
});
</script>
</head>
<body>
11 demos/autocomplete/xml.html
View file
@@ -4,20 +4,14 @@
<meta charset="utf-8">
<title>jQuery UI Autocomplete - XML data parsed once</title>
<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/menu.js"></script>
<script src="../../ui/autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.ui-autocomplete-loading {
background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
}
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
function log( message ) {
$( "<div/>" ).text( message ).prependTo( "#log" );
$( "#log" ).attr( "scrollTop", 0 );
@@ -45,7 +39,6 @@
});
}
});
});
</script>
</head>
<body>
107 demos/bootstrap.js
View file
@@ -0,0 +1,107 @@
/* globals window:true, document:true */
( function() {

// Find the script element
var scripts = document.getElementsByTagName( "script" );
var script = scripts[ scripts.length - 1 ];

// Read the modules
var modules = script.getAttribute( "data-modules" );
var pathParts = window.location.pathname.split( "/" );
var effectsAll = [
"effects/effect-blind",
"effects/effect-bounce",
"effects/effect-clip",
"effects/effect-drop",
"effects/effect-explode",
"effects/effect-fade",
"effects/effect-fold",
"effects/effect-highlight",
"effects/effect-puff",
"effects/effect-pulsate",
"effects/effect-scale",
"effects/effect-shake",
"effects/effect-size",
"effects/effect-slide"
];
var widgets = [
"accordion",
"autocomplete",
"button",
"calendar",
"datepicker",
"dialog",
"draggable",
"droppable",
"menu",
"mouse",
"progressbar",
"resizable",
"selectable",
"selectmenu",
"slider",
"sortable",
"spinner",
"tabs",
"tooltip"
];

function getPath( module ) {
for ( var i = 0; i < widgets.length; i++ ) {
if ( widgets[ i ] === module ) {
return "widgets/" + module;
}
}
for ( var j = 0; j < effectsAll.length; j++ ) {
if ( module !== "effect" && effectsAll[ j ].indexOf( module ) !== -1 ) {
return "effects/" + module;
}
}
return module;
}
function fixPaths( modules ) {
for ( var i = 0; i < modules.length; i++ ) {
modules[ i ] = getPath( modules[ i ] );
}
return modules;
}

// Hide the page while things are loading to prevent a FOUC
document.documentElement.className = "demo-loading";

require.config( {
baseUrl: "../../ui",
paths: {
cldr: "../external/cldrjs/cldr",
date: "../external/date",
globalize: "../external/globalize/globalize",
"globalize-locales": "../external/localization",
jquery: "../external/jquery/jquery",
external: "../external/"
},
shim: {
"external/globalize-old/globalize.culture.de-DE": [ "external/globalize-old/globalize" ],
"external/globalize-old/globalize.culture.ja-JP": [ "external/globalize-old/globalize" ]
}
} );


// Replace effects all shortcut modules with all the effects modules
if ( modules && modules.indexOf( "effects-all" ) !== -1 ) {
modules = modules.replace( /effects-all/, effectsAll.join( " " ) );
}

modules = modules ? modules.replace( /^\s+|\s+$/g, "" ).split( /\s+/ ) : [];
modules.push( pathParts[ pathParts.length - 2 ] );
modules = fixPaths( modules );

require( modules, function() {
var newScript = document.createElement( "script" );

document.documentElement.className = "";

newScript.text = "( function() { " + script.innerHTML + " } )();";
document.head.appendChild( newScript ).parentNode.removeChild( newScript );
} );

} )();
18 demos/calendar/buttonbar.html
View file
@@ -4,30 +4,16 @@
<meta charset="utf-8">
<title>jQuery UI Calendar - Display button bar</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/cldrjs/cldr.js"></script>
<script src="../../external/cldrjs/cldr/supplemental.js"></script>
<script src="../../external/cldrjs/cldr/event.js"></script>
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
<script src="../../external/globalize/globalize/number.js"></script>
<script src="../../external/globalize/globalize/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../external/date.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#calendar" ).calendar({
buttons: {
Today: function() {
$( this ).calendar( "valueAsDate", new Date() );
}
}
});
});
</script>
</head>
<body>
18 demos/calendar/default.html
View file
@@ -4,24 +4,10 @@
<meta charset="utf-8">
<title>jQuery UI Calendar - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/cldrjs/cldr.js"></script>
<script src="../../external/cldrjs/cldr/supplemental.js"></script>
<script src="../../external/cldrjs/cldr/event.js"></script>
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
<script src="../../external/globalize/globalize/number.js"></script>
<script src="../../external/globalize/globalize/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../external/date.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#calendar" ).calendar();
});
</script>
</head>
<body>
18 demos/calendar/dropdown-month-year.html
View file
@@ -4,27 +4,13 @@
<meta charset="utf-8">
<title>jQuery UI Calendar - Display month &amp; year menus</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/cldrjs/cldr.js"></script>
<script src="../../external/cldrjs/cldr/supplemental.js"></script>
<script src="../../external/cldrjs/cldr/event.js"></script>
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
<script src="../../external/globalize/globalize/number.js"></script>
<script src="../../external/globalize/globalize/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../external/date.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#calendar" ).calendar({
changeMonth: true,
changeYear: true
});
});
</script>
</head>
<body>
19 demos/calendar/localization.html
View file
@@ -4,22 +4,10 @@
<meta charset="utf-8">
<title>jQuery UI Calendar - Localize calendar</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/cldrjs/cldr.js"></script>
<script src="../../external/cldrjs/cldr/supplemental.js"></script>
<script src="../../external/cldrjs/cldr/event.js"></script>
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
<script src="../../external/globalize/globalize/number.js"></script>
<script src="../../external/globalize/globalize/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../external/date.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<link rel="stylesheet" href="../../themes/base/all.css">
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js" data-modules="external/localization">
var calendar = $( "#calendar" ),
select = $( "#locale" );

@@ -33,7 +21,6 @@
});
calendar.calendar( "valueAsDate", calendar.calendar( "valueAsDate" ) );
});
});
</script>
</head>
<body>
18 demos/calendar/min-max.html
View file
@@ -4,22 +4,9 @@
<meta charset="utf-8">
<title>jQuery UI Calendar - Restrict date range</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/cldrjs/cldr.js"></script>
<script src="../../external/cldrjs/cldr/supplemental.js"></script>
<script src="../../external/cldrjs/cldr/event.js"></script>
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
<script src="../../external/globalize/globalize/number.js"></script>
<script src="../../external/globalize/globalize/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../external/date.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
var now = new Date(),
dateMin = new Date( now.getFullYear(), now.getMonth(), now.getDay() + 1 ),
dateMax = new Date( now.getFullYear(), now.getMonth(), now.getDay() + 8 );
@@ -28,7 +15,6 @@
min: dateMin,
max: dateMax
});
});
</script>
</head>
<body>
18 demos/calendar/multiple-months.html
View file
@@ -4,26 +4,12 @@
<meta charset="utf-8">
<title>jQuery UI Calendar - Display multiple months</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/cldrjs/cldr.js"></script>
<script src="../../external/cldrjs/cldr/supplemental.js"></script>
<script src="../../external/cldrjs/cldr/event.js"></script>
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
<script src="../../external/globalize/globalize/number.js"></script>
<script src="../../external/globalize/globalize/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../external/date.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#calendar" ).calendar({
numberOfMonths: 3
});
});
</script>
</head>
<body>
18 demos/calendar/other-months.html
View file
@@ -4,22 +4,9 @@
<meta charset="utf-8">
<title>jQuery UI Calendar - Dates in other months</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/cldrjs/cldr.js"></script>
<script src="../../external/cldrjs/cldr/supplemental.js"></script>
<script src="../../external/cldrjs/cldr/event.js"></script>
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
<script src="../../external/globalize/globalize/number.js"></script>
<script src="../../external/globalize/globalize/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../external/date.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#calendar" ).calendar({
eachDay: function( day ) {
if ( day.lead ) {
@@ -29,7 +16,6 @@
}
}
});
});
</script>
</head>
<body>
18 demos/calendar/show-week.html
View file
@@ -4,26 +4,12 @@
<meta charset="utf-8">
<title>jQuery UI Calendar - Show week of the year</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/cldrjs/cldr.js"></script>
<script src="../../external/cldrjs/cldr/supplemental.js"></script>
<script src="../../external/cldrjs/cldr/event.js"></script>
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
<script src="../../external/globalize/globalize/number.js"></script>
<script src="../../external/globalize/globalize/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../external/date.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#calendar" ).calendar({
showWeek: true
});
});
</script>
</head>
<body>
27 demos/datepicker/animation.html
View file
@@ -4,31 +4,9 @@
<meta charset="utf-8">
<title>jQuery UI Datepicker - Animations</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/cldrjs/cldr.js"></script>
<script src="../../external/cldrjs/cldr/supplemental.js"></script>
<script src="../../external/cldrjs/cldr/event.js"></script>
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
<script src="../../external/globalize/globalize/number.js"></script>
<script src="../../external/globalize/globalize/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../external/date.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.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-clip.js"></script>
<script src="../../ui/effect-drop.js"></script>
<script src="../../ui/effect-fold.js"></script>
<script src="../../ui/effect-slide.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js" data-modules="effect effect-bounce effect-blind effect-bounce effect-clip effect-drop effect-fold effect-slide">
$( "#datepicker" ).datepicker();
$( "#anim" ).on( "change", function() {
var value = $( this ).val(),
@@ -37,7 +15,6 @@
.datepicker( "option", "show", value )
.datepicker( "option", "hide", hideValue || value );
});
});
</script>
</head>
<body>
20 demos/datepicker/date-formats.html
View file
@@ -4,24 +4,9 @@
<meta charset="utf-8">
<title>jQuery UI Datepicker - Format date</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/cldrjs/cldr.js"></script>
<script src="../../external/cldrjs/cldr/supplemental.js"></script>
<script src="../../external/cldrjs/cldr/event.js"></script>
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
<script src="../../external/globalize/globalize/number.js"></script>
<script src="../../external/globalize/globalize/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../external/date.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
var value,
datepicker = $( "#datepicker" ).datepicker();

@@ -34,7 +19,6 @@
datepicker.datepicker( "option", "dateFormat", { date: value } );
}
});
});
</script>
</head>
<body>
20 demos/datepicker/default.html
View file
@@ -4,26 +4,10 @@
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/cldrjs/cldr.js"></script>
<script src="../../external/cldrjs/cldr/supplemental.js"></script>
<script src="../../external/cldrjs/cldr/event.js"></script>
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
<script src="../../external/globalize/globalize/number.js"></script>
<script src="../../external/globalize/globalize/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../external/date.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
50 demos/datepicker/icon-trigger.html
View file
@@ -4,41 +4,25 @@
<meta charset="utf-8">
<title>jQuery UI Datepicker - Icon trigger</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/cldrjs/cldr.js"></script>
<script src="../../external/cldrjs/cldr/supplemental.js"></script>
<script src="../../external/cldrjs/cldr/event.js"></script>
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
<script src="../../external/globalize/globalize/number.js"></script>
<script src="../../external/globalize/globalize/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../external/date.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
var allowOpen = false,
datepicker = $( "#datepicker" ).datepicker({
beforeOpen: function() {
return allowOpen;
},
open: function() {
allowOpen = false;
}
});
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
var allowOpen = false,
datepicker = $( "#datepicker" ).datepicker({
beforeOpen: function() {
return allowOpen;
},
open: function() {
allowOpen = false;
}
});

$( "<img src='images/calendar.gif' alt='Open Datepicker'>")
.insertAfter( datepicker )
.click( function() {
allowOpen = true;
datepicker.focus();
});
});
$( "<img src='images/calendar.gif' alt='Open Datepicker'>")
.insertAfter( datepicker )
.on( "click", function() {
allowOpen = true;
datepicker.focus();
});
</script>
</head>
<body>
20 demos/datepicker/localization.html
View file
@@ -4,24 +4,9 @@
<meta charset="utf-8">
<title>jQuery UI Datepicker - Localize calendar</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/cldrjs/cldr.js"></script>
<script src="../../external/cldrjs/cldr/supplemental.js"></script>
<script src="../../external/cldrjs/cldr/event.js"></script>
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
<script src="../../external/globalize/globalize/number.js"></script>
<script src="../../external/globalize/globalize/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../external/date.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js" data-modules="external/localization">
var datepicker = $( "#datepicker" ),
select = $( "#locale" );

@@ -35,7 +20,6 @@
});
datepicker.datepicker( "valueAsDate", datepicker.datepicker( "valueAsDate" ) );
});
});
</script>
</head>
<body>
4 demos/demos.css
View file
@@ -2,6 +2,10 @@ body {
font-family: Arial, Helvetica, sans-serif;
}

.demo-loading {
visibility: hidden;
}

table {
font-size: 1em;
}
17 demos/dialog/animated.html
View file
@@ -4,21 +4,9 @@
<meta charset="utf-8">
<title>jQuery UI Dialog - Animation</title>
<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/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>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js" data-modules="effect effect-blind effect-explode">
$( "#dialog" ).dialog({
autoOpen: false,
show: {
@@ -34,7 +22,6 @@
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
14 demos/dialog/default.html
View file
@@ -4,20 +4,10 @@
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<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/position.js"></script>
<script src="../../ui/resizable.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/dialog.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
13 demos/dialog/modal-confirmation.html
View file
@@ -4,17 +4,9 @@
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal confirmation</title>
<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/button.js"></script>
<script src="../../ui/draggable.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/dialog.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#dialog-confirm" ).dialog({
resizable: false,
height: "auto",
@@ -29,7 +21,6 @@
}
}
});
});
</script>
</head>
<body>
15 demos/dialog/modal-form.html
View file
@@ -4,16 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal form</title>
<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/button.js"></script>
<script src="../../ui/draggable.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/resizable.js"></script>
<script src="../../ui/dialog.js"></script>
<script src="../../ui/effect.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
label, input { display:block; }
@@ -26,8 +16,8 @@
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js" data-modules="effect">
var dialog, form,

// From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
@@ -116,7 +106,6 @@
$( "#create-user" ).button().on( "click", function() {
dialog.dialog( "open" );
});
});
</script>
</head>
<body>
14 demos/dialog/modal-message.html
View file
@@ -4,18 +4,9 @@
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal message</title>
<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/button.js"></script>
<script src="../../ui/draggable.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/resizable.js"></script>
<script src="../../ui/dialog.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js" data-modules="effect">
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
@@ -24,7 +15,6 @@
}
}
});
});
</script>
</head>
<body>
10 demos/draggable/constrain-movement.html
View file
@@ -4,11 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Draggable - Constrain movement</title>
<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>
<link rel="stylesheet" href="../demos.css">
<style>
.draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
@@ -18,14 +13,13 @@
#containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; }
h3 { clear: left; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#draggable" ).draggable({ axis: "y" });
$( "#draggable2" ).draggable({ axis: "x" });

$( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
$( "#draggable5" ).draggable({ containment: "parent" });
});
</script>
</head>
<body>
10 demos/draggable/cursor-style.html
View file
@@ -4,21 +4,15 @@
<meta charset="utf-8">
<title>jQuery UI Draggable - Cursor style</title>
<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>
<link rel="stylesheet" href="../demos.css">
<style>
#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#draggable" ).draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } });
$( "#draggable2" ).draggable({ cursor: "crosshair", cursorAt: { top: -5, left: -5 } });
$( "#draggable3" ).draggable({ cursorAt: { bottom: 0 } });
});
</script>
</head>
<body>
10 demos/draggable/default.html
View file
@@ -4,19 +4,13 @@
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<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>
<link rel="stylesheet" href="../demos.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
10 demos/draggable/events.html
View file
@@ -4,20 +4,15 @@
<meta charset="utf-8">
<title>jQuery UI Draggable - Events</title>
<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>
<link rel="stylesheet" href="../demos.css">
<style>
#draggable { width: 16em; padding: 0 1em; }
#draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; }
#draggable ul li span.ui-icon { float: left; }
#draggable ul li span.count { font-weight: bold; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
var $start_counter = $( "#event-start" ),
$drag_counter = $( "#event-drag" ),
$stop_counter = $( "#event-stop" ),
@@ -47,7 +42,6 @@
// ...then update the numbers
$( "span.count", $event_counter ).text( new_count );
}
});
</script>
</head>
<body>
10 demos/draggable/handle.html
View file
@@ -4,22 +4,16 @@
<meta charset="utf-8">
<title>jQuery UI Draggable - Handles</title>
<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>
<link rel="stylesheet" href="../demos.css">
<style>
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
#draggable p { cursor: move; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#draggable" ).draggable({ handle: "p" });
$( "#draggable2" ).draggable({ cancel: "p.ui-widget-header" });
$( "div, p" ).disableSelection();
});
</script>
</head>
<body>
10 demos/draggable/revert.html
View file
@@ -4,20 +4,14 @@
<meta charset="utf-8">
<title>jQuery UI Draggable - Revert position</title>
<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>
<link rel="stylesheet" href="../demos.css">
<style>
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#draggable" ).draggable({ revert: true });
$( "#draggable2" ).draggable({ revert: true, helper: "clone" });
});
</script>
</head>
<body>
10 demos/draggable/scroll.html
View file
@@ -4,21 +4,15 @@
<meta charset="utf-8">
<title>jQuery UI Draggable - Auto-scroll</title>
<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>
<link rel="stylesheet" href="../demos.css">
<style>
#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#draggable" ).draggable({ scroll: true });
$( "#draggable2" ).draggable({ scroll: true, scrollSensitivity: 100 });
$( "#draggable3" ).draggable({ scroll: true, scrollSpeed: 100 });
});
</script>
</head>
<body>
10 demos/draggable/snap-to.html
View file
@@ -4,25 +4,19 @@
<meta charset="utf-8">
<title>jQuery UI Draggable - Snap to element or grid</title>
<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>
<link rel="stylesheet" href="../demos.css">
<style>
.draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }
.ui-widget-header p, .ui-widget-content p { margin: 0; }
#snaptarget { height: 140px; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#draggable" ).draggable({ snap: true });
$( "#draggable2" ).draggable({ snap: ".ui-widget-header" });
$( "#draggable3" ).draggable({ snap: ".ui-widget-header", snapMode: "outer" });
$( "#draggable4" ).draggable({ grid: [ 20, 20 ] });
$( "#draggable5" ).draggable({ grid: [ 80, 80 ] });
});
</script>
</head>
<body>
11 demos/draggable/sortable.html
View file
@@ -4,19 +4,13 @@
<meta charset="utf-8">
<title>jQuery UI Draggable + Sortable</title>
<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/sortable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js" data-modules="sortable">
$( "#sortable" ).sortable({
revert: true
});
@@ -26,7 +20,6 @@
revert: "invalid"
});
$( "ul, li" ).disableSelection();
});
</script>
</head>
<body>
10 demos/draggable/visual-feedback.html
View file
@@ -4,20 +4,15 @@
<meta charset="utf-8">
<title>jQuery UI Draggable - Visual feedback</title>
<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>
<link rel="stylesheet" href="../demos.css">
<style>
#draggable, #draggable2, #draggable3, #set div { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
#draggable, #draggable2, #draggable3 { margin-bottom:20px; }
#set { clear:both; float:left; width: 368px; height: 120px; }
p { clear:both; margin:0; padding:1em 0; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#draggable" ).draggable({ helper: "original" });
$( "#draggable2" ).draggable({ opacity: 0.7, helper: "clone" });
$( "#draggable3" ).draggable({
@@ -28,7 +23,6 @@
}
});
$( "#set div" ).draggable({ stack: "#set div" });
});
</script>
</head>
<body>
11 demos/droppable/accepted-elements.html
View file
@@ -4,19 +4,13 @@
<meta charset="utf-8">
<title>jQuery UI Droppable - Accept</title>
<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/droppable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
#draggable, #draggable-nonvalid { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#draggable, #draggable-nonvalid" ).draggable();
$( "#droppable" ).droppable({
accept: "#draggable",
@@ -31,7 +25,6 @@
.html( "Dropped!" );
}
});
});
</script>
</head>
<body>
11 demos/droppable/default.html
View file
@@ -4,19 +4,13 @@
<meta charset="utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<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/droppable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
@@ -26,7 +20,6 @@
.html( "Dropped!" );
}
});
});
</script>
</head>
<body>
1 demos/droppable/index.html
View file
@@ -13,7 +13,6 @@
<li><a href="propagation.html">Prevent propagation</a></li>
<li><a href="visual-feedback.html">Visual feedback</a></li>
<li><a href="revert.html">Revert draggable position</a></li>
<li><a href="shopping-cart.html">Shopping Cart</a></li>
<li><a href="photo-manager.html">Simple photo manager</a></li>
</ul>

16 demos/droppable/photo-manager.html
View file
@@ -4,16 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Droppable - Simple photo manager</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/position.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/droppable.js"></script>
<script src="../../ui/resizable.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/dialog.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#gallery { float: left; width: 65%; min-height: 12em; }
@@ -29,8 +19,9 @@
#trash h4 .ui-icon { float: left; }
#trash .gallery h5 { display: none; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js" data-modules="dialog">

// there's the gallery and the trash
var $gallery = $( "#gallery" ),
$trash = $( "#trash" );
@@ -138,7 +129,6 @@

return false;
});
});
</script>
</head>
<body>
11 demos/droppable/propagation.html
View file
@@ -4,20 +4,14 @@
<meta charset="utf-8">
<title>jQuery UI Droppable - Prevent propagation</title>
<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/droppable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#draggable { width: 100px; height: 40px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable, #droppable2 { width: 230px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
#droppable-inner, #droppable2-inner { width: 170px; height: 60px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#draggable" ).draggable();

$( "#droppable, #droppable-inner" ).droppable({
@@ -47,7 +41,6 @@
.html( "Dropped!" );
}
});
});
</script>
</head>
<body>
11 demos/droppable/revert.html
View file
@@ -4,19 +4,13 @@
<meta charset="utf-8">
<title>jQuery UI Droppable - Revert draggable position</title>
<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/droppable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#draggable" ).draggable({ revert: "valid" });
$( "#draggable2" ).draggable({ revert: "invalid" });

@@ -32,7 +26,6 @@
.html( "Dropped!" );
}
});
});
</script>
</head>
<body>
11 demos/droppable/visual-feedback.html
View file
@@ -4,20 +4,14 @@
<meta charset="utf-8">
<title>jQuery UI Droppable - Visual feedback</title>
<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/droppable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#draggable, #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable, #droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
h3 { clear: left; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
classes: {
@@ -44,7 +38,6 @@
.html( "Dropped!" );
}
});
});
</script>
</head>
<body>
7 demos/effect/addClass.html
View file
@@ -4,17 +4,15 @@
<meta charset="utf-8">
<title>jQuery UI Effects - addClass demo</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/effect.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.toggler { width: 500px; height: 200px; position: relative; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; padding: 1em; border: 1px solid #000; background: #eee; color: #333; }
.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 120px; padding: 30px; margin: 10px; font-size: 1.1em; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#button" ).on( "click", function() {
$( "#effect" ).addClass( "newClass", 1000, callback );
});
@@ -24,7 +22,6 @@
$( "#effect" ).removeClass( "newClass" );
}, 1500 );
}
});
</script>
</head>
<body>
7 demos/effect/animate.html
View file
@@ -4,17 +4,15 @@
<meta charset="utf-8">
<title>jQuery UI Effects - Animate demo</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/effect.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.toggler { width: 500px; height: 200px; position: relative; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; background: #fff; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
var state = true;
$( "#button" ).on( "click", function() {
if ( state ) {
@@ -32,7 +30,6 @@
}
state = !state;
});
});
</script>
</head>
<body>
22 demos/effect/default.html
View file
@@ -4,23 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Effects - Effect demo</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.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-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-shake.js"></script>
<script src="../../ui/effect-size.js"></script>
<script src="../../ui/effect-slide.js"></script>
<script src="../../ui/effect-transfer.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.toggler { width: 500px; height: 200px; position: relative; }
@@ -29,8 +12,8 @@
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
.ui-effects-transfer { border: 2px dotted gray; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js" data-modules="effects-all">
// run the currently selected effect
function runEffect() {
// get effect type from
@@ -63,7 +46,6 @@
runEffect();
return false;
});
});
</script>
</head>
<body>
7 demos/effect/easing.html
View file
@@ -4,17 +4,15 @@
<meta charset="utf-8">
<title>jQuery UI Effects - Easing demo</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/effect.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.graph {
float: left;
margin-left: 10px;
}
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
if ( !$( "<canvas>" )[0].getContext ) {
$( "<div>" ).text(
"Your browser doesn't support canvas, which is required for this demo."
@@ -88,7 +86,6 @@

graph.width( width ).height( height + text.height() + 10 );
});
});
</script>
</head>
<body>
21 demos/effect/hide.html
View file
@@ -4,31 +4,15 @@
<meta charset="utf-8">
<title>jQuery UI Effects - Hide Demo</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.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-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-shake.js"></script>
<script src="../../ui/effect-size.js"></script>
<script src="../../ui/effect-slide.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.toggler { width: 500px; height: 200px; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js" data-modules="effects-all">
// run the currently selected effect
function runEffect() {
// get effect type from
@@ -58,7 +42,6 @@
$( "#button" ).on( "click", function() {
runEffect();
});
});
</script>
</head>
<body>
5 demos/effect/removeClass.html
View file
@@ -13,8 +13,8 @@
#effect { position: relative; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#button" ).on( "click", function() {
$( "#effect" ).removeClass( "newClass", 1000, callback );
});
@@ -24,7 +24,6 @@
$( "#effect" ).addClass( "newClass" );
}, 1500 );
}
});
</script>
</head>
<body>
21 demos/effect/show.html
View file
@@ -4,31 +4,15 @@
<meta charset="utf-8">
<title>jQuery UI Effects - Show Demo</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.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-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-shake.js"></script>
<script src="../../ui/effect-size.js"></script>
<script src="../../ui/effect-slide.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.toggler { width: 500px; height: 200px; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js" data-modules="effects-all">
// run the currently selected effect
function runEffect() {
// get effect type from
@@ -60,7 +44,6 @@
});

$( "#effect" ).hide();
});
</script>
</head>
<body>
9 demos/effect/switchClass.html
View file
@@ -4,8 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Effects - switchClass Demo</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/effect.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.toggler { width: 500px; height: 200px; position: relative; }
@@ -14,13 +12,12 @@
.newClass { width: 240px; padding: 1em; letter-spacing: 0; margin: 0; }
.anotherNewClass { text-indent: 40px; letter-spacing: .2em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.1em; }
</style>
<script>
$(function() {
$( "#button" ).on( "click", function(){
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#button" ).on( "click", function() {
$( ".newClass" ).switchClass( "newClass", "anotherNewClass", 1000 );
$( ".anotherNewClass" ).switchClass( "anotherNewClass", "newClass", 1000 );
});
});
</script>
</head>
<body>
21 demos/effect/toggle.html
View file
@@ -4,22 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Effects - Toggle Demo</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.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-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-shake.js"></script>
<script src="../../ui/effect-size.js"></script>
<script src="../../ui/effect-slide.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.toggler {
@@ -42,8 +26,8 @@
text-align: center;
}
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js" data-modules="effects-all">
// run the currently selected effect
function runEffect() {
// get effect type from
@@ -66,7 +50,6 @@
$( "#button" ).on( "click", function() {
runEffect();
});
});
</script>
</head>
<body>
7 demos/effect/toggleClass.html
View file
@@ -4,21 +4,18 @@
<meta charset="utf-8">
<title>jQuery UI Effects - toggleClass Demo</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/effect.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.toggler { width: 500px; height: 200px; position: relative; }
#button { padding: .5em 1em; text-decoration: none; }
#effect {position: relative; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#button" ).on( "click", function() {
$( "#effect" ).toggleClass( "newClass", 1000 );
});
});
</script>
</head>
<body>
10 demos/menu/categories.html
View file
@@ -4,18 +4,12 @@
<meta charset="utf-8">
<title>jQuery UI Menu - Categories</title>
<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/menu.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#menu" ).menu({
items: "> :not(.ui-widget-header)"
});
});
</script>
<style>
.ui-menu { width: 200px; }
10 demos/menu/default.html
View file
@@ -4,16 +4,10 @@
<meta charset="utf-8">
<title>jQuery UI Menu - Default functionality</title>
<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/menu.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#menu" ).menu();
});
</script>
<style>
.ui-menu { width: 150px; }
10 demos/menu/icons.html
View file
@@ -4,16 +4,10 @@
<meta charset="utf-8">
<title>jQuery UI Menu - Icons</title>
<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/menu.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#menu" ).menu();
});
</script>
<style>
.ui-menu { width: 150px; }
9 demos/position/cycler.html
View file
@@ -4,10 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Position - Image Cycler</title>
<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>
<link rel="stylesheet" href="../demos.css">
<style>
body {
@@ -23,8 +19,8 @@
position: absolute;
}
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
function left( element, using ) {
element.position({
my: "right middle",
@@ -83,7 +79,6 @@
center( $( "img:eq(1)" ), animate );
right( $( "img:eq(2)" ), animate );
});
});
</script>
</head>
<body>
11 demos/position/default.html
View file
@@ -4,12 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Position - Default functionality</title>
<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/position.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#parent {
@@ -41,8 +35,8 @@
margin-left: 15px;
}
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js" data-modules="draggable">
function position() {
$( ".positionable" ).position({
of: $( "#parent" ),
@@ -61,7 +55,6 @@
});

position();
});
</script>
</head>
<body>
9 demos/progressbar/default.html
View file
@@ -4,17 +4,12 @@
<meta charset="utf-8">
<title>jQuery UI Progressbar - Default functionality</title>
<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/progressbar.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#progressbar" ).progressbar({
value: 37
});
});
</script>
</head>
<body>
14 demos/progressbar/download.html
View file
@@ -4,18 +4,9 @@
<meta charset="utf-8">
<title>jQuery UI Progressbar - Download Dialog</title>
<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/progressbar.js"></script>
<script src="../../ui/mouse.js"></script>
<script src="../../ui/draggable.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/dialog.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js" data-modules="dialog">
var progressTimer,
progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" ),
@@ -83,7 +74,6 @@
.text( "Starting download..." );
downloadButton.trigger( "focus" );
}
});
</script>
<style>
#progressbar {
9 demos/progressbar/indeterminate.html
View file
@@ -4,13 +4,9 @@
<meta charset="utf-8">
<title>jQuery UI Progressbar - Indeterminate Value</title>
<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/progressbar.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#progressbar" ).progressbar({
value: false
});
@@ -31,7 +27,6 @@
progressbar.progressbar( "option", "value", false );
}
});
});
</script>
<style>
#progressbar .ui-progressbar-value {
9 demos/progressbar/label.html
View file
@@ -4,10 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Progressbar - Custom Label</title>
<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/progressbar.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.ui-progressbar {
@@ -21,8 +17,8 @@
text-shadow: 1px 1px 0 #fff;
}
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
var progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" );

@@ -47,7 +43,6 @@
}

setTimeout( progress, 2000 );
});
</script>
</head>
<body>
10 demos/resizable/animate.html
View file
@@ -4,23 +4,17 @@
<meta charset="utf-8">
<title>jQuery UI Resizable - Animate</title>
<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/resizable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-resizable-helper { border: 1px dotted gray; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#resizable" ).resizable({
animate: true
});
});
</script>
</head>
<body>
10 demos/resizable/aspect-ratio.html
View file
@@ -4,22 +4,16 @@
<meta charset="utf-8">
<title>jQuery UI Resizable - Preserve aspect ratio</title>
<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/resizable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#resizable { width: 160px; height: 90px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#resizable" ).resizable({
aspectRatio: 16 / 9
});
});
</script>
</head>
<body>
10 demos/resizable/constrain-area.html
View file
@@ -4,24 +4,18 @@
<meta charset="utf-8">
<title>jQuery UI Resizable - Constrain resize area</title>
<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/resizable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#container { width: 300px; height: 300px; }
#container h3 { text-align: center; margin: 0; margin-bottom: 10px; }
#resizable { background-position: top left; width: 150px; height: 150px; }
#resizable, #container { padding: 0.5em; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#resizable" ).resizable({
containment: "#container"
});
});
</script>
</head>
<body>
10 demos/resizable/default.html
View file
@@ -4,20 +4,14 @@
<meta charset="utf-8">
<title>jQuery UI Resizable - Default functionality</title>
<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/resizable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#resizable" ).resizable();
});
</script>
</head>
<body>
10 demos/resizable/helper.html
View file
@@ -4,23 +4,17 @@
<meta charset="utf-8">
<title>jQuery UI Resizable - Helper</title>
<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/resizable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-resizable-helper { border: 2px dotted #00F; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#resizable" ).resizable({
helper: "ui-resizable-helper"
});
});
</script>
</head>
<body>
10 demos/resizable/max-min.html
View file
@@ -4,25 +4,19 @@
<meta charset="utf-8">
<title>jQuery UI Resizable - Maximum / minimum size</title>
<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/resizable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#resizable { width: 200px; height: 150px; padding: 5px; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#resizable" ).resizable({
maxHeight: 250,
maxWidth: 350,
minHeight: 150,
minWidth: 200
});
});
</script>
</head>
<body>
10 demos/resizable/snap-to-grid.html
View file
@@ -4,22 +4,16 @@
<meta charset="utf-8">
<title>jQuery UI Resizable - Snap to grid</title>
<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/resizable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#resizable" ).resizable({
grid: 50
});
});
</script>
</head>
<body>
10 demos/resizable/synchronous-resize.html
View file
@@ -4,25 +4,19 @@
<meta charset="utf-8">
<title>jQuery UI Resizable - Synchronous resize</title>
<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/resizable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#resizable { background-position: top left; }
#resizable, #also { width: 150px; height: 120px; padding: 0.5em; }
#resizable h3, #also h3 { text-align: center; margin: 0; }
#also { margin-top: 1em; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#resizable" ).resizable({
alsoResize: "#also"
});
$( "#also" ).resizable();
});
</script>
</head>
<body>
10 demos/resizable/textarea.html
View file
@@ -4,23 +4,17 @@
<meta charset="utf-8">
<title>jQuery UI Resizable - Textarea</title>
<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/resizable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.ui-resizable-se {
bottom: 17px;
}
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#resizable" ).resizable({
handles: "se"
});
});
</script>
</head>
<body>
10 demos/resizable/visual-feedback.html
View file
@@ -4,23 +4,17 @@
<meta charset="utf-8">
<title>jQuery UI Resizable - Visual feedback</title>
<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/resizable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-resizable-ghost { border: 1px dotted gray; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#resizable" ).resizable({
ghost: true
});
});
</script>
</head>
<body>
10 demos/selectable/default.html
View file
@@ -4,11 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Selectable - Default functionality</title>
<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/selectable.js"></script>
<link rel="stylesheet" href="../demos.css">

<style>
@@ -18,10 +13,9 @@
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#selectable" ).selectable();
});
</script>
</head>
<body>
10 demos/selectable/display-grid.html
View file
@@ -4,11 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Selectable - Display as grid</title>
<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/selectable.js"></script>
<link rel="stylesheet" href="../demos.css">

<style>
@@ -18,10 +13,9 @@
#selectable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
#selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#selectable" ).selectable();
});
</script>
</head>
<body>
10 demos/selectable/serialize.html
View file
@@ -4,11 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Selectable - Serialize</title>
<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/selectable.js"></script>
<link rel="stylesheet" href="../demos.css">

<style>
@@ -18,8 +13,8 @@
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
@@ -29,7 +24,6 @@
});
}
});
});
</script>
</head>
<body>
11 demos/selectmenu/custom_render.html
View file
@@ -5,15 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectmenu - Custom Rendering</title>
<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/menu.js"></script>
<script src="../../ui/selectmenu.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$.widget( "custom.iconselectmenu", $.ui.selectmenu, {
_renderItem: function( ul, item ) {
var li = $( "<li>" ),
@@ -47,7 +41,6 @@
.iconselectmenu()
.iconselectmenu( "menuWidget")
.addClass( "ui-menu-icons avatar" );
});
</script>
<style>
h2 {
33 demos/selectmenu/default.html
View file
@@ -5,27 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectmenu - Default functionality</title>
<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/menu.js"></script>
<script src="../../ui/selectmenu.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#speed" ).selectmenu();

$( "#files" ).selectmenu();

$( "#number" )
.selectmenu()
.selectmenu( "menuWidget" )
.addClass( "overflow" );

$( "#salutation" ).selectmenu();
});
</script>
<style>
fieldset {
border: 0;
@@ -38,6 +18,19 @@
height: 200px;
}
</style>
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#speed" ).selectmenu();

$( "#files" ).selectmenu();

$( "#number" )
.selectmenu()
.selectmenu( "menuWidget" )
.addClass( "overflow" );

$( "#salutation" ).selectmenu();
</script>
</head>
<body>

45 demos/selectmenu/product-selection.html
View file
@@ -5,33 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectmenu - Product Selection</title>
<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/menu.js"></script>
<script src="../../ui/selectmenu.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
var circle = $( "#circle" );

$( "#radius" ).selectmenu({
change: function( event, data ) {
circle.css({
width: data.item.value,
height: data.item.value
});
}
});

$( "#color" ).selectmenu({
change: function( event, data ) {
circle.css( "background", data.item.value );
}
});
});
</script>
<style>
fieldset {
border: 0;
@@ -50,6 +24,25 @@
height: 150px;
}
</style>
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
var circle = $( "#circle" );

$( "#radius" ).selectmenu({
change: function( event, data ) {
circle.css({
width: data.item.value,
height: data.item.value
});
}
});

$( "#color" ).selectmenu({
change: function( event, data ) {
circle.css( "background", data.item.value );
}
});
</script>
</head>
<body>

51 demos/slider/colorpicker.html
View file
@@ -4,11 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Slider - Colorpicker</title>
<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/slider.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#red, #green, #blue {
@@ -31,28 +26,29 @@
#blue .ui-slider-range { background: #729fcf; }
#blue .ui-slider-handle { border-color: #729fcf; }
</style>
<script>
function hexFromRGB(r, g, b) {
var hex = [
r.toString( 16 ),
g.toString( 16 ),
b.toString( 16 )
];
$.each( hex, function( nr, val ) {
if ( val.length === 1 ) {
hex[ nr ] = "0" + val;
}
});
return hex.join( "" ).toUpperCase();
}
function refreshSwatch() {
var red = $( "#red" ).slider( "value" ),
green = $( "#green" ).slider( "value" ),
blue = $( "#blue" ).slider( "value" ),
hex = hexFromRGB( red, green, blue );
$( "#swatch" ).css( "background-color", "#" + hex );
}
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
function hexFromRGB(r, g, b) {
var hex = [
r.toString( 16 ),
g.toString( 16 ),
b.toString( 16 )
];
$.each( hex, function( nr, val ) {
if ( val.length === 1 ) {
hex[ nr ] = "0" + val;
}
});
return hex.join( "" ).toUpperCase();
}
function refreshSwatch() {
var red = $( "#red" ).slider( "value" ),
green = $( "#green" ).slider( "value" ),
blue = $( "#blue" ).slider( "value" ),
hex = hexFromRGB( red, green, blue );
$( "#swatch" ).css( "background-color", "#" + hex );
}

$( "#red, #green, #blue" ).slider({
orientation: "horizontal",
range: "min",
@@ -64,7 +60,6 @@
$( "#red" ).slider( "value", 255 );
$( "#green" ).slider( "value", 140 );
$( "#blue" ).slider( "value", 60 );
});
</script>
</head>
<body class="ui-widget-content" style="border:0;">
10 demos/slider/default.html
View file
@@ -4,16 +4,10 @@
<meta charset="utf-8" >
<title>jQuery UI Slider - Default functionality</title>
<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/slider.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#slider" ).slider();
});
</script>
</head>
<body>
10 demos/slider/hotelrooms.html
View file
@@ -4,14 +4,9 @@
<meta charset="utf-8">
<title>jQuery UI Slider - Slider bound to select</title>
<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/slider.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
var select = $( "#minbeds" );
var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
min: 1,
@@ -25,7 +20,6 @@
$( "#minbeds" ).on( "change", function() {
slider.slider( "value", this.selectedIndex + 1 );
});
});
</script>
</head>
<body>
1 demos/slider/index.html
View file
@@ -18,7 +18,6 @@
<li><a href="range-vertical.html">Vertical range slider</a></li>
<li><a href="multiple-vertical.html">Multiple sliders</a></li>
<li><a href="colorpicker.html">Simple colorpicker</a></li>
<li><a href="side-scroll.html">Simple scrollbar</a></li>
</ul>

</body>
5 demos/slider/multiple-vertical.html
View file
@@ -15,8 +15,8 @@
height:120px; float:left; margin:15px
}
</style>
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
// setup master volume
$( "#master" ).slider({
value: 60,
@@ -35,7 +35,6 @@
orientation: "vertical"
});
});
});
</script>
</head>
<body>
10 demos/slider/range-vertical.html
View file
@@ -4,14 +4,9 @@
<meta charset="utf-8">
<title>jQuery UI Slider - Vertical range slider</title>
<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/slider.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#slider-range" ).slider({
orientation: "vertical",
range: true,
@@ -22,7 +17,6 @@
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
</head>
<body>