diff options
author | Felix Nagel <info@felixnagel.com> | 2010-09-30 01:57:50 +0200 |
---|---|---|
committer | Felix Nagel <info@felixnagel.com> | 2010-09-30 01:57:50 +0200 |
commit | b4f771e5c9e00d9fbe90e73edbff56b380d6b58e (patch) | |
tree | ae33be66e408387d6f3d94967d1661af9aa002ad | |
parent | b582c963319ce960086417a6a77e5982a0871287 (diff) | |
parent | 99b71a51c8cec70ab7ebccf61d6d388ef114d92d (diff) | |
download | jquery-ui-b4f771e5c9e00d9fbe90e73edbff56b380d6b58e.tar.gz jquery-ui-b4f771e5c9e00d9fbe90e73edbff56b380d6b58e.zip |
Merge branch 'master' into selectmenu
164 files changed, 3875 insertions, 2631 deletions
diff --git a/build/build.xml b/build/build.xml index c05046ef9..17ea4c0e7 100644 --- a/build/build.xml +++ b/build/build.xml @@ -24,7 +24,7 @@ <property name="release.filename" value="jquery-ui-${release.version}" /> <property name="dist.dir" value="dist/${release.filename}/" /> - <property name="cdndist.dir" value="dist/${release.filename}-googlecdn" /> + <property name="cdndist.dir" value="dist/${release.filename}-cdn" /> <property name="build.dir" value="build" /> <property name="ui.dir" value="../" /> <property name="src.dir" value="${ui.dir}/ui/" /> @@ -315,7 +315,7 @@ <echo message="All trailing spaces removed." /> </target> - <target name="googlecdn"> + <target name="cdn"> <delete dir="${cdndist.dir}" /> <mkdir dir="${cdndist.dir}" /> <copy todir="${cdndist.dir}"> @@ -347,7 +347,10 @@ </for> <delete dir="${cdndist.dir}" includes="**/*.MD5" /> <zip destfile="${dist.dir}/../${release.filename}-googlecdn.zip"> - <zipfileset dir="dist/" includes="${release.filename}-googlecdn/" /> + <zipfileset dir="dist/" includes="${release.filename}-cdn/" /> + </zip> + <zip destfile="${dist.dir}/../${release.filename}-mscdn.zip"> + <zipfileset dir="dist/${release.filename}-cdn/" /> </zip> </target> diff --git a/build/release/changelog-shell b/build/release/changelog-shell new file mode 100644 index 000000000..f0a6fac23 --- /dev/null +++ b/build/release/changelog-shell @@ -0,0 +1,76 @@ + +This file contains a shell for the changelog, followed by a list of every commit for this release. + +Choose the appropriate line for the Summary section. + +Move all commit notes to the appropriate section. +- Each line should be in the following format: + [Fixed|Added]: The ticket description. ([Ticket link], [Commit link]) +- If the commit is not related to a bug or feature, e.g., whitepsace cleanup, remove it. +- If there is no ticket number, search Trac for the relevant ticket. + - If there is no ticket, create one (if needed), or leave just the commit link. + +Double check that "XXXX" does not appear anywhere in the changelog. + +Post this changelog at: CHANGELOG_URL + + + +DELETE EVERYTHING ABOVE THE FOLLOWING LINE +------------------------------------------ + += Summary = +This is the final release of jQuery UI 1.8. +-- OR -- +This is the second maintenance release for [[UI/Changelog/1.8|jQuery UI 1.8]]. + += Build = + += Core & Utilities = + +=== UI Core === + +=== Mouse === + +=== Widget Factory === + +=== Position === + += Interactions = + +=== Draggable === + +=== Droppable === + +=== Resizable === + +=== Selectable === + +=== Sortable === + += Widgets = + +=== Accordion === + +=== Autocomplete === + +=== Button === + +=== Datepicker === + +=== Dialog === + +=== Progressbar === + +=== Slider === + +=== Tabs === + += Effects = + +=== Individual effects === + += CSS Framework = + += Demos = + diff --git a/build/release/prepare-release b/build/release/prepare-release new file mode 100755 index 000000000..1b1675ac4 --- /dev/null +++ b/build/release/prepare-release @@ -0,0 +1,331 @@ +#!/bin/sh + +base_dir="`pwd`/jquery-ui-release" +repo_dir="$base_dir/jquery-ui" +release_dir="$repo_dir/build/release" + +github_repo="git@github.com:jquery/jquery-ui.git" +remote_cmd="ssh jqadmin@ui-dev.jquery.com /srv/dev.jqueryui.com/prepare-release" + + + +# +# Setup environment +# + +echo +echo "--------------------------" +echo "| SETTING UP ENVIRONMENT |" +echo "--------------------------" +echo + +mkdir $base_dir +cd $base_dir + +echo "Cloning repo from $github_repo..." +git clone $github_repo +cd $repo_dir + +echo +echo "Environment setup complete." +echo + + + +# +# Figure out which versions we're dealing with +# + +echo +echo "------------------------" +echo "| CALCULATING VERSIONS |" +echo "------------------------" +echo + +# NOTE: this will be different for minor and major releases +version=`$remote_cmd/get-latest-version` +major_minor=${version%.*} +point=${version##*.} +version_new="${major_minor}.$(($point + 1))" +version_next=`cat version.txt` + +echo "We are going from $version to $version_new." +echo "version.txt will be set to $version_next when complete." +echo "Press enter to continue, or ctrl+c to cancel." +read + + +# +# Generate shell for changelog +# + +echo +echo "------------------------" +echo "| GENERATING CHANGELOG |" +echo "------------------------" +echo + +echo "Creating shell for changelog..." +changelog_url="http:\/\/docs.jquery.com\/action\/edit\/UI\/Changelog\/$version_new" +`sed "s/CHANGELOG_URL/$changelog_url/" <$release_dir/changelog-shell >$base_dir/changelog` + + +# find all commits +echo "Adding commits to changelog..." +format_ticket='[http://dev.jqueryui.com/ticket/XXXX #XXXX]' +format_commit='[http://github.com/jquery/jquery-ui/commit/%H %h]' +format_full="* %s ($format_ticket, $format_commit)" +git whatchanged $version... --pretty=format:"$format_full" \ + -- ui themes demos build \ +| sed '/^:/ d' \ +| sed '/^$/ d' \ +| sed 's/\(Fixe[sd] #\)\([0-9][0-9]*\)\(.*\)\(XXXX #XXXX\)/Fixed #\2\3\2 #\2/' \ +| sort -f \ +>> $base_dir/changelog + +# find all fixed tickets +echo "Adding Trac tickets to changelog..." +$remote_cmd/generate-changelog >> $base_dir/changelog + +echo +echo "Changelog complete." +echo + + + +# +# Generate list of contributors +# + +echo +echo "--------------------------" +echo "| GATHERING CONTRIBUTORS |" +echo "--------------------------" +echo + + +# find all committers and authors +echo "Adding commiters and authors..." +format_contributors='%aN%n%cN' +git whatchanged $version... --pretty=format:"$format_contributors" \ +| sed '/^:/ d' \ +| sed '/^$/ d' \ +> $base_dir/thankyou + +# find all reporters and commenters from Trac +echo "Adding reporters and commenters from Trac..." +$remote_cmd/generate-contributors >> $base_dir/thankyou + +# sort names +echo "Sorting contributors..." +sort -f $base_dir/thankyou | uniq > $base_dir/_thankyou +mv $base_dir/_thankyou $base_dir/thankyou + +# find all people that were thanked +echo "Adding people thanked in commits..." +git whatchanged $version... \ +| grep -i thank \ +>> $base_dir/thankyou + +echo +echo "Find contributors from duplicates of fixed tickets and add them to:" +echo "$base_dir/thankyou" +echo "Press enter when done." +read + +echo +echo "Contributors list complete." +echo + + + +# +# Update version +# + +echo +echo "--------------------" +echo "| UPDATING VERSION |" +echo "--------------------" +echo + +echo "Updating version.txt to $version_new..." +echo $version_new > version.txt + +git commit -a -m "Tagging the $version_new release." +version_new_time=`git log -1 --pretty=format:"%ad"` +echo "Committed version.txt at $version_new_time..." + +echo "Tagging $version_new..." +git tag $version_new + +echo "Updating version.txt to $version_next..." +echo $version_next > version.txt + +git commit -a -m "Updating the master version to $version_next" +echo "Committed version.txt..." + +echo +echo "Version update complete." +echo + + + +# +# Push to GitHub +# + +echo +echo "---------------------" +echo "| PUSHING TO GITHUB |" +echo "---------------------" +echo + +echo "Please review the output and generated files as a sanity check." +echo "Press enter to continue or ctrl+c to abort." +read + +git push +git push --tags + +echo +echo "Push to GitHub complete." +echo + + + +# +# Update Trac +# + +echo +echo "-----------------" +echo "| UPDATING TRAC |" +echo "-----------------" +echo + +# TODO: automate this +# NOTE: this will be different for minor and major releases +milestone=`$remote_cmd/get-latest-milestone` + +# Create new milestrone and version +echo "$version_new was tagged at $version_new_time." +echo "Create and close the $version_new Milestone with the above date and time." +echo "Create the $version_new Version with the above date and time." +echo "Press enter when done." +read + +# Update milestone for all fixed tickets +echo "Change all $milestone fixed tickets to $version_new." +echo "Press enter when done." +read + +echo +echo "Trac updates complete." +echo + + + +# +# Build jQuery UI +# + +echo +echo "----------------------" +echo "| BUILDING JQUERY UI |" +echo "----------------------" +echo + +# check out the tagged version +echo "Checking out $version_new..." +git checkout $version_new +cd build + +# Update the link to the docs (never contains the patch version) +echo "Updating URL for API docs..." +sed "s/UI\/API\/\${release\.version}/UI\/API\/$major_minor/" build.xml >build.xml.tmp +mv build.xml.tmp build.xml + +# Run the build +echo "Running build..." +ant + +echo +echo "Build complete." +echo + + + +# +# Upload zip to Google Code +# + +echo +echo "----------------------" +echo "| UPDATE GOOGLE CODE |" +echo "----------------------" +echo + +echo "Upload zip to Google Code." +echo " http://code.google.com/p/jquery-ui/downloads/entry" +echo " Summary: jQuery UI $version_new (Source, demos, docs, themes, tests) STABLE" +echo " Labels: Featured, Type-Source, OpSys-All" +echo "Modify the previous release to no longer say STABLE at the end." +echo "Remove the featured label from the previous release." +echo "Press enter when done." +read + +echo +echo "Google Code update complete." +echo + + + +# +# Update SVN +# + +echo +echo "----------------" +echo "| UPDATING SVN |" +echo "----------------" +echo + +cd $base_dir +mkdir svn +cd svn + +echo "Checking out SVN tags..." +svn co --depth immediates https://jquery-ui.googlecode.com/svn/tags +cd tags + +echo "Unzipping build into tags/$version_new..." +unzip $repo_dir/build/dist/jquery-ui-$version_new.zip +mv jquery-ui-$version_new $version_new + +echo "Adding files to SVN..." +svn add $version_new + +echo "Setting svn:mime-type..." +find $version_new -name \*.js -exec svn propset svn:mime-type text/javascript {} \; +find $version_new -name \*.css -exec svn propset svn:mime-type text/css {} \; +find $version_new -name \*.html -exec svn propset svn:mime-type text/html {} \; +find $version_new -name \*.png -exec svn propset svn:mime-type image/png {} \; +find $version_new -name \*.gif -exec svn propset svn:mime-type image/gif {} \; + +# TODO: commit +echo +echo "svn commit with the following message:" +echo "Created $version_new tag from http://jquery-ui.googlecode.com/files/jquery-ui-$version_new.zip" +echo "Press enter when done." +read + +echo +echo "SVN update complete." +echo + + + +# +# Generate themes +# diff --git a/demos/accordion/collapsible.html b/demos/accordion/collapsible.html index 6618baff2..4adc144d1 100644 --- a/demos/accordion/collapsible.html +++ b/demos/accordion/collapsible.html @@ -1,17 +1,17 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Accordion - Collapse content</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.accordion.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#accordion").accordion({ + $( "#accordion" ).accordion({ collapsible: true }); }); @@ -50,10 +50,7 @@ <div class="demo-description"> - <p>By default, accordions always keep one section open. To allow for all sections to be be collapsible, set the <code>collapsible</code> option to true. Click on the currently open section to collapse its content pane.</p> - - </div><!-- End demo-description --> </body> diff --git a/demos/accordion/custom-icons.html b/demos/accordion/custom-icons.html index c81fb3120..6ad35ddbb 100644 --- a/demos/accordion/custom-icons.html +++ b/demos/accordion/custom-icons.html @@ -1,28 +1,28 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Accordion - Customize icons</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.accordion.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { var icons = { header: "ui-icon-circle-arrow-e", headerSelected: "ui-icon-circle-arrow-s" }; - $("#accordion").accordion({ + $( "#accordion" ).accordion({ icons: icons }); - $("#toggle").button().toggle(function() { - $("#accordion").accordion("option", "icons", false); + $( "#toggle" ).button().toggle(function() { + $( "#accordion" ).accordion( "option", "icons", false ); }, function() { - $("#accordion").accordion("option", "icons", icons); + $( "#accordion" ).accordion( "option", "icons", icons ); }); }); </script> @@ -62,9 +62,7 @@ <div class="demo-description"> - <p>Customize the header icons with the <code>icons</code> option, which accepts classes for the header's default and selected (open) state. Use any class from the UI CSS framework, or create custom classes with background images.</p> - </div><!-- End demo-description --> </body> diff --git a/demos/accordion/default.html b/demos/accordion/default.html index 2eb93dd7a..87e430b71 100644 --- a/demos/accordion/default.html +++ b/demos/accordion/default.html @@ -1,17 +1,17 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Accordion - Default functionality</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.accordion.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#accordion").accordion(); + $( "#accordion" ).accordion(); }); </script> </head> diff --git a/demos/accordion/fillspace.html b/demos/accordion/fillspace.html index 77507821c..ccfb19c0c 100644 --- a/demos/accordion/fillspace.html +++ b/demos/accordion/fillspace.html @@ -1,28 +1,28 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Accordion - Fill space</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.resizable.js"></script> + <script src="../../ui/jquery.ui.accordion.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#accordion").accordion({ + $( "#accordion" ).accordion({ fillSpace: true }); }); $(function() { - $("#accordionResizer").resizable({ + $( "#accordionResizer" ).resizable({ + minHeight: 140, resize: function() { - $("#accordion").accordion("resize"); - }, - minHeight: 140 + $( "#accordion" ).accordion( "resize" ); + } }); }); </script> @@ -69,11 +69,8 @@ <div class="demo-description"> - <p>Because the accordion is comprised of block-level elements, by default its width fills the available horizontal space. To fill the vertical space allocated by its container, set the boolean <code>fillSpace</code> option to true, and the script will automatically set the dimensions of the accordion to the height of its parent container. The accordion will also resize with its container if the container is <code>resizable</code>.</p> - </div><!-- End demo-description --> - </body> </html> diff --git a/demos/accordion/hoverintent.html b/demos/accordion/hoverintent.html index e0f2d742f..925d26c54 100644 --- a/demos/accordion/hoverintent.html +++ b/demos/accordion/hoverintent.html @@ -1,66 +1,67 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Accordion - Default functionality</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> - + <meta charset="utf-8"> + <title>jQuery UI Accordion - Open on hoverintent</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.accordion.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> + $(function() { + $("#accordion").accordion({ + event: "click hoverintent" + }); + }); + var cfg = ($.hoverintent = { sensitivity: 7, interval: 100 }); - + $.event.special.hoverintent = { setup: function() { - $(this).bind("mouseover", jQuery.event.special.hoverintent.handler); + $( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler ); }, teardown: function() { - $(this).unbind("mouseover", jQuery.event.special.hoverintent.handler); + $( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler ); }, - handler: function(event) { + handler: function( event ) { event.type = "hoverintent"; var self = this, args = arguments, - target = $(event.target), + target = $( event.target ), cX, cY, pX, pY; - - function track(event) { + + function track( event ) { cX = event.pageX; cY = event.pageY; }; pX = event.pageX; pY = event.pageY; function clear() { - target.unbind("mousemove", track).unbind("mouseout", arguments.callee); - clearTimeout(timeout); + target + .unbind( "mousemove", track ) + .unbind( "mouseout", arguments.callee ); + clearTimeout( timeout ); } function handler() { - if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) { + if ( ( Math.abs( pX - cX ) + Math.abs( pY - cY ) ) < cfg.sensitivity ) { clear(); - jQuery.event.handle.apply(self, args); + jQuery.event.handle.apply( self, args ); } else { - pX = cX; pY = cY; - timeout = setTimeout(handler, cfg.interval); + pX = cX; + pY = cY; + timeout = setTimeout( handler, cfg.interval ); } } - var timeout = setTimeout(handler, cfg.interval); - target.mousemove(track).mouseout(clear); + var timeout = setTimeout( handler, cfg.interval ); + target.mousemove( track ).mouseout( clear ); return true; } }; - - - $(function() { - $("#accordion").accordion({ - event: "click hoverintent" - }); - }); </script> </head> <body> diff --git a/demos/accordion/index.html b/demos/accordion/index.html index 70f0d9dee..d107dd881 100644 --- a/demos/accordion/index.html +++ b/demos/accordion/index.html @@ -1,23 +1,25 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Accordion Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> - <div class="demos-nav"> - <h4>Examples</h4> - <ul> - <li class="demo-config-on"><a href="default.html">Default functionality</a></li> - <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="mouseover.html">Open on mouseover</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> - </div> + +<div class="demos-nav"> + <h4>Examples</h4> + <ul> + <li class="demo-config-on"><a href="default.html">Default functionality</a></li> + <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="mouseover.html">Open on mouseover</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> +</div> + </body> </html> diff --git a/demos/accordion/mouseover.html b/demos/accordion/mouseover.html index 374fc7536..59db7f9e2 100644 --- a/demos/accordion/mouseover.html +++ b/demos/accordion/mouseover.html @@ -1,17 +1,17 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Accordion - Open on mouseover</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.accordion.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#accordion").accordion({ + $( "#accordion" ).accordion({ event: "mouseover" }); }); @@ -50,9 +50,7 @@ <div class="demo-description"> - <p>Toggle sections open/closed on mouseover with the <code>event</code> option. The default value for event is "click."</p> - </div><!-- End demo-description --> </body> diff --git a/demos/accordion/no-auto-height.html b/demos/accordion/no-auto-height.html index 5cd89c61c..053fa1975 100644 --- a/demos/accordion/no-auto-height.html +++ b/demos/accordion/no-auto-height.html @@ -1,17 +1,17 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Accordion - No Auto Height</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <meta charset="utf-8"> + <title>jQuery UI Accordion - No auto height</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.accordion.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#accordion").accordion({ + $( "#accordion" ).accordion({ autoHeight: false, navigation: true }); @@ -52,11 +52,8 @@ <div class="demo-description"> - <p>Setting <code>autoHeight: false</code> allows to accordion panels to keep their native height.</p> - <p>In addition, the <code>navigation</code> option is enabled, opening the panel based on the current location, eg. no-auto-height.html#panel2 would open the second panel on page load. It also finds anchors within the content, so #othercontent will open the third section, as it contains a link with that href.</p> - </div><!-- End demo-description --> </body> diff --git a/demos/accordion/sortable.html b/demos/accordion/sortable.html index 80487290f..c99c52c80 100644 --- a/demos/accordion/sortable.html +++ b/demos/accordion/sortable.html @@ -1,35 +1,37 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Accordion - Sortable</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.sortable.js"></script> + <script src="../../ui/jquery.ui.accordion.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { var stop = false; - $("#accordion h3").click(function(event) { - if (stop) { + $( "#accordion h3" ).click(function( event ) { + if ( stop ) { event.stopImmediatePropagation(); event.preventDefault(); stop = false; } }); - $("#accordion").accordion({ - header: "> div > h3" - }).sortable({ - axis: "y", - handle: "h3", - stop: function(event, ui) { - stop = true; - } - }); + $( "#accordion" ) + .accordion({ + header: "> div > h3" + }) + .sortable({ + axis: "y", + handle: "h3", + stop: function() { + stop = true; + } + }); }); </script> </head> @@ -74,9 +76,7 @@ <div class="demo-description"> - <p>Drag the header to re-order panels.</p> - </div><!-- End demo-description --> </body> diff --git a/demos/addClass/default.html b/demos/addClass/default.html index e2d9a79b0..343d53311 100644 --- a/demos/addClass/default.html +++ b/demos/addClass/default.html @@ -1,29 +1,29 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Effects - addClass Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - .toggler { width: 500px; height: 200px; position: relative;} + <meta charset="utf-8"> + <title>jQuery UI Effects - addClass demo</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.effects.core.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; 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 type="text/javascript"> + <script> $(function() { - $("#button").click(function() { - $('#effect').addClass('newClass', 1000, callback); + $( "#button" ).click(function() { + $( "#effect" ).addClass( "newClass", 1000, callback ); return false; }); - - function callback(){ - setTimeout(function(){ - $('#effect').removeClass('newClass'); - }, 1500); + + function callback() { + setTimeout(function() { + $( "#effect" ).removeClass( "newClass" ); + }, 1500 ); } }); </script> @@ -42,10 +42,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>This demo adds a class which animates: text-indent, letter-spacing, width, height, padding, margin, and font-size.</p> +<div class="demo-description"> +<p>This demo adds a class which animates: text-indent, letter-spacing, width, height, padding, margin, and font-size.</p> </div><!-- End demo-description --> </body> diff --git a/demos/addClass/index.html b/demos/addClass/index.html index 0e9af371f..f5bd6a0e4 100644 --- a/demos/addClass/index.html +++ b/demos/addClass/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Effects Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/animate/default.html b/demos/animate/default.html index 21afff719..da2cdf9ae 100644 --- a/demos/animate/default.html +++ b/demos/animate/default.html @@ -1,26 +1,34 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Effects - Animate Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - .toggler { width: 500px; height: 200px; position: relative;} + <meta charset="utf-8"> + <title>jQuery UI Effects - Animate demo</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.effects.core.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: 135px; padding: 0.4em; position: relative; background: #fff; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#button").toggle( + $( "#button" ).toggle( function() { - $("#effect").animate({backgroundColor: '#aa0000', color: '#fff', width: 500}, 1000); + $( "#effect" ).animate({ + backgroundColor: "#aa0000", + color: "#fff", + width: 500 + }, 1000 ); }, function() { - $("#effect").animate({backgroundColor: '#fff', color: '#000', width: 240}, 1000); + $( "#effect" ).animate({ + backgroundColor: "#fff", + color: "#000", + width: 240 + }, 1000 ); } ); }); @@ -43,10 +51,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Click the button above to preview the effect.</p> +<div class="demo-description"> +<p>Click the button above to preview the effect.</p> </div><!-- End demo-description --> </body> diff --git a/demos/animate/index.html b/demos/animate/index.html index 0e9af371f..f5bd6a0e4 100644 --- a/demos/animate/index.html +++ b/demos/animate/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Effects Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/autocomplete/categories.html b/demos/autocomplete/categories.html index bb59bf31e..04173705d 100644 --- a/demos/autocomplete/categories.html +++ b/demos/autocomplete/categories.html @@ -1,25 +1,25 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete Custom Data Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <meta charset="utf-8"> + <title>jQuery UI Autocomplete - Categories</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.autocomplete.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> .ui-autocomplete-category { - font-weight:bold; - padding:.2em .4em; - margin:.8em 0 .2em; - line-height:1.5; + font-weight: bold; + padding: .2em .4em; + margin: .8em 0 .2em; + line-height: 1.5; } </style> - <script type="text/javascript"> - $.widget("custom.catcomplete", $.ui.autocomplete, { + <script> + $.widget( "custom.catcomplete", $.ui.autocomplete, { _renderMenu: function( ul, items ) { var self = this, currentCategory = ""; @@ -33,7 +33,7 @@ } }); </script> - <script type="text/javascript"> + <script> $(function() { var data = [ { label: "anders", category: "" }, @@ -47,7 +47,7 @@ { label: "andreas johnson", category: "People" } ]; - $('#search').catcomplete({ + $( "#search" ).catcomplete({ delay: 0, source: data }); @@ -61,10 +61,10 @@ <input id="search" /> </div><!-- End demo --> + + <div class="demo-description"> -<p> - A categorized search result. Try typing "a" or "n". -</p> +<p>A categorized search result. Try typing "a" or "n".</p> </div><!-- End demo-description --> </body> diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html index 1b7b668a9..ab3503ed4 100644 --- a/demos/autocomplete/combobox.html +++ b/demos/autocomplete/combobox.html @@ -1,28 +1,27 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete Combobox Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - /* TODO shouldn't be necessary */ - .ui-button { margin-left: -1px; } - .ui-button-icon-only .ui-button-text { padding: 0.35em; } - .ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; } + <meta charset="utf-8"> + <title>jQuery UI Autocomplete - Combobox</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.autocomplete.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .ui-button { margin-left: -1px; } + .ui-button-icon-only .ui-button-text { padding: 0.35em; } + .ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; } </style> - <script type="text/javascript"> + <script> (function( $ ) { $.widget( "ui.combobox", { _create: function() { - var self = this; - var select = this.element.hide(), + var self = this, + select = this.element.hide(), selected = select.children( ":selected" ), value = selected.val() ? selected.text() : ""; var input = $( "<input>" ) @@ -50,7 +49,6 @@ }, select: function( event, ui ) { ui.item.option.selected = true; - //select.val( ui.item.option.value ); self._trigger( "selected", event, { item: ui.item.option }); @@ -108,12 +106,12 @@ }); } }); - })(jQuery); + })( jQuery ); $(function() { - $("#combobox").combobox(); - $("#toggle").click(function() { - $("#combobox").toggle(); + $( "#combobox" ).combobox(); + $( "#toggle" ).click(function() { + $( "#combobox" ).toggle(); }); }); </script> @@ -154,13 +152,11 @@ </div><!-- End demo --> + + <div class="demo-description"> -<p> -A custom widget built by composition of Autocomplete and Button. You can either type something into the field to get filtered suggestions based on your input, or use the button to get the full list of selections. -</p> -<p> -The input is read from an existing select-element for progressive enhancement, passed to Autocomplete with a customized source-option. -</p> +<p>A custom widget built by composition of Autocomplete and Button. You can either type something into the field to get filtered suggestions based on your input, or use the button to get the full list of selections.</p> +<p>The input is read from an existing select-element for progressive enhancement, passed to Autocomplete with a customized source-option.</p> </div><!-- End demo-description --> </body> diff --git a/demos/autocomplete/custom-data.html b/demos/autocomplete/custom-data.html index b9de20576..efc437bf9 100644 --- a/demos/autocomplete/custom-data.html +++ b/demos/autocomplete/custom-data.html @@ -1,16 +1,16 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete Custom Data Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <meta charset="utf-8"> + <title>jQuery UI Autocomplete - Custom data and display</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.autocomplete.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> #project-label { display: block; font-weight: bold; @@ -26,42 +26,42 @@ padding: 0; } </style> - <script type="text/javascript"> + <script> $(function() { var projects = [ { - value: 'jquery', - label: 'jQuery', - desc: 'the write less, do more, JavaScript library', - icon: 'jquery_32x32.png' + value: "jquery", + label: "jQuery", + desc: "the write less, do more, JavaScript library", + icon: "jquery_32x32.png" }, { - value: 'jquery-ui', - label: 'jQuery UI', - desc: 'the official user interface library for jQuery', - icon: 'jqueryui_32x32.png' + value: "jquery-ui", + label: "jQuery UI", + desc: "the official user interface library for jQuery", + icon: "jqueryui_32x32.png" }, { - value: 'sizzlejs', - label: 'Sizzle JS', - desc: 'a pure-JavaScript CSS selector engine', - icon: 'sizzlejs_32x32.png' + value: "sizzlejs", + label: "Sizzle JS", + desc: "a pure-JavaScript CSS selector engine", + icon: "sizzlejs_32x32.png" } ]; - - $('#project').autocomplete({ + + $( "#project" ).autocomplete({ minLength: 0, source: projects, - focus: function(event, ui) { - $('#project').val(ui.item.label); + focus: function( event, ui ) { + $( "#project" ).val( ui.item.label ); return false; }, - select: function(event, ui) { - $('#project').val(ui.item.label); - $('#project-id').val(ui.item.value); - $('#project-description').html(ui.item.desc); - $('#project-icon').attr('src', 'images/' + ui.item.icon); - + select: function( event, ui ) { + $( "#project" ).val( ui.item.label ); + $( "#project-id" ).val( ui.item.value ); + $( "#project-description" ).html( ui.item.desc ); + $( "#project-icon" ).attr( "src", "images/" + ui.item.icon ); + return false; } }) @@ -84,13 +84,11 @@ <p id="project-description"></p> </div><!-- End demo --> + + <div class="demo-description"> -<p> -You can use your own custom data formats and displays by simply overriding the default focus and select actions. -</p> -<p> -Try typing "j" to get a list of projects or just press the down arrow. -</p> +<p>You can use your own custom data formats and displays by simply overriding the default focus and select actions.</p> +<p>Try typing "j" to get a list of projects or just press the down arrow.</p> </div><!-- End demo-description --> </body> diff --git a/demos/autocomplete/default.html b/demos/autocomplete/default.html index 110263dac..7171d2af7 100644 --- a/demos/autocomplete/default.html +++ b/demos/autocomplete/default.html @@ -1,19 +1,42 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete Default Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <meta charset="utf-8"> + <title>jQuery UI Autocomplete - Default functionality</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.autocomplete.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"]; - $("#tags").autocomplete({ + var availableTags = [ + "ActionScript", + "AppleScript", + "Asp", + "BASIC", + "C", + "C++", + "Clojure", + "COBOL", + "ColdFusion", + "Erlang", + "Fortran", + "Groovy", + "Haskell", + "Java", + "JavaScript", + "Lisp", + "Perl", + "PHP", + "Python", + "Ruby", + "Scala", + "Scheme" + ]; + $( "#tags" ).autocomplete({ source: availableTags }); }); @@ -30,13 +53,11 @@ </div><!-- End demo --> + + <div class="demo-description"> -<p> -The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try. -</p> -<p> -The datasource is a simple JavaScript array, provided to the widget using the source-option. -</p> +<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p> +<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p> </div><!-- End demo-description --> </body> diff --git a/demos/autocomplete/folding.html b/demos/autocomplete/folding.html index d5bc71e9d..f6b97b655 100644 --- a/demos/autocomplete/folding.html +++ b/demos/autocomplete/folding.html @@ -1,25 +1,25 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete Accent Folding Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <meta charset="utf-8"> + <title>jQuery UI Autocomplete - Accent folding</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.autocomplete.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { var names = [ "Jörn Zaefferer", "Scott González", "John Resig" ]; var accentMap = { - 'á':'a', - 'ö':'o' + "á": "a", + "ö": "o" }; var normalize = function( term ) { - var ret = ''; + var ret = ""; for ( var i = 0; i < term.length; i++ ) { ret += accentMap[ term.charAt(i) ] || term.charAt(i); } @@ -51,13 +51,11 @@ </div><!-- End demo --> + + <div class="demo-description"> -<p> -The autocomplete field uses a custom source option which will match results that have accented characters even when the text field doesn't contain accented characters. However if the you type in accented characters in the text field it is smart enough not to show results that aren't accented. -</p> -<p> -Try typing "Jo" to see "John" and "Jörn", then type "Jö" to see only "Jörn". -</p> +<p>The autocomplete field uses a custom source option which will match results that have accented characters even when the text field doesn't contain accented characters. However if the you type in accented characters in the text field it is smart enough not to show results that aren't accented.</p> +<p>Try typing "Jo" to see "John" and "Jörn", then type "Jö" to see only "Jörn".</p> </div><!-- End demo-description --> </body> diff --git a/demos/autocomplete/index.html b/demos/autocomplete/index.html index 9d5ba3a87..77f801996 100644 --- a/demos/autocomplete/index.html +++ b/demos/autocomplete/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Autocomplete Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> <div class="demos-nav"> diff --git a/demos/autocomplete/maxheight.html b/demos/autocomplete/maxheight.html index 97de724ba..56e253aa9 100644 --- a/demos/autocomplete/maxheight.html +++ b/demos/autocomplete/maxheight.html @@ -1,16 +1,16 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete Scrollable Results Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <meta charset="utf-8"> + <title>jQuery UI Autocomplete - Scrollable results</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.autocomplete.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> .ui-autocomplete { max-height: 100px; overflow-y: auto; @@ -22,10 +22,33 @@ height: 100px; } </style> - <script type="text/javascript"> + <script> $(function() { - var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"]; - $("#tags").autocomplete({ + var availableTags = [ + "ActionScript", + "AppleScript", + "Asp", + "BASIC", + "C", + "C++", + "Clojure", + "COBOL", + "ColdFusion", + "Erlang", + "Fortran", + "Groovy", + "Haskell", + "Java", + "JavaScript", + "Lisp", + "Perl", + "PHP", + "Python", + "Ruby", + "Scala", + "Scheme" + ]; + $( "#tags" ).autocomplete({ source: availableTags }); }); @@ -42,10 +65,10 @@ </div><!-- End demo --> + + <div class="demo-description"> -<p> -When displaying a long list of options, you can simply set the max-height for the autocomplete menu to prevent the menu from growing too large. Try typing "a" or "s" above to get a long list of results that you can scroll through. -</p> +<p>When displaying a long list of options, you can simply set the max-height for the autocomplete menu to prevent the menu from growing too large. Try typing "a" or "s" above to get a long list of results that you can scroll through.</p> </div><!-- End demo-description --> </body> diff --git a/demos/autocomplete/multiple-remote.html b/demos/autocomplete/multiple-remote.html index 0f77e795d..96d787049 100644 --- a/demos/autocomplete/multiple-remote.html +++ b/demos/autocomplete/multiple-remote.html @@ -1,37 +1,37 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete multiple demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <meta charset="utf-8"> + <title>jQuery UI Autocomplete - Multiple, remote</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.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 type="text/javascript"> + <script> $(function() { - function split(val) { - return val.split(/,\s*/); + function split( val ) { + return val.split( /,\s*/ ); } - function extractLast(term) { - return split(term).pop(); + function extractLast( term ) { + return split( term ).pop(); } - - $("#birds").autocomplete({ - source: function(request, response) { - $.getJSON("search.php", { - term: extractLast(request.term) - }, response); + + $( "#birds" ).autocomplete({ + source: function( request, response ) { + $.getJSON( "search.php", { + term: extractLast( request.term ) + }, response ); }, search: function() { // custom minLength - var term = extractLast(this.value); - if (term.length < 2) { + var term = extractLast( this.value ); + if ( term.length < 2 ) { return false; } }, @@ -39,15 +39,15 @@ // prevent value inserted on focus return false; }, - select: function(event, ui) { + select: function( event, ui ) { var terms = split( this.value ); // remove the current input terms.pop(); // add the selected item terms.push( ui.item.value ); // add placeholder to get the comma-and-space at the end - terms.push(""); - this.value = terms.join(", "); + terms.push( "" ); + this.value = terms.join( ", " ); return false; } }); @@ -65,13 +65,11 @@ </div><!-- End demo --> + + <div class="demo-description"> -<p> -Usage: Enter at least two characters to get bird name suggestions. Select a value to continue adding more names. -</p> -<p> -This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field. -</p> +<p>Usage: Enter at least two characters to get bird name suggestions. Select a value to continue adding more names.</p> +<p>This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.</p> </div><!-- End demo-description --> </body> diff --git a/demos/autocomplete/multiple.html b/demos/autocomplete/multiple.html index 1f9243bf2..68bf365f7 100644 --- a/demos/autocomplete/multiple.html +++ b/demos/autocomplete/multiple.html @@ -1,44 +1,68 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete multiple demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <meta charset="utf-8"> + <title>jQuery UI Autocomplete - Multiple values</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.autocomplete.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"]; - function split(val) { - return val.split(/,\s*/); + var availableTags = [ + "ActionScript", + "AppleScript", + "Asp", + "BASIC", + "C", + "C++", + "Clojure", + "COBOL", + "ColdFusion", + "Erlang", + "Fortran", + "Groovy", + "Haskell", + "Java", + "JavaScript", + "Lisp", + "Perl", + "PHP", + "Python", + "Ruby", + "Scala", + "Scheme" + ]; + function split( val ) { + return val.split( /,\s*/ ); } - function extractLast(term) { - return split(term).pop(); + function extractLast( term ) { + return split( term ).pop(); } - - $("#tags").autocomplete({ + + $( "#tags" ).autocomplete({ minLength: 0, - source: function(request, response) { + source: function( request, response ) { // delegate back to autocomplete, but extract the last term - response($.ui.autocomplete.filter(availableTags, extractLast(request.term))); + response( $.ui.autocomplete.filter( + availableTags, extractLast( request.term ) ) ); }, focus: function() { // prevent value inserted on focus return false; }, - select: function(event, ui) { + select: function( event, ui ) { var terms = split( this.value ); // remove the current input terms.pop(); // add the selected item terms.push( ui.item.value ); // add placeholder to get the comma-and-space at the end - terms.push(""); - this.value = terms.join(", "); + terms.push( "" ); + this.value = terms.join( ", " ); return false; } }); @@ -56,13 +80,11 @@ </div><!-- End demo --> + + <div class="demo-description"> -<p> -Usage: Type something, eg. "j" to see suggestions for tagging with programming languages. Select a value, then continue typing to add more. -</p> -<p> -This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field. -</p> +<p>Usage: Type something, eg. "j" to see suggestions for tagging with programming languages. Select a value, then continue typing to add more.</p> +<p>This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.</p> </div><!-- End demo-description --> </body> diff --git a/demos/autocomplete/remote-jsonp.html b/demos/autocomplete/remote-jsonp.html index 127298e36..cff042a0f 100644 --- a/demos/autocomplete/remote-jsonp.html +++ b/demos/autocomplete/remote-jsonp.html @@ -1,27 +1,28 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete Remote JSONP datasource demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <meta charset="utf-8"> + <title>jQuery UI Autocomplete - Remote JSONP datasource</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.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 type="text/javascript"> + <script> $(function() { - function log(message) { - $("<div/>").text(message).prependTo("#log"); - $("#log").attr("scrollTop", 0); + function log( message ) { + $( "<div/>" ).text( message ).prependTo( "#log" ); + $( "#log" ).attr( "scrollTop", 0 ); } - - $("#city").autocomplete({ - source: function(request, response) { + + $( "#city" ).autocomplete({ + source: function( request, response ) { $.ajax({ url: "http://ws.geonames.org/searchJSON", dataType: "jsonp", @@ -31,33 +32,31 @@ maxRows: 12, name_startsWith: request.term }, - success: function(data) { - response($.map(data.geonames, function(item) { + success: function( data ) { + response( $.map( data.geonames, function( item ) { return { label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName, value: item.name } - })) + })); } - }) + }); }, minLength: 2, - select: function(event, ui) { - log(ui.item ? ("Selected: " + ui.item.label) : "Nothing selected, input was " + this.value); + select: function( event, ui ) { + log( ui.item ? + "Selected: " + ui.item.label : + "Nothing selected, input was " + this.value); }, open: function() { - $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); + $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" ); }, close: function() { - $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); + $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" ); } }); }); </script> - <style> - .ui-autocomplete-loading { background: url(indicator.gif) no-repeat right; } - #city { width: 25em; } - </style> </head> <body> @@ -76,13 +75,11 @@ </div><!-- End demo --> + + <div class="demo-description"> -<p> -The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are cities, displayed when at least two characters are entered into the field. -</p> -<p> -In this case, the datasource is the <a href="http://geonames.org">geonames.org webservice</a>. While only the city name itself ends up in the input after selecting an element, more info is displayed in the suggestions to help find the right entry. That data is also available in callbacks, as illustrated by the Result area below the input. -</p> +<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are cities, displayed when at least two characters are entered into the field.</p> +<p>In this case, the datasource is the <a href="http://geonames.org">geonames.org webservice</a>. While only the city name itself ends up in the input after selecting an element, more info is displayed in the suggestions to help find the right entry. That data is also available in callbacks, as illustrated by the Result area below the input.</p> </div><!-- End demo-description --> </body> diff --git a/demos/autocomplete/remote-with-cache.html b/demos/autocomplete/remote-with-cache.html index bd261f44e..77245ebe8 100644 --- a/demos/autocomplete/remote-with-cache.html +++ b/demos/autocomplete/remote-with-cache.html @@ -1,35 +1,34 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete Remote with caching demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <meta charset="utf-8"> + <title>jQuery UI Autocomplete - Remote with caching</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.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 type="text/javascript"> + <script> $(function() { - var cache = {}; + var cache = {}, + lastXhr; $( "#birds" ).autocomplete({ minLength: 2, - source: function(request, response) { - if ( request.term in cache ) { - response( cache[ request.term ] ); + source: function( request, response ) { + var term = request.term; + if ( term in cache ) { + response( cache[ term ] ); return; } - - $.ajax({ - url: "search.php", - dataType: "json", - data: request, - success: function( data ) { - cache[ request.term ] = data; + + lastXhr = $.getJSON( "search.php", request, function( data, status, xhr ) { + cache[ term ] = data; + if ( xhr === lastXhr ) { response( data ); } }); @@ -49,13 +48,11 @@ </div><!-- End demo --> + + <div class="demo-description"> -<p> -The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field. -</p> -<p> -Similar to the remote datasource demo, though this adds some local caching to improve performance. The cache here saves just one query, and could be extended to cache multiple values, one for each term. -</p> +<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.</p> +<p>Similar to the remote datasource demo, though this adds some local caching to improve performance. The cache here saves just one query, and could be extended to cache multiple values, one for each term.</p> </div><!-- End demo-description --> </body> diff --git a/demos/autocomplete/remote.html b/demos/autocomplete/remote.html index 2dd0eb733..2abbfc916 100644 --- a/demos/autocomplete/remote.html +++ b/demos/autocomplete/remote.html @@ -1,30 +1,32 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete Remote datasource demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <meta charset="utf-8"> + <title>jQuery UI Autocomplete - Remote datasource</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.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 type="text/javascript"> + <script> $(function() { - function log(message) { - $("<div/>").text(message).prependTo("#log"); - $("#log").attr("scrollTop", 0); + function log( message ) { + $( "<div/>" ).text( message ).prependTo( "#log" ); + $( "#log" ).attr( "scrollTop", 0 ); } - - $("#birds").autocomplete({ + + $( "#birds" ).autocomplete({ source: "search.php", minLength: 2, - select: function(event, ui) { - log(ui.item ? ("Selected: " + ui.item.value + " aka " + ui.item.id) : "Nothing selected, input was " + this.value); + select: function( event, ui ) { + log( ui.item ? + "Selected: " + ui.item.value + " aka " + ui.item.id : + "Nothing selected, input was " + this.value ); } }); }); @@ -46,13 +48,11 @@ </div><!-- End demo --> + + <div class="demo-description"> -<p> -The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field. -</p> -<p> -The datasource is a server-side script which returns JSON data, specified via a simple URL for the source-option. In addition, the minLength-option is set to 2 to avoid queries that would return too many results and the select-event is used to display some feedback. -</p> +<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.</p> +<p>The datasource is a server-side script which returns JSON data, specified via a simple URL for the source-option. In addition, the minLength-option is set to 2 to avoid queries that would return too many results and the select-event is used to display some feedback.</p> </div><!-- End demo-description --> </body> diff --git a/demos/autocomplete/xml.html b/demos/autocomplete/xml.html index c00868cac..533b72bdd 100644 --- a/demos/autocomplete/xml.html +++ b/demos/autocomplete/xml.html @@ -1,45 +1,47 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Autocomplete Remote datasource demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <meta charset="utf-8"> + <title>jQuery UI Autocomplete - XML data parsed once</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.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 type="text/javascript"> + <script> $(function() { - function log(message) { - $("<div/>").text(message).prependTo("#log"); - $("#log").attr("scrollTop", 0); + function log( message ) { + $( "<div/>" ).text( message ).prependTo( "#log" ); + $( "#log" ).attr( "scrollTop", 0 ); } - + $.ajax({ url: "london.xml", dataType: "xml", - success: function(xmlResponse) { - var data = $("geoname", xmlResponse).map(function() { + success: function( xmlResponse ) { + var data = $( "geoname", xmlResponse ).map(function() { return { - value: $("name", this).text() + ", " + ($.trim($("countryName", this).text()) || "(unknown country)"), - id: $("geonameId", this).text() + value: $( "name", this ).text() + ", " + + ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ), + id: $( "geonameId", this ).text() }; }).get(); - $("#birds").autocomplete({ + $( "#birds" ).autocomplete({ source: data, minLength: 0, - select: function(event, ui) { - log(ui.item ? ("Selected: " + ui.item.value + ", geonameId: " + ui.item.id) : "Nothing selected, input was " + this.value); + select: function( event, ui ) { + log( ui.item ? + "Selected: " + ui.item.value + ", geonameId: " + ui.item.id : + "Nothing selected, input was " + this.value ); } }); } - }) - + }); }); </script> </head> @@ -59,13 +61,11 @@ </div><!-- End demo --> + + <div class="demo-description"> -<p> -This demo shows how to retrieve some XML data, parse it using jQuery's methods, then provide it to the autocomplete as the datasource. -</p> -<p> -This should also serve as a reference on how to parse a remote XML datasource - the parsing would just happen for each request within the source-callback. -</p> +<p>This demo shows how to retrieve some XML data, parse it using jQuery's methods, then provide it to the autocomplete as the datasource.</p> +<p>This should also serve as a reference on how to parse a remote XML datasource - the parsing would just happen for each request within the source-callback.</p> </div><!-- End demo-description --> </body> diff --git a/demos/button/checkbox.html b/demos/button/checkbox.html index b6192ee28..1d44743e8 100644 --- a/demos/button/checkbox.html +++ b/demos/button/checkbox.html @@ -1,49 +1,44 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Button - Checkboxes demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <meta charset="utf-8"> + <title>jQuery UI Button - Checkboxes</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#check").button(); - $("#format").buttonset(); + $( "#check" ).button(); + $( "#format" ).buttonset(); }); </script> <style> - #format { margin-top: 2em; } + #format { margin-top: 2em; } </style> </head> <body> <div class="demo"> - <input type="checkbox" id="check" /><label for="check">Toggle</label> - - <div id="format"> - <input type="checkbox" id="check1" /><label for="check1">B</label> - <input type="checkbox" id="check2" /><label for="check2">I</label> - <input type="checkbox" id="check3" /><label for="check3">U</label> - </div> +<input type="checkbox" id="check" /><label for="check">Toggle</label> + +<div id="format"> + <input type="checkbox" id="check1" /><label for="check1">B</label> + <input type="checkbox" id="check2" /><label for="check2">I</label> + <input type="checkbox" id="check3" /><label for="check3">U</label> +</div> </div><!-- End demo --> <div class="demo-description"> - <p>A checkbox is styled as a toggle button with the button widget. The label element associated with the checkbox is used for the button text.</p> - <p>This demo also demonstrates three checkboxes styled as a button set by calling <code>.buttonset()</code> on a common container.</p> - </div><!-- End demo-description --> - - </body> </html> diff --git a/demos/button/default.html b/demos/button/default.html index 700c64bcc..a42565744 100644 --- a/demos/button/default.html +++ b/demos/button/default.html @@ -1,46 +1,38 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Button - Default demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <meta charset="utf-8"> + <title>jQuery UI Button - Default functionality</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("button, input:submit, a", ".demo").button(); - - $("a", ".demo").click(function() { return false; }); + $( "button, input:submit, a", ".demo" ).button(); + $( "a", ".demo" ).click(function() { return false; }); }); </script> - <style> - - </style> </head> <body> <div class="demo"> - <button>A button element</button> - - <input type="submit" value="A submit button"/> - - <a href="#">An anchor</a> +<button>A button element</button> + +<input type="submit" value="A submit button"/> + +<a href="#">An anchor</a> </div><!-- End demo --> <div class="demo-description"> - <p>Examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.</p> - </div><!-- End demo-description --> - - </body> </html> diff --git a/demos/button/icons.html b/demos/button/icons.html index 2dc11c5d8..c57f40c15 100644 --- a/demos/button/icons.html +++ b/demos/button/icons.html @@ -1,63 +1,56 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Button - Icons demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <meta charset="utf-8"> + <title>jQuery UI Button - Icons</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $(".demo button:first").button({ + $( ".demo button:first" ).button({ icons: { - primary: 'ui-icon-locked' + primary: "ui-icon-locked" }, text: false }).next().button({ icons: { - primary: 'ui-icon-locked' + primary: "ui-icon-locked" } }).next().button({ icons: { - primary: 'ui-icon-gear', - secondary: 'ui-icon-triangle-1-s' + primary: "ui-icon-gear", + secondary: "ui-icon-triangle-1-s" } }).next().button({ icons: { - primary: 'ui-icon-gear', - secondary: 'ui-icon-triangle-1-s' + primary: "ui-icon-gear", + secondary: "ui-icon-triangle-1-s" }, text: false }); }); </script> - <style> - - </style> </head> <body> <div class="demo"> - <button>Button with icon only</button> - <button>Button with icon on the left</button> - <button>Button with two icons</button> - <button>Button with two icons and no text</button> +<button>Button with icon only</button> +<button>Button with icon on the left</button> +<button>Button with two icons</button> +<button>Button with two icons and no text</button> </div><!-- End demo --> <div class="demo-description"> - <p>Some buttons with various combinations of text and icons, here specified via metadata.</p> - </div><!-- End demo-description --> - - </body> </html> diff --git a/demos/button/index.html b/demos/button/index.html index c2b37200d..23977c820 100644 --- a/demos/button/index.html +++ b/demos/button/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Button Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/button/radio.html b/demos/button/radio.html index 3e5dc2379..62bab21a0 100644 --- a/demos/button/radio.html +++ b/demos/button/radio.html @@ -1,46 +1,39 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Button - Radio Buttons demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <meta charset="utf-8"> + <title>jQuery UI Button - Radios</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#radio").buttonset(); + $( "#radio" ).buttonset(); }); </script> - <style> - - </style> </head> <body> <div class="demo"> - <form> - <div id="radio"> - <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label> - <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label> - <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label> - </div> - </form> +<form> + <div id="radio"> + <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label> + <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label> + <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label> + </div> +</form> </div><!-- End demo --> <div class="demo-description"> - <p>A set of three radio buttons transformed into a button set.</p> - </div><!-- End demo-description --> - - </body> </html> diff --git a/demos/button/splitbutton.html b/demos/button/splitbutton.html index 7e4d66038..e1faa12af 100644 --- a/demos/button/splitbutton.html +++ b/demos/button/splitbutton.html @@ -1,33 +1,33 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Button - Default demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <meta charset="utf-8"> + <title>jQuery UI Button - Split button</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#rerun") + $( "#rerun" ) .button() - .click( function() { + .click(function() { alert( "Running the last action" ); }) - .next() - .button( { - text: false, - icons: { - primary: "ui-icon-triangle-1-s" - } - }) - .click( function() { - alert( "Could display a menu to select an action" ); - }) - .parent() - .buttonset(); + .next() + .button( { + text: false, + icons: { + primary: "ui-icon-triangle-1-s" + } + }) + .click(function() { + alert( "Could display a menu to select an action" ); + }) + .parent() + .buttonset(); }); </script> <style> @@ -38,23 +38,18 @@ <div class="demo"> - <div> - <button id="rerun">Run last action</button> - <button id="select">Select an action</button> - </div> +<div> + <button id="rerun">Run last action</button> + <button id="select">Select an action</button> +</div> </div><!-- End demo --> <div class="demo-description"> - -<p>An example of a split button built with two buttons: A plan button with just text, one with only a primary icon -and no text. Both are grouped together in a set.</p> - +<p>An example of a split button built with two buttons: A plan button with just text, one with only a primary icon and no text. Both are grouped together in a set.</p> </div><!-- End demo-description --> - - </body> </html> diff --git a/demos/button/toolbar.html b/demos/button/toolbar.html index 5573872a7..a03036451 100644 --- a/demos/button/toolbar.html +++ b/demos/button/toolbar.html @@ -1,86 +1,86 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Button - Toolbar demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <meta charset="utf-8"> + <title>jQuery UI Button - Toolbar</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> #toolbar { padding: 10px 4px; } </style> - <script type="text/javascript"> + <script> $(function() { - $('#beginning').button({ + $( "#beginning" ).button({ text: false, icons: { - primary: 'ui-icon-seek-start' + primary: "ui-icon-seek-start" } }); - $('#rewind').button({ + $( "#rewind" ).button({ text: false, icons: { - primary: 'ui-icon-seek-prev' + primary: "ui-icon-seek-prev" } }); - $('#play').button({ + $( "#play" ).button({ text: false, icons: { - primary: 'ui-icon-play' + primary: "ui-icon-play" } }) .click(function() { var options; - if ($(this).text() == 'play') { + if ( $( this ).text() === "play" ) { options = { - label: 'pause', + label: "pause", icons: { - primary: 'ui-icon-pause' + primary: "ui-icon-pause" } }; } else { options = { - label: 'play', + label: "play", icons: { - primary: 'ui-icon-play' + primary: "ui-icon-play" } }; } - $(this).button('option', options); + $( this ).button( "option", options ); }); - $('#stop').button({ + $( "#stop" ).button({ text: false, icons: { - primary: 'ui-icon-stop' + primary: "ui-icon-stop" } }) .click(function() { - $('#play').button('option', { - label: 'play', + $( "#play" ).button( "option", { + label: "play", icons: { - primary: 'ui-icon-play' + primary: "ui-icon-play" } }); }); - $('#forward').button({ + $( "#forward" ).button({ text: false, icons: { - primary: 'ui-icon-seek-next' + primary: "ui-icon-seek-next" } }); - $('#end').button({ + $( "#end" ).button({ text: false, icons: { - primary: 'ui-icon-seek-end' + primary: "ui-icon-seek-end" } }); - $("#shuffle").button(); - $("#repeat").buttonset(); + $( "#shuffle" ).button(); + $( "#repeat" ).buttonset(); }); </script> </head> @@ -88,37 +88,33 @@ <div class="demo"> - <span id="toolbar" class="ui-widget-header ui-corner-all"> - <button id="beginning">go to beginning</button> - <button id="rewind">rewind</button> - <button id="play">play</button> - <button id="stop">stop</button> - <button id="forward">fast forward</button> - <button id="end">go to end</button> - - <input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label> - - <span id="repeat"> - <input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label> - <input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label> - <input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label> - </span> +<span id="toolbar" class="ui-widget-header ui-corner-all"> + <button id="beginning">go to beginning</button> + <button id="rewind">rewind</button> + <button id="play">play</button> + <button id="stop">stop</button> + <button id="forward">fast forward</button> + <button id="end">go to end</button> + + <input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label> + + <span id="repeat"> + <input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label> + <input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label> + <input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label> </span> +</span> </div><!-- End demo --> <div class="demo-description"> - <p> A mediaplayer toolbar. Take a look at the underlying markup: A few button elements, an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options. </p> - </div><!-- End demo-description --> - - </body> </html> diff --git a/demos/datepicker/alt-field.html b/demos/datepicker/alt-field.html index d51bf0634..f45921d07 100644 --- a/demos/datepicker/alt-field.html +++ b/demos/datepicker/alt-field.html @@ -1,17 +1,20 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Datepicker - Populate alternate field</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.datepicker.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#datepicker").datepicker({altField: '#alternate', altFormat: 'DD, d MM, yy'}); + $( "#datepicker" ).datepicker({ + altField: "#alternate", + altFormat: "DD, d MM, yy" + }); }); </script> </head> @@ -23,10 +26,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Populate an alternate field with its own date format whenever a date is selected using the <code>altField</code> and <code>altFormat</code> options. This feature could be used to present a human-friendly date for user selection, while passing a more computer-friendly date through for further processing.</p> +<div class="demo-description"> +<p>Populate an alternate field with its own date format whenever a date is selected using the <code>altField</code> and <code>altFormat</code> options. This feature could be used to present a human-friendly date for user selection, while passing a more computer-friendly date through for further processing.</p> </div><!-- End demo-description --> </body> diff --git a/demos/datepicker/animation.html b/demos/datepicker/animation.html index 27f20ffb8..8bc4dbaa8 100644 --- a/demos/datepicker/animation.html +++ b/demos/datepicker/animation.html @@ -1,25 +1,27 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Datepicker - Animations</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.effects.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.effects.blind.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.effects.bounce.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.effects.clip.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.effects.drop.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.effects.fold.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.effects.slide.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.effects.core.js"></script> + <script src="../../ui/jquery.effects.blind.js"></script> + <script src="../../ui/jquery.effects.bounce.js"></script> + <script src="../../ui/jquery.effects.clip.js"></script> + <script src="../../ui/jquery.effects.drop.js"></script> + <script src="../../ui/jquery.effects.fold.js"></script> + <script src="../../ui/jquery.effects.slide.js"></script> + <script src="../../ui/jquery.ui.datepicker.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#datepicker").datepicker(); - $("#anim").change(function() { $('#datepicker').datepicker('option', {showAnim: $(this).val()}); }); + $( "#datepicker" ).datepicker(); + $( "#anim" ).change(function() { + $( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() ); + }); }); </script> </head> @@ -34,22 +36,22 @@ <option value="show">Show (default)</option> <option value="slideDown">Slide down</option> <option value="fadeIn">Fade in</option> - <!-- <option value="blind">Blind (UI Effect)</option> + <option value="blind">Blind (UI Effect)</option> <option value="bounce">Bounce (UI Effect)</option> <option value="clip">Clip (UI Effect)</option> <option value="drop">Drop (UI Effect)</option> <option value="fold">Fold (UI Effect)</option> - <option value="slide">Slide (UI Effect)</option> --> + <option value="slide">Slide (UI Effect)</option> <option value="">None</option> </select> </p> </div><!-- End demo --> -<div class="demo-description"> -<p>Use different animations when opening or closing the datepicker. Choose an animation from the dropdown, then click on the input to see its effect. You can use one of the three standard animations or any of the UI Effects.</p> +<div class="demo-description"> +<p>Use different animations when opening or closing the datepicker. Choose an animation from the dropdown, then click on the input to see its effect. You can use one of the three standard animations or any of the UI Effects.</p> </div><!-- End demo-description --> </body> diff --git a/demos/datepicker/buttonbar.html b/demos/datepicker/buttonbar.html index 6cd4dbedc..df0cc73b0 100644 --- a/demos/datepicker/buttonbar.html +++ b/demos/datepicker/buttonbar.html @@ -1,17 +1,17 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Datepicker - Display button bar</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.datepicker.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $('#datepicker').datepicker({ + $( "#datepicker" ).datepicker({ showButtonPanel: true }); }); @@ -25,10 +25,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Display a button for selecting Today's date and a Done button for closing the calendar with the boolean <code>showButtonPanel</code> option. Each button is enabled by default when the bar is displayed, but can be turned off with additional options. Button text is customizable.</p> +<div class="demo-description"> +<p>Display a button for selecting Today's date and a Done button for closing the calendar with the boolean <code>showButtonPanel</code> option. Each button is enabled by default when the bar is displayed, but can be turned off with additional options. Button text is customizable.</p> </div><!-- End demo-description --> </body> diff --git a/demos/datepicker/date-formats.html b/demos/datepicker/date-formats.html index 435ef7096..d20be91a4 100644 --- a/demos/datepicker/date-formats.html +++ b/demos/datepicker/date-formats.html @@ -1,18 +1,20 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Datepicker - Format date</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.datepicker.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#datepicker").datepicker(); - $("#format").change(function() { $('#datepicker').datepicker('option', {dateFormat: $(this).val()}); }); + $( "#datepicker" ).datepicker(); + $( "#format" ).change(function() { + $( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() ); + }); }); </script> </head> @@ -35,10 +37,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Display date feedback in a variety of ways. Choose a date format from the dropdown, then click on the input and select a date to see it in that format.</p> +<div class="demo-description"> +<p>Display date feedback in a variety of ways. Choose a date format from the dropdown, then click on the input and select a date to see it in that format.</p> </div><!-- End demo-description --> </body> diff --git a/demos/datepicker/default.html b/demos/datepicker/default.html index 4ab50e174..32ce21208 100644 --- a/demos/datepicker/default.html +++ b/demos/datepicker/default.html @@ -1,17 +1,17 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Datepicker - Default functionality</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.datepicker.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#datepicker").datepicker(); + $( "#datepicker" ).datepicker(); }); </script> </head> @@ -23,10 +23,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p> +<div class="demo-description"> +<p>The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p> </div><!-- End demo-description --> </body> diff --git a/demos/datepicker/dropdown-month-year.html b/demos/datepicker/dropdown-month-year.html index c31d8ba85..12877ab7a 100644 --- a/demos/datepicker/dropdown-month-year.html +++ b/demos/datepicker/dropdown-month-year.html @@ -1,17 +1,17 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Datepicker - Display month & year menus</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.datepicker.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $('#datepicker').datepicker({ + $( "#datepicker" ).datepicker({ changeMonth: true, changeYear: true }); @@ -26,10 +26,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes. Add the boolean <code>changeMonth</code> and <code>changeYear</code> options.</p> +<div class="demo-description"> +<p>Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes. Add the boolean <code>changeMonth</code> and <code>changeYear</code> options.</p> </div><!-- End demo-description --> </body> diff --git a/demos/datepicker/event-search.html b/demos/datepicker/event-search.html index c87ae17a4..2941f9dc1 100644 --- a/demos/datepicker/event-search.html +++ b/demos/datepicker/event-search.html @@ -1,25 +1,28 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Datepicker - Display multiple months</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.datepicker.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - var dates = $('#from, #to').datepicker({ + var dates = $( "#from, #to" ).datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 3, - onSelect: function(selectedDate) { - var option = this.id == "from" ? "minDate" : "maxDate"; - var instance = $(this).data("datepicker"); - var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings); - dates.not(this).datepicker("option", option, date); + onSelect: function( selectedDate ) { + var option = this.id == "from" ? "minDate" : "maxDate", + instance = $( this ).data( "datepicker" ); + date = $.datepicker.parseDate( + instance.settings.dateFormat || + $.datepicker._defaults.dateFormat, + selectedDate, instance.settings ); + dates.not( this ).datepicker( "option", option, date ); } }); }); @@ -36,10 +39,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Select the date range to search for.</p> +<div class="demo-description"> +<p>Select the date range to search for.</p> </div><!-- End demo-description --> </body> diff --git a/demos/datepicker/icon-trigger.html b/demos/datepicker/icon-trigger.html index 6da3a7792..f6cd0ecd4 100644 --- a/demos/datepicker/icon-trigger.html +++ b/demos/datepicker/icon-trigger.html @@ -1,19 +1,19 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Datepicker - Icon trigger</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.datepicker.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#datepicker").datepicker({ - showOn: 'button', - buttonImage: 'images/calendar.gif', + $( "#datepicker" ).datepicker({ + showOn: "button", + buttonImage: "images/calendar.gif", buttonImageOnly: true }); }); @@ -27,10 +27,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Click the icon next to the input field to show the datepicker. Set the datepicker to open on focus (default behavior), on icon click, or both.</p> +<div class="demo-description"> +<p>Click the icon next to the input field to show the datepicker. Set the datepicker to open on focus (default behavior), on icon click, or both.</p> </div><!-- End demo-description --> </body> diff --git a/demos/datepicker/index.html b/demos/datepicker/index.html index 5749ae757..37c8ef714 100644 --- a/demos/datepicker/index.html +++ b/demos/datepicker/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Datepicker Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/datepicker/inline.html b/demos/datepicker/inline.html index bf21fc927..d3a522e86 100644 --- a/demos/datepicker/inline.html +++ b/demos/datepicker/inline.html @@ -1,17 +1,17 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Datepicker - Display inline</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.datepicker.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#datepicker").datepicker(); + $( "#datepicker" ).datepicker(); }); </script> </head> @@ -23,10 +23,10 @@ Date: <div id="datepicker"></div> </div><!-- End demo --> -<div class="demo-description"> -<p>Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.</p> +<div class="demo-description"> +<p>Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.</p> </div><!-- End demo-description --> </body> diff --git a/demos/datepicker/localization.html b/demos/datepicker/localization.html index e4f6c0d13..4e9c8f190 100644 --- a/demos/datepicker/localization.html +++ b/demos/datepicker/localization.html @@ -1,72 +1,76 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Datepicker - Localize calendar</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-af.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-ar.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-az.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-bg.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-bs.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-ca.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-cs.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-da.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-de.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-el.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-en-GB.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-eo.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-es.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-et.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-eu.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-fa.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-fi.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-fo.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-fr.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-fr-CH.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-he.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-hr.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-hu.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-hy.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-id.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-is.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-it.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-ja.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-ko.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-lt.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-lv.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-ms.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-nl.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-no.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-pl.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-pt-BR.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-ro.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-ru.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-sk.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-sl.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-sq.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-sr.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-sr-SR.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-sv.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-ta.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-th.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-tr.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-uk.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-vi.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-zh-CN.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-zh-HK.js"></script> - <script type="text/javascript" src="../../ui/i18n/jquery.ui.datepicker-zh-TW.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.datepicker.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-af.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-ar.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-az.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-bg.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-bs.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-ca.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-cs.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-da.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-de.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-el.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-en-GB.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-eo.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-es.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-et.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-eu.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-fa.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-fi.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-fo.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-fr.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-fr-CH.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-gl.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-he.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-hr.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-hu.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-hy.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-id.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-is.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-it.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-ja.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-ko.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-kz.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-lt.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-lv.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-ms.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-nl.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-no.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-pl.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-pt.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-pt-BR.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-ro.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-ru.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-sk.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-sl.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-sq.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-sr.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-sr-SR.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-sv.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-ta.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-th.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-tr.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-uk.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-vi.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-zh-CN.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-zh-HK.js"></script> + <script src="../../ui/i18n/jquery.ui.datepicker-zh-TW.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $.datepicker.setDefaults($.datepicker.regional['']); - $("#datepicker").datepicker($.datepicker.regional['fr']); - $("#locale").change(function() { - $('#datepicker').datepicker('option', $.datepicker.regional[$(this).val()]); + $.datepicker.setDefaults( $.datepicker.regional[ "" ] ); + $( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] ); + $( "#locale" ).change(function() { + $( "#datepicker" ).datepicker( "option", + $.datepicker.regional[ $( this ).val() ] ); }); }); </script> @@ -101,6 +105,7 @@ <option value="fi">Finnish (suomi)</option> <option value="fr" selected="selected">French (Français)</option> <option value="fr-CH">French/Swiss (Français de Suisse)</option> + <option value="gl">Galician</option> <option value="de">German (Deutsch)</option> <option value="el">Greek (Ελληνικά)</option> <option value="he">Hebrew (‫(עברית</option> @@ -110,11 +115,13 @@ <option value="it">Italian (Italiano)</option> <option value="ja">Japanese (日本語)</option> <option value="ko">Korean (한국어)</option> + <option value="kz">Kazakhstan (Kazakh)</option> <option value="lv">Latvian (Latvieöu Valoda)</option> <option value="lt">Lithuanian (lietuviu kalba)</option> <option value="ms">Malaysian (Bahasa Malaysia)</option> <option value="no">Norwegian (Norsk)</option> <option value="pl">Polish (Polski)</option> + <option value="pt">Portuguese (Português)</option> <option value="pt-BR">Portuguese/Brazilian (Português)</option> <option value="ro">Romanian (Română)</option> <option value="ru">Russian (Русский)</option> @@ -133,10 +140,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Localize the datepicker calendar language and format (English / Western formatting is the default). The datepicker includes built-in support for languages that read right-to-left, such as Arabic and Hebrew.</p> +<div class="demo-description"> +<p>Localize the datepicker calendar language and format (English / Western formatting is the default). The datepicker includes built-in support for languages that read right-to-left, such as Arabic and Hebrew.</p> </div><!-- End demo-description --> </body> diff --git a/demos/datepicker/min-max.html b/demos/datepicker/min-max.html index 7573e6926..8d9106d9b 100644 --- a/demos/datepicker/min-max.html +++ b/demos/datepicker/min-max.html @@ -1,17 +1,17 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Datepicker - Restrict date range</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.datepicker.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#datepicker").datepicker({minDate: -20, maxDate: '+1M +10D'}); + $( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" }); }); </script> </head> @@ -23,10 +23,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Restrict the range of selectable dates with the <code>minDate</code> and <code>maxDate</code> options. Set the beginning and end dates as actual dates (new Date(2009, 1 - 1, 26)), as a numeric offset from today (-20), or as a string of periods and units ('+1M +10D'). For the last, use 'D' for days, 'W' for weeks, 'M' for months, or 'Y' for years.</p> +<div class="demo-description"> +<p>Restrict the range of selectable dates with the <code>minDate</code> and <code>maxDate</code> options. Set the beginning and end dates as actual dates (new Date(2009, 1 - 1, 26)), as a numeric offset from today (-20), or as a string of periods and units ('+1M +10D'). For the last, use 'D' for days, 'W' for weeks, 'M' for months, or 'Y' for years.</p> </div><!-- End demo-description --> </body> diff --git a/demos/datepicker/multiple-calendars.html b/demos/datepicker/multiple-calendars.html index 8051ca524..117b2ca14 100644 --- a/demos/datepicker/multiple-calendars.html +++ b/demos/datepicker/multiple-calendars.html @@ -1,17 +1,17 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Datepicker - Display multiple months</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.datepicker.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $('#datepicker').datepicker({ + $( "#datepicker" ).datepicker({ numberOfMonths: 3, showButtonPanel: true }); @@ -26,10 +26,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Set the <code>numberOfMonths</code> option to an integer of 2 or more to show multiple months in a single datepicker.</p> +<div class="demo-description"> +<p>Set the <code>numberOfMonths</code> option to an integer of 2 or more to show multiple months in a single datepicker.</p> </div><!-- End demo-description --> </body> diff --git a/demos/datepicker/other-months.html b/demos/datepicker/other-months.html index 1c0b65559..5a9661782 100644 --- a/demos/datepicker/other-months.html +++ b/demos/datepicker/other-months.html @@ -1,17 +1,20 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Datepicker - Dates in other months</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.datepicker.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#datepicker").datepicker({showOtherMonths: true, selectOtherMonths: true}); + $( "#datepicker" ).datepicker({ + showOtherMonths: true, + selectOtherMonths: true + }); }); </script> </head> @@ -23,11 +26,11 @@ </div><!-- End demo --> -<div class="demo-description"> + +<div class="demo-description"> <p>The datepicker can show dates that come from other than the main month being displayed. These other dates can also be made selectable.</p> - </div><!-- End demo-description --> </body> diff --git a/demos/datepicker/show-week.html b/demos/datepicker/show-week.html index f6015a2af..83e2349b6 100644 --- a/demos/datepicker/show-week.html +++ b/demos/datepicker/show-week.html @@ -1,17 +1,20 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Datepicker - Show week of the year</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.datepicker.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#datepicker").datepicker({showWeek: true, firstDay: 1}); + $( "#datepicker" ).datepicker({ + showWeek: true, + firstDay: 1 + }); }); </script> </head> @@ -23,13 +26,13 @@ </div><!-- End demo --> -<div class="demo-description"> + +<div class="demo-description"> <p>The datepicker can show the week of the year. The default calculation follows the ISO 8601 definition: the week starts on Monday, the first week of the year contains the first Thursday of the year. This means that some days from one year may be placed into weeks 'belonging' to another year.</p> - </div><!-- End demo-description --> </body> diff --git a/demos/dialog/animated.html b/demos/dialog/animated.html index 26f298acc..0d74662ee 100644 --- a/demos/dialog/animated.html +++ b/demos/dialog/animated.html @@ -1,34 +1,34 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Dialog - Animation</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../external/jquery.bgiframe-2.1.1.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../external/jquery.bgiframe-2.1.1.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.resizable.js"></script> + <script src="../../ui/jquery.ui.dialog.js"></script> + <script src="../../ui/jquery.effects.core.js"></script> + <script src="../../ui/jquery.effects.blind.js"></script> + <script src="../../ui/jquery.effects.explode.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> // increase the default animation speed to exaggerate the effect $.fx.speeds._default = 1000; $(function() { - $('#dialog').dialog({ + $( "#dialog" ).dialog({ autoOpen: false, - show: 'blind', - hide: 'explode' + show: "blind", + hide: "explode" }); - - $('#opener').click(function() { - $('#dialog').dialog('open'); + + $( "#opener" ).click(function() { + $( "#dialog" ).dialog( "open" ); return false; }); }); @@ -46,10 +46,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Dialogs may be animated by specifying an effect for the show and/or hide properties. You must include the individual effects file for any effects you would like to use.</p> +<div class="demo-description"> +<p>Dialogs may be animated by specifying an effect for the show and/or hide properties. You must include the individual effects file for any effects you would like to use.</p> </div><!-- End demo-description --> </body> diff --git a/demos/dialog/default.html b/demos/dialog/default.html index 492faabaa..df38c7127 100644 --- a/demos/dialog/default.html +++ b/demos/dialog/default.html @@ -1,22 +1,22 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Dialog - Default functionality</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../external/jquery.bgiframe-2.1.1.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../external/jquery.bgiframe-2.1.1.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.resizable.js"></script> + <script src="../../ui/jquery.ui.dialog.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#dialog").dialog(); + $( "#dialog" ).dialog(); }); </script> </head> @@ -44,10 +44,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.</p> +<div class="demo-description"> +<p>The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.</p> </div><!-- End demo-description --> </body> diff --git a/demos/dialog/index.html b/demos/dialog/index.html index 45d4a9f43..460e4fb36 100644 --- a/demos/dialog/index.html +++ b/demos/dialog/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Dialog Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/dialog/modal-confirmation.html b/demos/dialog/modal-confirmation.html index 4affb5964..bed319a95 100644 --- a/demos/dialog/modal-confirmation.html +++ b/demos/dialog/modal-confirmation.html @@ -1,34 +1,34 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Dialog - Modal confirmation</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../external/jquery.bgiframe-2.1.1.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../external/jquery.bgiframe-2.1.1.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.dialog.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore! - $("#dialog").dialog("destroy"); + $( "#dialog:ui-dialog" ).dialog( "destroy" ); - $("#dialog-confirm").dialog({ + $( "#dialog-confirm" ).dialog({ resizable: false, height:140, modal: true, buttons: { - 'Delete all items': function() { - $(this).dialog('close'); + "Delete all items": function() { + $( this ).dialog( "close" ); }, Cancel: function() { - $(this).dialog('close'); + $( this ).dialog( "close" ); } } }); @@ -59,10 +59,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Confirm an action that may be destructive or important. Set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p> +<div class="demo-description"> +<p>Confirm an action that may be destructive or important. Set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p> </div><!-- End demo-description --> </body> diff --git a/demos/dialog/modal-form.html b/demos/dialog/modal-form.html index 592b4ab3c..b008a8cf9 100644 --- a/demos/dialog/modal-form.html +++ b/demos/dialog/modal-form.html @@ -1,22 +1,22 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Dialog - Modal form</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../external/jquery.bgiframe-2.1.1.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../external/jquery.bgiframe-2.1.1.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.resizable.js"></script> + <script src="../../ui/jquery.ui.dialog.js"></script> + <script src="../../ui/jquery.effects.core.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> body { font-size: 62.5%; } label, input { display:block; } input.text { margin-bottom:12px; width:95%; padding: .4em; } @@ -27,97 +27,90 @@ div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; } .ui-dialog .ui-state-error { padding: .3em; } .validateTips { border: 1px solid transparent; padding: 0.3em; } - </style> - <script type="text/javascript"> + <script> $(function() { // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore! - $("#dialog").dialog("destroy"); + $( "#dialog:ui-dialog" ).dialog( "destroy" ); - var name = $("#name"), - email = $("#email"), - password = $("#password"), - allFields = $([]).add(name).add(email).add(password), - tips = $(".validateTips"); + var name = $( "#name" ), + email = $( "#email" ), + password = $( "#password" ), + allFields = $( [] ).add( name ).add( email ).add( password ), + tips = $( ".validateTips" ); - function updateTips(t) { + function updateTips( t ) { tips - .text(t) - .addClass('ui-state-highlight'); + .text( t ) + .addClass( "ui-state-highlight" ); setTimeout(function() { - tips.removeClass('ui-state-highlight', 1500); - }, 500); + tips.removeClass( "ui-state-highlight", 1500 ); + }, 500 ); } - function checkLength(o,n,min,max) { - + function checkLength( o, n, min, max ) { if ( o.val().length > max || o.val().length < min ) { - o.addClass('ui-state-error'); - updateTips("Length of " + n + " must be between "+min+" and "+max+"."); + o.addClass( "ui-state-error" ); + updateTips( "Length of " + n + " must be between " + + min + " and " + max + "." ); return false; } else { return true; } - } - function checkRegexp(o,regexp,n) { - + function checkRegexp( o, regexp, n ) { if ( !( regexp.test( o.val() ) ) ) { - o.addClass('ui-state-error'); - updateTips(n); + o.addClass( "ui-state-error" ); + updateTips( n ); return false; } else { return true; } - } - $("#dialog-form").dialog({ + $( "#dialog-form" ).dialog({ autoOpen: false, height: 300, width: 350, modal: true, buttons: { - 'Create an account': function() { + "Create an account": function() { var bValid = true; - allFields.removeClass('ui-state-error'); + allFields.removeClass( "ui-state-error" ); - bValid = bValid && checkLength(name,"username",3,16); - bValid = bValid && checkLength(email,"email",6,80); - bValid = bValid && checkLength(password,"password",5,16); + bValid = bValid && checkLength( name, "username", 3, 16 ); + bValid = bValid && checkLength( email, "email", 6, 80 ); + bValid = bValid && checkLength( password, "password", 5, 16 ); - bValid = bValid && checkRegexp(name,/^[a-z]([0-9a-z_])+$/i,"Username may consist of a-z, 0-9, underscores, begin with a letter."); + bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." ); // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/ - bValid = bValid && checkRegexp(email,/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,"eg. ui@jquery.com"); - bValid = bValid && checkRegexp(password,/^([0-9a-zA-Z])+$/,"Password field only allow : a-z 0-9"); - - if (bValid) { - $('#users tbody').append('<tr>' + - '<td>' + name.val() + '</td>' + - '<td>' + email.val() + '</td>' + - '<td>' + password.val() + '</td>' + - '</tr>'); - $(this).dialog('close'); + bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" ); + bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" ); + + if ( bValid ) { + $( "#users tbody" ).append( "<tr>" + + "<td>" + name.val() + "</td>" + + "<td>" + email.val() + "</td>" + + "<td>" + password.val() + "</td>" + + "</tr>" ); + $( this ).dialog( "close" ); } }, Cancel: function() { - $(this).dialog('close'); + $( this ).dialog( "close" ); } }, close: function() { - allFields.val('').removeClass('ui-state-error'); + allFields.val( "" ).removeClass( "ui-state-error" ); } }); - - - - $('#create-user') + + $( "#create-user" ) .button() .click(function() { - $('#dialog-form').dialog('open'); + $( "#dialog-form" ).dialog( "open" ); }); - }); </script> </head> @@ -142,10 +135,7 @@ <div id="users-contain" class="ui-widget"> - - <h1>Existing Users:</h1> - - + <h1>Existing Users:</h1> <table id="users" class="ui-widget ui-widget-content"> <thead> <tr class="ui-widget-header "> @@ -167,10 +157,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p> +<div class="demo-description"> +<p>Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p> </div><!-- End demo-description --> </body> diff --git a/demos/dialog/modal-message.html b/demos/dialog/modal-message.html index a0ab01b21..18e84e87d 100644 --- a/demos/dialog/modal-message.html +++ b/demos/dialog/modal-message.html @@ -1,30 +1,30 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Dialog - Modal message</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../external/jquery.bgiframe-2.1.1.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../external/jquery.bgiframe-2.1.1.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.resizable.js"></script> + <script src="../../ui/jquery.ui.dialog.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore! - $("#dialog").dialog("destroy"); + $( "#dialog:ui-dialog" ).dialog( "destroy" ); - $("#dialog-message").dialog({ + $( "#dialog-message" ).dialog({ modal: true, buttons: { Ok: function() { - $(this).dialog('close'); + $( this ).dialog( "close" ); } } }); @@ -61,10 +61,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Use a modal dialog to explicitly acknowledge information or an action before continuing their work. Set the <code>modal</code> option to true, and specify a primary action (Ok) with the <code>buttons</code> option.</p> +<div class="demo-description"> +<p>Use a modal dialog to explicitly acknowledge information or an action before continuing their work. Set the <code>modal</code> option to true, and specify a primary action (Ok) with the <code>buttons</code> option.</p> </div><!-- End demo-description --> </body> diff --git a/demos/dialog/modal.html b/demos/dialog/modal.html index 2846d57d5..1664bd1a6 100644 --- a/demos/dialog/modal.html +++ b/demos/dialog/modal.html @@ -1,25 +1,25 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Dialog - Basic modal</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../external/jquery.bgiframe-2.1.1.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../external/jquery.bgiframe-2.1.1.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.resizable.js"></script> + <script src="../../ui/jquery.ui.dialog.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore! - $("#dialog").dialog("destroy"); + $( "#dialog:ui-dialog" ).dialog( "destroy" ); - $("#dialog-modal").dialog({ + $( "#dialog-modal" ).dialog({ height: 140, modal: true }); @@ -28,7 +28,6 @@ </head> <body> - <div class="demo"> <div id="dialog-modal" title="Basic modal dialog"> @@ -51,10 +50,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>A modal dialog prevents the user from interacting with the rest of the page until it is closed.</p> +<div class="demo-description"> +<p>A modal dialog prevents the user from interacting with the rest of the page until it is closed.</p> </div><!-- End demo-description --> </body> diff --git a/demos/draggable/constrain-movement.html b/demos/draggable/constrain-movement.html index 3bb9075e4..c74e59f87 100644 --- a/demos/draggable/constrain-movement.html +++ b/demos/draggable/constrain-movement.html @@ -1,35 +1,35 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Draggable - Constrain movement</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.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; } #draggable, #draggable2 { margin-bottom:20px; } #draggable { cursor: n-resize; } #draggable2 { cursor: e-resize; } - #containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px;} + #containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#draggable").draggable({ axis: 'y' }); - $("#draggable2").draggable({ axis: 'x' }); - - $("#draggable3").draggable({ containment: '#containment-wrapper', scroll: false }); - $("#draggable4").draggable({ containment: '#demo-frame' }); - $("#draggable5").draggable({ containment: 'parent' }); + $( "#draggable" ).draggable({ axis: "y" }); + $( "#draggable2" ).draggable({ axis: "x" }); + $( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false }); + $( "#draggable4" ).draggable({ containment: "#demo-frame" }); + $( "#draggable5" ).draggable({ containment: "parent" }); }); </script> </head> <body> + <div class="demo"> <h3 class="docs">Constrain movement along an axis:</h3> @@ -59,12 +59,11 @@ </div><!-- End demo --> -<div class="demo-description"> -<p> -Constrain the movement of each draggable by defining the boundaries of the draggable area. Set the <code>axis</code> option to limit the draggable's path to the x- or y-axis, or use the <code>containment</code> option to specify a parent DOM element or a jQuery selector, like 'document.' -</p> +<div class="demo-description"> +<p>Constrain the movement of each draggable by defining the boundaries of the draggable area. Set the <code>axis</code> option to limit the draggable's path to the x- or y-axis, or use the <code>containment</code> option to specify a parent DOM element or a jQuery selector, like 'document.'</p> </div><!-- End demo-description --> + </body> </html> diff --git a/demos/draggable/cursor-style.html b/demos/draggable/cursor-style.html index 3263029b0..44c64f07e 100644 --- a/demos/draggable/cursor-style.html +++ b/demos/draggable/cursor-style.html @@ -1,27 +1,28 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Draggable - Cursor style</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.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 type="text/javascript"> + <script> $(function() { - $("#draggable").draggable({ cursorAt: { cursor: 'move', top: 56, left: 56 } }); - $("#draggable2").draggable({ cursorAt: { cursor: 'crosshair', top: -5, left: -5 } }); - $("#draggable3").draggable({ cursorAt: { bottom: 0 } }); + $( "#draggable" ).draggable({ cursorAt: { cursor: "move", top: 56, left: 56 } }); + $( "#draggable2" ).draggable({ cursorAt: { cursor: "crosshair", top: -5, left: -5 } }); + $( "#draggable3" ).draggable({ cursorAt: { bottom: 0 } }); }); </script> </head> <body> + <div class="demo"> <div id="draggable" class="ui-widget-content"> @@ -38,12 +39,11 @@ </div><!-- End demo --> -<div class="demo-description"> -<p> -Position the cursor while dragging the object. By default the cursor appears in the center of the dragged object; use the <code>cursorAt</code> option to specify another location relative to the draggable (specify a pixel value from the top, right, bottom, and/or left). Customize the cursor's appearance by supplying the <code>cursor</code> option with a valid CSS cursor value: default, move, pointer, crosshair, etc. -</p> +<div class="demo-description"> +<p>Position the cursor while dragging the object. By default the cursor appears in the center of the dragged object; use the <code>cursorAt</code> option to specify another location relative to the draggable (specify a pixel value from the top, right, bottom, and/or left). Customize the cursor's appearance by supplying the <code>cursor</code> option with a valid CSS cursor value: default, move, pointer, crosshair, etc.</p> </div><!-- End demo-description --> + </body> </html> diff --git a/demos/draggable/default.html b/demos/draggable/default.html index b50c54ab1..7b6fd15ed 100644 --- a/demos/draggable/default.html +++ b/demos/draggable/default.html @@ -1,21 +1,21 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Draggable - Default functionality</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> #draggable { width: 150px; height: 150px; padding: 0.5em; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#draggable").draggable(); + $( "#draggable" ).draggable(); }); </script> </head> @@ -29,12 +29,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p> -Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport. -</p> +<div class="demo-description"> +<p>Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.</p> </div><!-- End demo-description --> </body> diff --git a/demos/draggable/delay-start.html b/demos/draggable/delay-start.html index c997e28e2..444f5febe 100644 --- a/demos/draggable/delay-start.html +++ b/demos/draggable/delay-start.html @@ -1,27 +1,28 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Draggable - Delay start</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> #draggable, #draggable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#draggable").draggable({ distance: 20 }); - $("#draggable2").draggable({ delay: 1000 }); - $(".ui-draggable").disableSelection(); + $( "#draggable" ).draggable({ distance: 20 }); + $( "#draggable2" ).draggable({ delay: 1000 }); + $( ".ui-draggable" ).disableSelection(); }); </script> </head> <body> + <div class="demo"> <div id="draggable" class="ui-widget-content"> @@ -34,12 +35,11 @@ </div><!-- End demo --> -<div class="demo-description"> -<p> -Delay the start of dragging for a number of milliseconds with the <code>delay</code> option; prevent dragging until the cursor is held down and dragged a specifed number of pixels with the <code>distance</code> option. -</p> +<div class="demo-description"> +<p>Delay the start of dragging for a number of milliseconds with the <code>delay</code> option; prevent dragging until the cursor is held down and dragged a specifed number of pixels with the <code>distance</code> option. </p> </div><!-- End demo-description --> + </body> </html> diff --git a/demos/draggable/events.html b/demos/draggable/events.html index 194598ffb..f7884007e 100644 --- a/demos/draggable/events.html +++ b/demos/draggable/events.html @@ -1,51 +1,53 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Draggable - Events</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - #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; } + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.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 type="text/javascript"> - $(function() { - var $start_counter = $('#event-start'), $drag_counter = $('#event-drag'), $stop_counter = $('#event-stop'); - var counts = [0,0,0]; + <script> + $(function() { + var $start_counter = $( "#event-start" ), + $drag_counter = $( "#event-drag" ), + $stop_counter = $( "#event-stop" ), + counts = [ 0, 0, 0 ]; - $("#draggable").draggable({ - start: function() { - counts[0]++; - updateCounterStatus($start_counter,counts[0]); - }, - drag: function() { - counts[1]++; - updateCounterStatus($drag_counter,counts[1]); - }, - stop: function() { - counts[2]++; - updateCounterStatus($stop_counter,counts[2]); - } - }); + $( "#draggable" ).draggable({ + start: function() { + counts[ 0 ]++; + updateCounterStatus( $start_counter, counts[ 0 ] ); + }, + drag: function() { + counts[ 1 ]++; + updateCounterStatus( $drag_counter, counts[ 1 ] ); + }, + stop: function() { + counts[ 2 ]++; + updateCounterStatus( $stop_counter, counts[ 2 ] ); + } }); - function updateCounterStatus($event_counter,new_count) { + function updateCounterStatus( $event_counter, new_count ) { // first update the status visually... - if (!$event_counter.hasClass('ui-state-hover')) { - $event_counter.addClass('ui-state-hover') - .siblings().removeClass('ui-state-hover'); + if ( !$event_counter.hasClass( "ui-state-hover" ) ) { + $event_counter.addClass( "ui-state-hover" ) + .siblings().removeClass( "ui-state-hover" ); } // ...then update the numbers - $('span.count',$event_counter).text(new_count); + $( "span.count", $event_counter ).text( new_count ); } + }); </script> </head> <body> @@ -65,12 +67,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p> -Layer functionality onto the draggable using the <code>start</code>, <code>drag</code>, and <code>stop</code> events. Start is fired at the start of the drag; drag during the drag; and stop when dragging stops. -</p> +<div class="demo-description"> +<p>Layer functionality onto the draggable using the <code>start</code>, <code>drag</code>, and <code>stop</code> events. Start is fired at the start of the drag; drag during the drag; and stop when dragging stops.</p> </div><!-- End demo-description --> </body> diff --git a/demos/draggable/handle.html b/demos/draggable/handle.html index 16bd8a8d7..e7c0c650f 100644 --- a/demos/draggable/handle.html +++ b/demos/draggable/handle.html @@ -1,28 +1,29 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Draggable - Handles</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.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 type="text/javascript"> + <script> $(function() { - $("#draggable").draggable({ handle: 'p' }); - $("#draggable2").draggable({ cancel: "p.ui-widget-header" }); - $("div, p").disableSelection(); + $( "#draggable" ).draggable({ handle: "p" }); + $( "#draggable2" ).draggable({ cancel: "p.ui-widget-header" }); + $( "div, p" ).disableSelection(); }); </script> </head> <body> + <div class="demo"> <div id="draggable" class="ui-widget-content"> @@ -38,11 +39,12 @@ </div><!-- End demo --> -<div class="demo-description"> + +<div class="demo-description"> <p>Allow dragging only when the cursor is over a specific part of the draggable. Use the <code>handle</code> option to specify the jQuery selector of an element (or group of elements) used to drag the object.</p> <p>Or prevent dragging when the cursor is over a specific element (or group of elements) within the draggable. Use the <code>cancel</code> option to specify a jQuery selector over which to "cancel" draggable functionality.</p> - </div><!-- End demo-description --> + </body> </html> diff --git a/demos/draggable/index.html b/demos/draggable/index.html index 65b900c91..0beda8e72 100644 --- a/demos/draggable/index.html +++ b/demos/draggable/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Draggable Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/draggable/revert.html b/demos/draggable/revert.html index 77b79599c..9d10f42c0 100644 --- a/demos/draggable/revert.html +++ b/demos/draggable/revert.html @@ -1,26 +1,27 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Draggable - Revert position</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.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 type="text/javascript"> + <script> $(function() { - $("#draggable").draggable({ revert: true }); - $("#draggable2").draggable({ revert: true, helper: 'clone' }); + $( "#draggable" ).draggable({ revert: true }); + $( "#draggable2" ).draggable({ revert: true, helper: "clone" }); }); </script> </head> <body> + <div class="demo"> <div id="draggable" class="ui-widget-content"> @@ -33,12 +34,11 @@ </div><!-- End demo --> -<div class="demo-description"> -<p> -Return the draggable (or it's helper) to its original location when dragging stops with the boolean <code>revert</code> option. -</p> +<div class="demo-description"> +<p>Return the draggable (or it's helper) to its original location when dragging stops with the boolean <code>revert</code> option.</p> </div><!-- End demo-description --> + </body> </html> diff --git a/demos/draggable/scroll.html b/demos/draggable/scroll.html index c7033b34e..560cb435e 100644 --- a/demos/draggable/scroll.html +++ b/demos/draggable/scroll.html @@ -1,27 +1,28 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Draggable - Auto-scroll</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.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 type="text/javascript"> + <script> $(function() { - $("#draggable").draggable({ scroll: true }); - $("#draggable2").draggable({ scroll: true, scrollSensitivity: 100 }); - $("#draggable3").draggable({ scroll: true, scrollSpeed: 100 }); + $( "#draggable" ).draggable({ scroll: true }); + $( "#draggable2" ).draggable({ scroll: true, scrollSensitivity: 100 }); + $( "#draggable3" ).draggable({ scroll: true, scrollSpeed: 100 }); }); </script> </head> <body> + <div class="demo"> <div id="draggable" class="ui-widget-content"> @@ -40,12 +41,11 @@ </div><!-- End demo --> -<div class="demo-description"> -<p> -Automatically scroll the document when the draggable is moved beyond the viewport. Set the <code>scroll</code> option to true to enable auto-scrolling, and fine-tune when scrolling is triggered and its speed with the <code>scrollSensitivity</code> and <code>scrollSpeed</code> options. -</p> +<div class="demo-description"> +<p>Automatically scroll the document when the draggable is moved beyond the viewport. Set the <code>scroll</code> option to true to enable auto-scrolling, and fine-tune when scrolling is triggered and its speed with the <code>scrollSensitivity</code> and <code>scrollSpeed</code> options.</p> </div><!-- End demo-description --> + </body> </html> diff --git a/demos/draggable/snap-to.html b/demos/draggable/snap-to.html index a9ad84642..4859403ae 100644 --- a/demos/draggable/snap-to.html +++ b/demos/draggable/snap-to.html @@ -1,31 +1,32 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Draggable - Snap to element or grid</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.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 type="text/javascript"> + <script> $(function() { - $("#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] }); + $( "#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> + <div class="demo"> <div id="snaptarget" class="ui-widget-header"> @@ -56,15 +57,12 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Snap the draggable to the inner or outer boundaries of a DOM element. Use the <code>snap</code>, <code>snapMode</code> (inner, outer, both), and <code>snapTolerance</code> (distance in pixels the draggable must be from the element when snapping is invoked) options. </p> +<div class="demo-description"> +<p>Snap the draggable to the inner or outer boundaries of a DOM element. Use the <code>snap</code>, <code>snapMode</code> (inner, outer, both), and <code>snapTolerance</code> (distance in pixels the draggable must be from the element when snapping is invoked) options. </p> <p>Or snap the draggable to a grid. Set the dimensions of grid cells (height and width in pixels) with the <code>grid</code> option.</p> - </div><!-- End demo-description --> - - </body> </html> diff --git a/demos/draggable/sortable.html b/demos/draggable/sortable.html index a87ddc0ef..c405e4825 100644 --- a/demos/draggable/sortable.html +++ b/demos/draggable/sortable.html @@ -1,35 +1,36 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Draggable + Sortable</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.ui.sortable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> .demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; } .demo li { margin: 5px; padding: 5px; width: 150px; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#sortable").sortable({ + $( "#sortable" ).sortable({ revert: true }); - $("#draggable").draggable({ - connectToSortable: '#sortable', - helper: 'clone', - revert: 'invalid' + $( "#draggable" ).draggable({ + connectToSortable: "#sortable", + helper: "clone", + revert: "invalid" }); - $("ul, li").disableSelection(); + $( "ul, li" ).disableSelection(); }); </script> </head> <body> + <div class="demo"> <ul> @@ -46,12 +47,11 @@ </div><!-- End demo --> -<div class="demo-description"> -<p> -Draggables are built to interact seamlessly with <a href="#">sortables</a>. -</p> +<div class="demo-description"> +<p>Draggables are built to interact seamlessly with <a href="#">sortables</a>.</p> </div><!-- End demo-description --> + </body> </html> diff --git a/demos/draggable/visual-feedback.html b/demos/draggable/visual-feedback.html index 4644472f0..5926374a3 100644 --- a/demos/draggable/visual-feedback.html +++ b/demos/draggable/visual-feedback.html @@ -1,37 +1,38 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Draggable - Visual feedback</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.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 type="text/javascript"> + <script> $(function() { - $("#draggable").draggable({ helper: 'original' }); - $("#draggable2").draggable({ opacity: 0.7, helper: 'clone' }); - $("#draggable3").draggable({ - cursor: 'move', + $( "#draggable" ).draggable({ helper: "original" }); + $( "#draggable2" ).draggable({ opacity: 0.7, helper: "clone" }); + $( "#draggable3" ).draggable({ + cursor: "move", cursorAt: { top: -12, left: -20 }, - helper: function(event) { - return $('<div class="ui-widget-header">I\'m a custom helper</div>'); + helper: function( event ) { + return $( "<div class='ui-widget-header'>I'm a custom helper</div>" ); } }); - $("#set div").draggable({ stack: '#set div' }); + $( "#set div" ).draggable({ stack: "#set div" }); }); </script> </head> <body> + <div class="demo"> <h3 class="docs">With helpers:</h3> @@ -65,12 +66,12 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Provide feedback to users as they drag an object in the form of a helper. The <code>helper</code> option accepts the values 'original' (the draggable object moves with the cursor), 'clone' (a duplicate of the draggable moves with the cursor), or a function that returns a DOM element (that element is shown near the cursor during drag). Control the helper's transparency with the <code>opacity</code> option.</p> +<div class="demo-description"> +<p>Provide feedback to users as they drag an object in the form of a helper. The <code>helper</code> option accepts the values 'original' (the draggable object moves with the cursor), 'clone' (a duplicate of the draggable moves with the cursor), or a function that returns a DOM element (that element is shown near the cursor during drag). Control the helper's transparency with the <code>opacity</code> option.</p> <p>To clarify which draggable is in play, bring the draggable in motion to front. Use the <code>zIndex</code> option to set a higher z-index for the helper, if in play, or use the <code>stack</code> option to ensure that the last item dragged will appear on top of others in the same group on drag stop.</p> - </div><!-- End demo-description --> + </body> </html> diff --git a/demos/droppable/accepted-elements.html b/demos/droppable/accepted-elements.html index 0ba0207e3..455e075e0 100644 --- a/demos/droppable/accepted-elements.html +++ b/demos/droppable/accepted-elements.html @@ -1,38 +1,39 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Droppable - Accept Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <meta charset="utf-8"> + <title>jQuery UI Droppable - Accept</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.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 type="text/javascript"> + <script> $(function() { - - $("#draggable, #draggable-nonvalid").draggable(); - - $("#droppable").droppable({ - accept: '#draggable', - activeClass: 'ui-state-hover', - hoverClass: 'ui-state-active', - drop: function(event, ui) { - $(this).addClass('ui-state-highlight').find('p').html('Dropped!'); + $( "#draggable, #draggable-nonvalid" ).draggable(); + $( "#droppable" ).droppable({ + accept: "#draggable", + activeClass: "ui-state-hover", + hoverClass: "ui-state-active", + drop: function( event, ui ) { + $( this ) + .addClass( "ui-state-highlight" ) + .find( "p" ) + .html( "Dropped!" ); } }); - }); </script> </head> <body> + <div class="demo"> <div id="draggable-nonvalid" class="ui-widget-content"> @@ -49,10 +50,11 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Specify using the <code>accept</code> option which element (or group of elements) is accepted by the target droppable.</p> +<div class="demo-description"> +<p>Specify using the <code>accept</code> option which element (or group of elements) is accepted by the target droppable.</p> </div><!-- End demo-description --> + </body> </html> diff --git a/demos/droppable/default.html b/demos/droppable/default.html index 4134dc942..19748a560 100644 --- a/demos/droppable/default.html +++ b/demos/droppable/default.html @@ -1,33 +1,36 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Droppable - Default Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <meta charset="utf-8"> + <title>jQuery UI Droppable - Default functionality</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.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 type="text/javascript"> + <script> $(function() { - $("#draggable").draggable(); - $("#droppable").droppable({ - drop: function(event, ui) { - $(this).addClass('ui-state-highlight').find('p').html('Dropped!'); + $( "#draggable" ).draggable(); + $( "#droppable" ).droppable({ + drop: function( event, ui ) { + $( this ) + .addClass( "ui-state-highlight" ) + .find( "p" ) + .html( "Dropped!" ); } }); - }); </script> </head> <body> + <div class="demo"> <div id="draggable" class="ui-widget-content"> @@ -40,10 +43,11 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Enable any DOM element to be droppable, a target for draggable elements.</p> +<div class="demo-description"> +<p>Enable any DOM element to be droppable, a target for draggable elements.</p> </div><!-- End demo-description --> + </body> </html> diff --git a/demos/droppable/index.html b/demos/droppable/index.html index e0c4e6ae2..13ae9855e 100644 --- a/demos/droppable/index.html +++ b/demos/droppable/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Droppable Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/droppable/photo-manager.html b/demos/droppable/photo-manager.html index 39176732e..989c61aca 100644 --- a/demos/droppable/photo-manager.html +++ b/demos/droppable/photo-manager.html @@ -1,168 +1,184 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Droppable - Simple photo manager</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - #gallery { float: left; width: 65%; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */ - .gallery.custom-state-active { background: #eee; } - .gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; } - .gallery li h5 { margin: 0 0 0.4em; cursor: move; } - .gallery li a { float: right; } - .gallery li a.ui-icon-zoomin { float: left; } - .gallery li img { width: 100%; cursor: move; } - - #trash { float: right; width: 32%; min-height: 18em; padding: 1%;} * html #trash { height: 18em; } /* IE6 */ - #trash h4 { line-height: 16px; margin: 0 0 0.4em; } - #trash h4 .ui-icon { float: left; } - #trash .gallery h5 { display: none; } + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.ui.droppable.js"></script> + <script src="../../ui/jquery.ui.resizable.js"></script> + <script src="../../ui/jquery.ui.dialog.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #gallery { float: left; width: 65%; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */ + .gallery.custom-state-active { background: #eee; } + .gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; } + .gallery li h5 { margin: 0 0 0.4em; cursor: move; } + .gallery li a { float: right; } + .gallery li a.ui-icon-zoomin { float: left; } + .gallery li img { width: 100%; cursor: move; } + + #trash { float: right; width: 32%; min-height: 18em; padding: 1%;} * html #trash { height: 18em; } /* IE6 */ + #trash h4 { line-height: 16px; margin: 0 0 0.4em; } + #trash h4 .ui-icon { float: left; } + #trash .gallery h5 { display: none; } </style> - <script type="text/javascript"> - $(function() { - // there's the gallery and the trash - var $gallery = $('#gallery'), $trash = $('#trash'); - - // let the gallery items be draggable - $('li',$gallery).draggable({ - cancel: 'a.ui-icon',// clicking an icon won't initiate dragging - revert: 'invalid', // when not dropped, the item will revert back to its initial position - containment: $('#demo-frame').length ? '#demo-frame' : 'document', // stick to demo-frame if present - helper: 'clone', - cursor: 'move' - }); - - // let the trash be droppable, accepting the gallery items - $trash.droppable({ - accept: '#gallery > li', - activeClass: 'ui-state-highlight', - drop: function(ev, ui) { - deleteImage(ui.draggable); - } - }); - - // let the gallery be droppable as well, accepting items from the trash - $gallery.droppable({ - accept: '#trash li', - activeClass: 'custom-state-active', - drop: function(ev, ui) { - recycleImage(ui.draggable); - } - }); + <script> + $(function() { + // there's the gallery and the trash + var $gallery = $( "#gallery" ), + $trash = $( "#trash" ); + + // let the gallery items be draggable + $( "li", $gallery ).draggable({ + cancel: "a.ui-icon", // clicking an icon won't initiate dragging + revert: "invalid", // when not dropped, the item will revert back to its initial position + containment: $( "#demo-frame" ).length ? "#demo-frame" : "document", // stick to demo-frame if present + helper: "clone", + cursor: "move" + }); - // image deletion function - var recycle_icon = '<a href="link/to/recycle/script/when/we/have/js/off" title="Recycle this image" class="ui-icon ui-icon-refresh">Recycle image</a>'; - function deleteImage($item) { - $item.fadeOut(function() { - var $list = $('ul',$trash).length ? $('ul',$trash) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash); + // let the trash be droppable, accepting the gallery items + $trash.droppable({ + accept: "#gallery > li", + activeClass: "ui-state-highlight", + drop: function( event, ui ) { + deleteImage( ui.draggable ); + } + }); - $item.find('a.ui-icon-trash').remove(); - $item.append(recycle_icon).appendTo($list).fadeIn(function() { - $item.animate({ width: '48px' }).find('img').animate({ height: '36px' }); - }); - }); + // let the gallery be droppable as well, accepting items from the trash + $gallery.droppable({ + accept: "#trash li", + activeClass: "custom-state-active", + drop: function( event, ui ) { + recycleImage( ui.draggable ); } + }); - // image recycle function - var trash_icon = '<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>'; - function recycleImage($item) { - $item.fadeOut(function() { - $item.find('a.ui-icon-refresh').remove(); - $item.css('width','96px').append(trash_icon).find('img').css('height','72px').end().appendTo($gallery).fadeIn(); + // image deletion function + var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>"; + function deleteImage( $item ) { + $item.fadeOut(function() { + var $list = $( "ul", $trash ).length ? + $( "ul", $trash ) : + $( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash ); + + $item.find( "a.ui-icon-trash" ).remove(); + $item.append( recycle_icon ).appendTo( $list ).fadeIn(function() { + $item + .animate({ width: "48px" }) + .find( "img" ) + .animate({ height: "36px" }); }); + }); + } + + // image recycle function + var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>"; + function recycleImage( $item ) { + $item.fadeOut(function() { + $item + .find( "a.ui-icon-refresh" ) + .remove() + .end() + .css( "width", "96px") + .append( trash_icon ) + .find( "img" ) + .css( "height", "72px" ) + .end() + .appendTo( $gallery ) + .fadeIn(); + }); + } + + // image preview function, demonstrating the ui.dialog used as a modal window + function viewLargerImage( $link ) { + var src = $link.attr( "href" ), + title = $link.siblings( "img" ).attr( "alt" ), + $modal = $( "img[src$='" + src + "']" ); + + if ( $modal.length ) { + $modal.dialog( "open" ); + } else { + var img = $( "<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />" ) + .attr( "src", src ).appendTo( "body" ); + setTimeout(function() { + img.dialog({ + title: title, + width: 400, + modal: true + }); + }, 1 ); } - - // image preview function, demonstrating the ui.dialog used as a modal window - function viewLargerImage($link) { - var src = $link.attr('href'); - var title = $link.siblings('img').attr('alt'); - var $modal = $('img[src$="'+src+'"]'); - - if ($modal.length) { - $modal.dialog('open') - } else { - var img = $('<img alt="'+title+'" width="384" height="288" style="display:none;padding: 8px;" />') - .attr('src',src).appendTo('body'); - setTimeout(function() { - img.dialog({ - title: title, - width: 400, - modal: true - }); - }, 1); - } + } + + // resolve the icons behavior with event delegation + $( "ul.gallery > li" ).click(function( event ) { + var $item = $( this ), + $target = $( event.target ); + + if ( $target.is( "a.ui-icon-trash" ) ) { + deleteImage( $item ); + } else if ( $target.is( "a.ui-icon-zoomin" ) ) { + viewLargerImage( $target ); + } else if ( $target.is( "a.ui-icon-refresh" ) ) { + recycleImage( $item ); } - // resolve the icons behavior with event delegation - $('ul.gallery > li').click(function(ev) { - var $item = $(this); - var $target = $(ev.target); - - if ($target.is('a.ui-icon-trash')) { - deleteImage($item); - } else if ($target.is('a.ui-icon-zoomin')) { - viewLargerImage($target); - } else if ($target.is('a.ui-icon-refresh')) { - recycleImage($item); - } - - return false; - }); + return false; }); + }); </script> </head> <body> - <div class="demo ui-widget ui-helper-clearfix"> - - <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix"> - <li class="ui-widget-content ui-corner-tr"> - <h5 class="ui-widget-header">High Tatras</h5> - <img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" /> - <a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> - <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> - </li> - <li class="ui-widget-content ui-corner-tr"> - <h5 class="ui-widget-header">High Tatras 2</h5> - <img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" /> - <a href="images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> - <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> - </li> - <li class="ui-widget-content ui-corner-tr"> - <h5 class="ui-widget-header">High Tatras 3</h5> - <img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" /> - <a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> - <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> - </li> - <li class="ui-widget-content ui-corner-tr"> - <h5 class="ui-widget-header">High Tatras 4</h5> - <img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" /> - <a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> - <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> - </li> - </ul> - - <div id="trash" class="ui-widget-content ui-state-default"> - <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4> - </div> - - </div><!-- End demo --> - - <div class="demo-description"> - - <p>You can delete an image either by dragging it to the Trash or by clicking the trash icon.</p> - <p>You can "recycle" an image by dragging it back to the gallery or by clicking the recycle icon.</p> - <p>You can view larger image by clicking the zoom icon. jQuery UI dialog widget is used for the modal window.</p> - - </div><!-- End demo-description --> + +<div class="demo ui-widget ui-helper-clearfix"> + +<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix"> + <li class="ui-widget-content ui-corner-tr"> + <h5 class="ui-widget-header">High Tatras</h5> + <img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" /> + <a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> + <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> + </li> + <li class="ui-widget-content ui-corner-tr"> + <h5 class="ui-widget-header">High Tatras 2</h5> + <img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" /> + <a href="images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> + <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> + </li> + <li class="ui-widget-content ui-corner-tr"> + <h5 class="ui-widget-header">High Tatras 3</h5> + <img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" /> + <a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> + <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> + </li> + <li class="ui-widget-content ui-corner-tr"> + <h5 class="ui-widget-header">High Tatras 4</h5> + <img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" /> + <a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> + <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> + </li> +</ul> + +<div id="trash" class="ui-widget-content ui-state-default"> + <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4> +</div> + +</div><!-- End demo --> + + +<div class="demo-description"> +<p>You can delete an image either by dragging it to the Trash or by clicking the trash icon.</p> +<p>You can "recycle" an image by dragging it back to the gallery or by clicking the recycle icon.</p> +<p>You can view larger image by clicking the zoom icon. jQuery UI dialog widget is used for the modal window.</p> +</div><!-- End demo-description --> + </body> </html> diff --git a/demos/droppable/propagation.html b/demos/droppable/propagation.html index e6cf3c212..d39c13101 100644 --- a/demos/droppable/propagation.html +++ b/demos/droppable/propagation.html @@ -1,48 +1,53 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Droppable - Prevent propagation</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.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 type="text/javascript"> + <script> $(function() { + $( "#draggable" ).draggable(); - $("#draggable").draggable(); - - $("#droppable, #droppable-inner").droppable({ - activeClass: 'ui-state-hover', - hoverClass: 'ui-state-active', - drop: function(event, ui) { - $(this).addClass('ui-state-highlight').find('> p').html('Dropped!'); + $( "#droppable, #droppable-inner" ).droppable({ + activeClass: "ui-state-hover", + hoverClass: "ui-state-active", + drop: function( event, ui ) { + $( this ) + .addClass( "ui-state-highlight" ) + .find( "> p" ) + .html( "Dropped!" ); return false; } }); - $("#droppable2, #droppable2-inner").droppable({ + $( "#droppable2, #droppable2-inner" ).droppable({ greedy: true, - activeClass: 'ui-state-hover', - hoverClass: 'ui-state-active', - drop: function(event, ui) { - $(this).addClass('ui-state-highlight').find('> p').html('Dropped!'); + activeClass: "ui-state-hover", + hoverClass: "ui-state-active", + drop: function( event, ui ) { + $( this ) + .addClass( "ui-state-highlight" ) + .find( "> p" ) + .html( "Dropped!" ); } }); - }); </script> </head> <body> + <div class="demo"> <div id="draggable" class="ui-widget-content"> @@ -65,10 +70,11 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>When working with nested droppables — for example, you may have an editable directory structure displayed as a tree, with folder and document nodes — the <code>greedy</code> option set to true prevents event propagation when a draggable is dropped on a child node (droppable).</p> +<div class="demo-description"> +<p>When working with nested droppables — for example, you may have an editable directory structure displayed as a tree, with folder and document nodes — the <code>greedy</code> option set to true prevents event propagation when a draggable is dropped on a child node (droppable).</p> </div><!-- End demo-description --> + </body> </html> diff --git a/demos/droppable/revert.html b/demos/droppable/revert.html index 1f36c7178..e6de051f5 100644 --- a/demos/droppable/revert.html +++ b/demos/droppable/revert.html @@ -1,38 +1,40 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Droppable - Revert draggable position</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.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 type="text/javascript"> + <script> $(function() { - - $("#draggable").draggable({ revert: 'valid' }); - $("#draggable2").draggable({ revert: 'invalid' }); - - $("#droppable").droppable({ - activeClass: 'ui-state-hover', - hoverClass: 'ui-state-active', - drop: function(event, ui) { - $(this).addClass('ui-state-highlight').find('p').html('Dropped!'); + $( "#draggable" ).draggable({ revert: "valid" }); + $( "#draggable2" ).draggable({ revert: "invalid" }); + + $( "#droppable" ).droppable({ + activeClass: "ui-state-hover", + hoverClass: "ui-state-active", + drop: function( event, ui ) { + $( this ) + .addClass( "ui-state-highlight" ) + .find( "p" ) + .html( "Dropped!" ); } }); - }); </script> </head> <body> + <div class="demo"> <div id="draggable" class="ui-widget-content"> @@ -49,10 +51,11 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Return the draggable (or it's helper) to its original location when dragging stops with the boolean <code>revert</code> option set on the draggable.</p> +<div class="demo-description"> +<p>Return the draggable (or it's helper) to its original location when dragging stops with the boolean <code>revert</code> option set on the draggable.</p> </div><!-- End demo-description --> + </body> </html> diff --git a/demos/droppable/shopping-cart.html b/demos/droppable/shopping-cart.html index de8ce4fe3..45e716423 100644 --- a/demos/droppable/shopping-cart.html +++ b/demos/droppable/shopping-cart.html @@ -1,53 +1,53 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Droppable - Shopping Cart Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.ui.droppable.js"></script> + <script src="../../ui/jquery.ui.sortable.js"></script> + <script src="../../ui/jquery.ui.accordion.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> h1 { padding: .2em; margin: 0; } #products { float:left; width: 500px; margin-right: 2em; } #cart { width: 200px; float: left; } /* style the list to maximize the droppable hitarea */ #cart ol { margin: 0; padding: 1em 0 1em 3em; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#catalog").accordion(); - $("#catalog li").draggable({ + $( "#catalog" ).accordion(); + $( "#catalog li" ).draggable({ appendTo: "body", helper: "clone" }); - $("#cart ol").droppable({ + $( "#cart ol" ).droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", accept: ":not(.ui-sortable-helper)", - drop: function(event, ui) { - $(this).find(".placeholder").remove(); - $("<li></li>").text(ui.draggable.text()).appendTo(this); + drop: function( event, ui ) { + $( this ).find( ".placeholder" ).remove(); + $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this ); } }).sortable({ items: "li:not(.placeholder)", sort: function() { // gets added unintentionally by droppable interacting with sortable // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options - $(this).removeClass("ui-state-default"); + $( this ).removeClass( "ui-state-default" ); } }); - }); </script> </head> <body> + <div class="demo"> <div id="products"> @@ -91,11 +91,11 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Demonstrate how to use an accordion to structure products into a catalog and make use drag and drop for adding -them to a shopping cart, where they are sortable.</p> +<div class="demo-description"> +<p>Demonstrate how to use an accordion to structure products into a catalog and make use drag and drop for adding them to a shopping cart, where they are sortable.</p> </div><!-- End demo-description --> + </body> </html> diff --git a/demos/droppable/visual-feedback.html b/demos/droppable/visual-feedback.html index 1bb6c6038..f1e579621 100644 --- a/demos/droppable/visual-feedback.html +++ b/demos/droppable/visual-feedback.html @@ -1,43 +1,49 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Droppable - Visual feedback</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.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; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#draggable").draggable(); - $("#droppable").droppable({ - hoverClass: 'ui-state-active', - drop: function(event, ui) { - $(this).addClass('ui-state-highlight').find('p').html('Dropped!'); + $( "#draggable" ).draggable(); + $( "#droppable" ).droppable({ + hoverClass: "ui-state-active", + drop: function( event, ui ) { + $( this ) + .addClass( "ui-state-highlight" ) + .find( "p" ) + .html( "Dropped!" ); } }); - - $("#draggable2").draggable(); - $("#droppable2").droppable({ + + $( "#draggable2" ).draggable(); + $( "#droppable2" ).droppable({ accept: "#draggable2", - activeClass: 'ui-state-hover', - drop: function(event, ui) { - $(this).addClass('ui-state-highlight').find('p').html('Dropped!'); + activeClass: "ui-state-hover", + drop: function( event, ui ) { + $( this ) + .addClass( "ui-state-highlight" ) + .find( "p" ) + .html( "Dropped!" ); } }); - }); </script> </head> <body> + <div class="demo"> <h3 class="docs">Feedback on hover:</h3> @@ -60,14 +66,13 @@ <p>Drop here</p> </div> -<!-- add active class demo --> - </div><!-- End demo --> -<div class="demo-description"> -<p>Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it). Use the <code>hoverClass</code> or <code>activeClass</code> options to specify respective classes.</p> +<div class="demo-description"> +<p>Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it). Use the <code>hoverClass</code> or <code>activeClass</code> options to specify respective classes.</p> </div><!-- End demo-description --> + </body> </html> diff --git a/demos/effect/default.html b/demos/effect/default.html index f2988c5c3..4ccd0c14b 100644 --- a/demos/effect/default.html +++ b/demos/effect/default.html @@ -1,60 +1,63 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Effects - Effect Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.bounce.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.clip.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.drop.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.fade.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.fold.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.highlight.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.pulsate.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.scale.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.shake.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.slide.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.transfer.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - .toggler { width: 500px; height: 200px; position: relative;} + <meta charset="utf-8"> + <title>jQuery UI Effects - Effect demo</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.effects.core.js"></script> + <script src="../../ui/jquery.effects.blind.js"></script> + <script src="../../ui/jquery.effects.bounce.js"></script> + <script src="../../ui/jquery.effects.clip.js"></script> + <script src="../../ui/jquery.effects.drop.js"></script> + <script src="../../ui/jquery.effects.explode.js"></script> + <script src="../../ui/jquery.effects.fade.js"></script> + <script src="../../ui/jquery.effects.fold.js"></script> + <script src="../../ui/jquery.effects.highlight.js"></script> + <script src="../../ui/jquery.effects.pulsate.js"></script> + <script src="../../ui/jquery.effects.scale.js"></script> + <script src="../../ui/jquery.effects.shake.js"></script> + <script src="../../ui/jquery.effects.slide.js"></script> + <script src="../../ui/jquery.effects.transfer.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: 135px; padding: 0.4em; position: relative; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; } .ui-effects-transfer { border: 2px dotted gray; } </style> - <script type="text/javascript"> + <script> $(function() { - - //run the currently selected effect - function runEffect(){ - //get effect type from - var selectedEffect = $('#effectTypes').val(); + // run the currently selected effect + function runEffect() { + // get effect type from + var selectedEffect = $( "#effectTypes" ).val(); - //most effect types need no options passed by default + // most effect types need no options passed by default var options = {}; - //check if it's scale, transfer, or size - they need options explicitly set - if(selectedEffect == 'scale'){ options = {percent: 0}; } - else if(selectedEffect == 'transfer'){ options = { to: "#button", className: 'ui-effects-transfer' }; } - else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; } - - //run the effect - $("#effect").effect(selectedEffect,options,500,callback); + // some effects have required parameters + if ( selectedEffect === "scale" ) { + options = { percent: 0 }; + } else if ( selectedEffect === "transfer" ) { + options = { to: "#button", className: "ui-effects-transfer" }; + } else if ( selectedEffect === "size" ) { + options = { to: { width: 200, height: 60 } }; + } + + // run the effect + $( "#effect" ).effect( selectedEffect, options, 500, callback ); }; - - //callback function to bring a hidden box back - function callback(){ - setTimeout(function(){ - $("#effect:hidden").removeAttr('style').hide().fadeIn(); - }, 1000); + + // callback function to bring a hidden box back + function callback() { + setTimeout(function() { + $( "#effect" ).removeAttr( "style" ).hide().fadeIn(); + }, 1000 ); }; - - //set effect from select menu value - $("#button").click(function() { + + // set effect from select menu value + $( "#button" ).click(function() { runEffect(); return false; }); @@ -94,13 +97,12 @@ <a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a> - </div><!-- End demo --> -<div class="demo-description"> -<p>Click the button above to show the effect.</p> +<div class="demo-description"> +<p>Click the button above to show the effect.</p> </div><!-- End demo-description --> </body> diff --git a/demos/effect/easing.html b/demos/effect/easing.html index 12d18fe70..baef2d066 100644 --- a/demos/effect/easing.html +++ b/demos/effect/easing.html @@ -1,81 +1,90 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Effects - Effect Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - .graph { - float: left; - margin-left: 10px; - } + <meta charset="utf-8"> + <title>jQuery UI Effects - Easing demo</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.effects.core.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .graph { + float: left; + margin-left: 10px; + } </style> - <script type="text/javascript"> + <script> $(function() { - if (!$("<canvas/>")[0].getContext) { - $("<div/>").text("Your browser doesn't support canvas, which is required for this demo. Give Firefox 3 a try!").appendTo("#graphs"); + if ( !$( "<canvas/>" )[0].getContext ) { + $( "<div/>" ).text( + "Your browser doesn't support canvas, which is required for this demo. " + + "Give Firefox 3 a try!" + ).appendTo( "#graphs" ); return; } - var i = 0; - var width = 100, + + var i = 0, + width = 100, height = 100; - $.each($.easing, function(name, impl) { - // skip linera/jswing and any non functioning implementation - if (!$.isFunction(impl) || /jswing/.test(name)) + $.each( $.easing, function( name, impl ) { + // skip linear/jswing and any non functioning implementation + if ( !$.isFunction( impl ) || /jswing/.test( name ) ) { return; - var graph = $("<div/>").addClass("graph").appendTo("#graphs"); - var text = $("<div/>").text(++i + ". " + name).appendTo(graph); - - var canvas = $("<canvas/>").appendTo(graph)[0] + } + var graph = $( "<div/>" ).addClass( "graph" ).appendTo( "#graphs" ), + text = $( "<div/>" ).text( ++i + ". " + name ).appendTo( graph ), + canvas = $( "<canvas/>" ).appendTo( graph )[ 0 ]; canvas.width = width; canvas.height = height; - var drawHeight = height * 0.8; - var cradius = 10; - var ctx = canvas.getContext("2d"); + var drawHeight = height * 0.8, + cradius = 10; + ctx = canvas.getContext( "2d" ); ctx.fillStyle = "black"; - + ctx.beginPath(); - ctx.moveTo(cradius, 0); - ctx.quadraticCurveTo(0, 0, 0, cradius); - ctx.lineTo(0, height - cradius); - ctx.quadraticCurveTo(0, height, cradius, height); - ctx.lineTo(width - cradius, height); - ctx.quadraticCurveTo(width, height, width, height - cradius); - ctx.lineTo(width, 0); - ctx.lineTo(cradius, 0); + ctx.moveTo( cradius, 0 ); + ctx.quadraticCurveTo( 0, 0, 0, cradius ); + ctx.lineTo( 0, height - cradius ); + ctx.quadraticCurveTo( 0, height, cradius, height ); + ctx.lineTo( width - cradius, height ); + ctx.quadraticCurveTo( width, height, width, height - cradius ); + ctx.lineTo( width, 0 ); + ctx.lineTo( cradius, 0 ); ctx.fill(); - + ctx.strokeStyle = "#555"; ctx.beginPath(); - ctx.moveTo(width * 0.1, drawHeight + .5); - ctx.lineTo(width * 0.9, drawHeight + .5); + ctx.moveTo( width * 0.1, drawHeight + .5 ); + ctx.lineTo( width * 0.9, drawHeight + .5 ); ctx.stroke(); ctx.strokeStyle = "#555"; ctx.beginPath(); - ctx.moveTo(width * 0.1, drawHeight * .3 - .5); - ctx.lineTo(width * 0.9, drawHeight * .3 - .5); + ctx.moveTo( width * 0.1, drawHeight * .3 - .5 ); + ctx.lineTo( width * 0.9, drawHeight * .3 - .5 ); ctx.stroke(); ctx.strokeStyle = "white"; ctx.beginPath(); ctx.lineWidth = 2; - ctx.moveTo(width * 0.1, drawHeight); - $.each(new Array(width), function(position) { - var val = impl(0, position, 0, 1, height); - if (/linear|jswing/.test(name)) val = position / width; - ctx.lineTo(position * 0.8 + width * 0.1, drawHeight - drawHeight * val * 0.7); + ctx.moveTo( width * 0.1, drawHeight ); + $.each( new Array( width ), function( position ) { + var val = impl( 0, position, 0, 1, height ); + if ( /linear|jswing/.test( name ) ) { + val = position / width; + } + ctx.lineTo( position * 0.8 + width * 0.1, + drawHeight - drawHeight * val * 0.7 ); }); ctx.stroke(); graph.click(function() { - $(canvas).animate({height: "hide"}, 2000, name).animate({"left": "0"}, 800).animate({height: "show"}, 2000, name); + $( canvas ) + .animate( { height: "hide" }, 2000, name ) + .animate( { left: 0 }, 800 ) + .animate( { height: "show" }, 2000, name ); }); - - graph.width(width).height(height + text.height() + 10); - //return false; + + graph.width( width ).height( height + text.height() + 10 ); }); }); </script> @@ -84,18 +93,15 @@ <div class="demo"> - <div id="graphs"></div> - - <div id="animted"></div> +<div id="graphs"></div> </div><!-- End demo --> -<div class="demo-description"> -<p><strong>All easings provided by jQuery UI are drawn above, using a HTML canvas element</strong>. Click a diagram to see the easing in action.</p> +<div class="demo-description"> +<p><strong>All easings provided by jQuery UI are drawn above, using a HTML canvas element</strong>. Click a diagram to see the easing in action.</p> </div><!-- End demo-description --> </body> </html> - diff --git a/demos/effect/index.html b/demos/effect/index.html index cecceb6cd..65aa3993a 100644 --- a/demos/effect/index.html +++ b/demos/effect/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> - <title>jQuery UI Effect Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <meta charset="utf-8"> + <title>jQuery UI Effects Demos</title> + <link rel="stylesheet" href="../demos.css"> </head> <body> @@ -12,11 +12,6 @@ <ul> <li class="demo-config-on"><a href="default.html">Effect showcase</a></li> <li><a href="easing.html">Easing showcase</a></li> - <!-- WIP - <li class="demo-config-on"><a href="scale.html">Scale effect</a></li> - <li class="demo-config-on"><a href="size.html">Size effect</a></li> - <li class="demo-config-on"><a href="transfer.html">Transfer effect</a></li> - --> </ul> </div> diff --git a/demos/hide/default.html b/demos/hide/default.html index 678092d9a..130c88c93 100644 --- a/demos/hide/default.html +++ b/demos/hide/default.html @@ -1,60 +1,61 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Effects - Hide Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.bounce.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.clip.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.drop.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.fold.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.highlight.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.pulsate.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.scale.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.shake.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.slide.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - .toggler { width: 500px; height: 200px; } - #button { padding: .5em 1em; text-decoration: none; } - #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; } - #effect h3 { margin: 0; padding: 0.4em; text-align: center; } + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.effects.core.js"></script> + <script src="../../ui/jquery.effects.blind.js"></script> + <script src="../../ui/jquery.effects.bounce.js"></script> + <script src="../../ui/jquery.effects.clip.js"></script> + <script src="../../ui/jquery.effects.drop.js"></script> + <script src="../../ui/jquery.effects.explode.js"></script> + <script src="../../ui/jquery.effects.fold.js"></script> + <script src="../../ui/jquery.effects.highlight.js"></script> + <script src="../../ui/jquery.effects.pulsate.js"></script> + <script src="../../ui/jquery.effects.scale.js"></script> + <script src="../../ui/jquery.effects.shake.js"></script> + <script src="../../ui/jquery.effects.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: 135px; padding: 0.4em; position: relative; } + #effect h3 { margin: 0; padding: 0.4em; text-align: center; } </style> - <script type="text/javascript"> + <script> $(function() { + // run the currently selected effect + function runEffect() { + // get effect type from + var selectedEffect = $( "#effectTypes" ).val(); - //run the currently selected effect - function runEffect(){ - //get effect type from - var selectedEffect = $('#effectTypes').val(); - - //most effect types need no options passed by default + // most effect types need no options passed by default var options = {}; - //check if it's scale or size - they need options explicitly set - if(selectedEffect == 'scale'){ options = {percent: 0}; } - else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; } - - //run the effect - $("#effect").hide(selectedEffect,options,500,callback); + // some effects have required parameters + if ( selectedEffect === "scale" ) { + options = { percent: 0 }; + } else if ( selectedEffect === "size" ) { + options = { to: { width: 200, height: 60 } }; + } + + // run the effect + $( "#effect" ).hide( selectedEffect, options, 1000, callback ); }; - - //callback function to bring a hidden box back - function callback(){ - setTimeout(function(){ - $("#effect:hidden").removeAttr('style').hide().fadeIn(); - }, 1000); + + // callback function to bring a hidden box back + function callback() { + setTimeout(function() { + $( "#effect" ).removeAttr( "style" ).hide().fadeIn(); + }, 1000 ); }; - - //set effect from select menu value - $("#button").click(function() { + + // set effect from select menu value + $( "#button" ).click(function() { runEffect(); return false; }); - }); </script> </head> @@ -89,13 +90,12 @@ <a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a> - </div><!-- End demo --> -<div class="demo-description"> -<p>Click the button above to preview the effect.</p> +<div class="demo-description"> +<p>Click the button above to preview the effect.</p> </div><!-- End demo-description --> </body> diff --git a/demos/hide/index.html b/demos/hide/index.html index 0e9af371f..f5bd6a0e4 100644 --- a/demos/hide/index.html +++ b/demos/hide/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Effects Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/index.html b/demos/index.html index bf5ac5a1f..691509682 100644 --- a/demos/index.html +++ b/demos/index.html @@ -58,6 +58,7 @@ <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-fo.js"></script> <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-fr.js"></script> <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-fr-CH.js"></script> + <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-gl.js"></script> <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-he.js"></script> <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-hr.js"></script> <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-hu.js"></script> @@ -67,12 +68,14 @@ <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-it.js"></script> <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-ja.js"></script> <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-ko.js"></script> + <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-kz.js"></script> <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-lt.js"></script> <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-lv.js"></script> <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-ms.js"></script> <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-nl.js"></script> <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-no.js"></script> <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-pl.js"></script> + <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-pt.js"></script> <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-pt-BR.js"></script> <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-ro.js"></script> <script type="text/javascript" src="../ui/i18n/jquery.ui.datepicker-ru.js"></script> diff --git a/demos/position/cycler.html b/demos/position/cycler.html index fa0571e33..59c98b1ec 100644 --- a/demos/position/cycler.html +++ b/demos/position/cycler.html @@ -1,30 +1,27 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Position - Default functionality</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> html, body { margin: 0; padding: 0 } </style> - - <script type="text/javascript"> + <script> $(function() { - - $.fn.position2 = function(options) { - return this.position($.extend({ + $.fn.position2 = function( options ) { + return this.position( $.extend({ of: window, - using: function(to) { - $(this).css({ + using: function( to ) { + $( this ).css({ top: to.top, left: to.left }) @@ -32,8 +29,8 @@ collision: "none" }, options)); } - - $.fn.left = function(using) { + + $.fn.left = function( using ) { return this.position2({ my: "right middle", at: "left middle", @@ -41,7 +38,7 @@ using: using }); } - $.fn.right = function(using) { + $.fn.right = function( using ) { return this.position2({ my: "left middle", at: "right middle", @@ -49,76 +46,76 @@ using: using }); } - $.fn.center = function(using) { + $.fn.center = function( using ) { return this.position2({ my: "center middle", at: "center middle", using: using }); }; - - $("img:eq(0)").left(); - $("img:eq(1)").center(); - $("img:eq(2)").right(); - - $("body").css({ + + $( "img:eq(0)" ).left(); + $( "img:eq(1)" ).center(); + $( "img:eq(2)" ).right(); + + $( "body" ).css({ overflow: "hidden" }) - $(".demo").css({ + $( ".demo" ).css({ position: "relative", }); - $(".demo img").css({ + $( ".demo img" ).css({ position: "absolute", }); - - function animate(to) { - $(this).animate(to); + + function animate( to ) { + $(this).animate( to ); } function next() { - $("img:eq(2)").center(animate); - $("img:eq(1)").left(animate) - $("img:eq(0)").right().appendTo(".demo"); + $( "img:eq(2)" ).center( animate ); + $( "img:eq(1)" ).left( animate ) + $( "img:eq(0)" ).right().appendTo( ".demo" ); } function previous() { - $("img:eq(0)").center(animate); - $("img:eq(1)").right(animate); - $("img:eq(2)").left().prependTo(".demo"); + $( "img:eq(0)" ).center( animate ); + $( "img:eq(1)" ).right( animate ); + $( "img:eq(2)" ).left().prependTo( ".demo" ); } - $("#previous").click(previous); - $("#next").click(next); - - $(".demo img").click(function() { - $(".demo img").index(this) == 0 ? previous() : next(); + $( "#previous" ).click( previous ); + $( "#next" ).click( next ); + + $( ".demo img" ).click(function() { + $( ".demo img" ).index( this ) === 0 ? previous() : next(); + }); + + $( window ).resize(function() { + $( "img:eq(0)" ).left( animate ); + $( "img:eq(1)" ).center( animate ); + $( "img:eq(2)" ).right( animate ); }); - - $(window).resize(function() { - $("img:eq(0)").left(animate); - $("img:eq(1)").center(animate); - $("img:eq(2)").right(animate); - }) }); </script> - </head> <body> <div class="demo"> - <img src="images/earth.jpg" /> - <img src="images/flight.jpg" /> - <img src="images/rocket.jpg" /> +<img src="images/earth.jpg" /> +<img src="images/flight.jpg" /> +<img src="images/rocket.jpg" /> - <a id="previous" href="#">Previous</a> - <a id="next" href="#">Next</a> -</div> +<a id="previous" href="#">Previous</a> +<a id="next" href="#">Next</a> + +</div><!-- End demo --> -<div class="demo-description"> + +<div class="demo-description"> <p>A prototype for the <a href="http://wiki.jqueryui.com/Photoviewer">Photoviewer</a> using Position to place images at the center, left and right and cycle them. <br/>Use the links at the top to cycle, or click on the images on the left and right. <br/>Note how the images are repositioned when resizing the window. <br/>Warning: Doesn't currently work inside the demo viewer; open in a new window instead!</p> - </div><!-- End demo-description --> </body> diff --git a/demos/position/default.html b/demos/position/default.html index d26959b96..67f8578d6 100644 --- a/demos/position/default.html +++ b/demos/position/default.html @@ -1,28 +1,25 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Position - Default functionality</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.draggable.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> div#parent { width: 60%; margin: 10px auto; padding: 5px; - border: 1px solid #777; background-color: #fbca93; text-align: center; } - div.positionable { width: 75px; height: 75px; @@ -33,49 +30,46 @@ background-color: #bcd5e6; text-align: center; } - select, input { margin-left: 15px; } - </style> - <script type="text/javascript"> + <script> $(function() { - - function position(using) { - $('.positionable').position({ - of: $('#parent'), - my: $('#my_horizontal').val() + ' ' + $('#my_vertical').val(), - at: $('#at_horizontal').val() + ' '+ $('#at_vertical').val(), - offset: $('#offset').val(), + function position( using ) { + $( ".positionable" ).position({ + of: $( "#parent" ), + my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(), + at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(), + offset: $( "#offset" ).val(), using: using, - collision: $("#collision_horizontal").val() + ' ' + $("#collision_vertical").val() + collision: $( "#collision_horizontal" ).val() + ' ' + $( "#collision_vertical" ).val() }); } - - $('.positionable').css("opacity", 0.5); - - $(':input').bind('click keyup change', function() { position(); }); - - $("#parent").draggable({ + + $( ".positionable" ).css( "opacity", 0.5 ); + + $( ":input" ).bind( "click keyup change", function() { position(); }); + + $( "#parent" ).draggable({ drag: function() { position(); } }); - - $('.positionable').draggable({ - drag: function(event, ui) { + + $( ".positionable" ).draggable({ + drag: function( event, ui ) { // reset offset before calculating it - $("#offset").val("0"); - position(function(result) { - $("#offset").val("" + (ui.offset.left - result.left) + " " + (ui.offset.top - result.top)); + $( "#offset" ).val( "0" ); + position(function( result ) { + $( "#offset" ).val( "" + ( ui.offset.left - result.left ) + + " " + ( ui.offset.top - result.top ) ); position(); }); } }); - + position(); }); </script> - </head> <body> @@ -148,11 +142,11 @@ </div><!-- End demo --> -<div class="demo-description"> + +<div class="demo-description"> <p>Use the form controls to configure the positioning, or drag the positioned element to modify its offset. <br/>Drag around the parent element to see collision detection in action.</p> - </div><!-- End demo-description --> </body> diff --git a/demos/position/index.html b/demos/position/index.html index 54a6d54c6..498c09b2b 100644 --- a/demos/position/index.html +++ b/demos/position/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Position Demo</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/progressbar/animated.html b/demos/progressbar/animated.html index e094f64a3..0d01d1485 100644 --- a/demos/progressbar/animated.html +++ b/demos/progressbar/animated.html @@ -1,20 +1,20 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Progressbar - Animated</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.progressbar.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - .ui-progressbar-value { background-image: url(images/pbar-ani.gif); } + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.progressbar.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .ui-progressbar-value { background-image: url(images/pbar-ani.gif); } </style> - <script type="text/javascript"> + <script> $(function() { - $("#progressbar").progressbar({ + $( "#progressbar" ).progressbar({ value: 59 }); }); @@ -28,8 +28,9 @@ </div><!-- End demo --> -<div class="demo-description"> + +<div class="demo-description"> <p> This progressbar has an animated fill by setting the <code>background-image</code> @@ -37,7 +38,6 @@ on the <code>.ui-progressbar-value</code> element, using css. </p> - </div><!-- End demo-description --> </body> diff --git a/demos/progressbar/default.html b/demos/progressbar/default.html index 86c7c9c54..c79a3ef7c 100644 --- a/demos/progressbar/default.html +++ b/demos/progressbar/default.html @@ -1,17 +1,17 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Progressbar - Default functionality</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.progressbar.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.progressbar.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#progressbar").progressbar({ + $( "#progressbar" ).progressbar({ value: 37 }); }); @@ -21,19 +21,15 @@ <div class="demo"> - <div id="progressbar"></div> +<div id="progressbar"></div> </div><!-- End demo --> <div class="demo-description"> - <p>Default determinate progress bar.</p> - </div><!-- End demo-description --> - - </body> </html> diff --git a/demos/progressbar/index.html b/demos/progressbar/index.html index cf8ee9fe3..9836f59aa 100644 --- a/demos/progressbar/index.html +++ b/demos/progressbar/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Progressbar Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/progressbar/resize.html b/demos/progressbar/resize.html index c16b1c081..69fc60b96 100644 --- a/demos/progressbar/resize.html +++ b/demos/progressbar/resize.html @@ -1,22 +1,22 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Progressbar - Resizable</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.progressbar.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.progressbar.js"></script> + <script src="../../ui/jquery.ui.resizable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $("#progressbar").progressbar({ + $( "#progressbar" ).progressbar({ value: 37 }); - $("#progressbarWrapper").resizable(); + $( "#progressbarWrapper" ).resizable(); }); </script> </head> @@ -24,16 +24,16 @@ <div class="demo"> - <div id="progressbarWrapper" style="height:30px; " class="ui-widget-default"> - <div id="progressbar" style="height:100%;"></div> - </div> +<div id="progressbarWrapper" style="height:30px; " class="ui-widget-default"> + <div id="progressbar" style="height:100%;"></div> +</div> </div><!-- End demo --> -<div class="demo-description"> -<p>The progress bar's widths are specified in percentages for flexible sizing so it will resize to fit its container. Try resizing the height and width of this bar to see how it maintains the correct proportions. (This is not necessarily a real-world example, but it's a good illustration of how flexibly all the plugins are coded.)</p> +<div class="demo-description"> +<p>The progress bar's widths are specified in percentages for flexible sizing so it will resize to fit its container. Try resizing the height and width of this bar to see how it maintains the correct proportions. (This is not necessarily a real-world example, but it's a good illustration of how flexibly all the plugins are coded.)</p> </div><!-- End demo-description --> </body> diff --git a/demos/removeClass/default.html b/demos/removeClass/default.html index 0d3b10e8d..b5a0d6333 100644 --- a/demos/removeClass/default.html +++ b/demos/removeClass/default.html @@ -1,29 +1,29 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Effects - removeClass Demo</title> - <link type="text/css" href="http://jquery-ui.googlecode.com/svn/trunk/themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/jquery-1.4.2.js"></script> - <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/jquery.effects.core.js"></script> - <link type="text/css" href="http://jquery-ui.googlecode.com/svn/trunk/demos/demos.css" rel="stylesheet" /> - <style type="text/css"> - .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; } + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.effects.core.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 type="text/javascript"> + <script> $(function() { - $("#button").click(function() { - $('#effect').removeClass('newClass', 1000, callback); + $( "#button" ).click(function() { + $( "#effect" ).removeClass( "newClass", 1000, callback ); return false; }); - - function callback(){ - setTimeout(function(){ - $('#effect').addClass('newClass'); - }, 1500); + + function callback() { + setTimeout(function() { + $( "#effect" ).addClass( "newClass" ); + }, 1500 ); } }); </script> @@ -34,7 +34,7 @@ <div class="toggler"> <div id="effect" class="newClass ui-corner-all"> - Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. + Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. </div> </div> @@ -42,10 +42,10 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Click the button above to preview the effect.</p> +<div class="demo-description"> +<p>Click the button above to preview the effect.</p> </div><!-- End demo-description --> </body> diff --git a/demos/removeClass/index.html b/demos/removeClass/index.html index 0e9af371f..f5bd6a0e4 100644 --- a/demos/removeClass/index.html +++ b/demos/removeClass/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Effects Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/resizable/animate.html b/demos/resizable/animate.html index 36739e3dd..47dce9da2 100644 --- a/demos/resizable/animate.html +++ b/demos/resizable/animate.html @@ -1,29 +1,30 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Resizable - Animate</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.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 type="text/javascript"> + <script> $(function() { - $("#resizable").resizable({ + $( "#resizable" ).resizable({ animate: true }); }); </script> </head> <body> + <div class="demo"> <div id="resizable" class="ui-widget-content"> @@ -32,10 +33,11 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Animate the resize action using the <code>animate</code> option (boolean). When this option is set to true, drag the outline to the desired location; the element animates to that size on drag stop.</p> +<div class="demo-description"> +<p>Animate the resize action using the <code>animate</code> option (boolean). When this option is set to true, drag the outline to the desired location; the element animates to that size on drag stop.</p> </div><!-- End demo-description --> + </body> </html> diff --git a/demos/resizable/aspect-ratio.html b/demos/resizable/aspect-ratio.html index ae236ec59..20c992f42 100644 --- a/demos/resizable/aspect-ratio.html +++ b/demos/resizable/aspect-ratio.html @@ -1,28 +1,29 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Resizable - Preserve aspect ratio</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.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 type="text/javascript"> + <script> $(function() { - $("#resizable").resizable({ - aspectRatio: 16/9 + $( "#resizable" ).resizable({ + aspectRatio: 16 / 9 }); }); </script> </head> <body> + <div class="demo"> <div id="resizable" class="ui-widget-content"> @@ -31,10 +32,11 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Maintain the existing aspect ratio or set a new one to constrain the proportions on resize. Set the <code>aspectRatio</code> option to true, and optionally pass in a new ratio (i.e., 4/3)</p> +<div class="demo-description"> +<p>Maintain the existing aspect ratio or set a new one to constrain the proportions on resize. Set the <code>aspectRatio</code> option to true, and optionally pass in a new ratio (i.e., 4/3)</p> </div><!-- End demo-description --> + </body> </html> diff --git a/demos/resizable/constrain-area.html b/demos/resizable/constrain-area.html index 2fdbbd957..559dfebc2 100644 --- a/demos/resizable/constrain-area.html +++ b/demos/resizable/constrain-area.html @@ -1,30 +1,31 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Resizable - Constrain resize area</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.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 type="text/javascript"> + <script> $(function() { - $("#resizable").resizable({ - containment: '#container' + $( "#resizable" ).resizable({ + containment: "#container" }); }); </script> </head> <body> + <div class="demo"> <div id="container" class="ui-widget-content"> @@ -36,10 +37,11 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Define the boundaries of the resizable area. Use the <code>containment</code> option to specify a parent DOM element or a jQuery selector, like 'document.'</p> +<div class="demo-description"> +<p>Define the boundaries of the resizable area. Use the <code>containment</code> option to specify a parent DOM element or a jQuery selector, like 'document.'</p> </div><!-- End demo-description --> + </body> </html> diff --git a/demos/resizable/default.html b/demos/resizable/default.html index a8dfd251c..ef90376cb 100644 --- a/demos/resizable/default.html +++ b/demos/resizable/default.html @@ -1,26 +1,27 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Resizable - Default functionality</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.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 type="text/javascript"> + <script> $(function() { - $("#resizable").resizable(); + $( "#resizable" ).resizable(); }); </script> </head> <body> + <div class="demo"> <div id="resizable" class="ui-widget-content"> @@ -29,10 +30,11 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Enable any DOM element to be resizable. With the cursor grab the right or bottom border and drag to the desired width or height.</p> +<div class="demo-description"> +<p>Enable any DOM element to be resizable. With the cursor grab the right or bottom border and drag to the desired width or height.</p> </div><!-- End demo-description --> + </body> </html> diff --git a/demos/resizable/delay-start.html b/demos/resizable/delay-start.html index 16e024230..f9f9ddca3 100644 --- a/demos/resizable/delay-start.html +++ b/demos/resizable/delay-start.html @@ -1,32 +1,33 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Resizable - Delay start</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.resizable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> #resizable, #resizable2 { width: 150px; height: 150px; padding: 0.5em; } #resizable h3, #resizable2 h3 { text-align: center; margin: 0; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#resizable").resizable({ + $( "#resizable" ).resizable({ delay: 1000 }); - $("#resizable2").resizable({ + $( "#resizable2" ).resizable({ distance: 40 }); }); </script> </head> <body> + <div class="demo"> <h3 class="docs">Time delay (ms):</h3> @@ -39,14 +40,13 @@ <h3 class="ui-widget-header">Distance</h3> </div> -<!-- ADD DISTANCE DEMO --> - </div><!-- End demo --> -<div class="demo-description"> -<p>Delay the start of resizng for a number of milliseconds with the <code>delay</code> option; prevent resizing until the cursor is held down and dragged a specifed number of pixels with the <code>distance</code> option.</p> +<div class="demo-description"> +<p>Delay the start of resizng for a number of milliseconds with the <code>delay</code> option; prevent resizing until the cursor is held down and dragged a specifed number of pixels with the <code>distance</code> option.</p> </div><!-- End demo-description --> + </body> </html> diff --git a/demos/resizable/helper.html b/demos/resizable/helper.html index 49e8114ab..703c8b441 100644 --- a/demos/resizable/helper.html +++ b/demos/resizable/helper.html @@ -1,29 +1,30 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Resizable - Helper</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.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 type="text/javascript"> + <script> $(function() { - $("#resizable").resizable({ - helper: 'ui-resizable-helper' + $( "#resizable" ).resizable({ + helper: "ui-resizable-helper" }); }); </script> </head> <body> + <div class="demo"> <div id="resizable" class="ui-widget-content"> @@ -32,10 +33,11 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Display only an outline of the element while resizing by setting the <code>helper</code> option to a CSS class.</p> +<div class="demo-description"> +<p>Display only an outline of the element while resizing by setting the <code>helper</code> option to a CSS class.</p> </div><!-- End demo-description --> + </body> </html> diff --git a/demos/resizable/index.html b/demos/resizable/index.html index 93198d03c..45f400621 100644 --- a/demos/resizable/index.html +++ b/demos/resizable/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Resizable Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/resizable/max-min.html b/demos/resizable/max-min.html index a1c9f6f86..83277bbd0 100644 --- a/demos/resizable/max-min.html +++ b/demos/resizable/max-min.html @@ -1,22 +1,22 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Resizable - Maximum / minimum size</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.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 type="text/javascript"> + <script> $(function() { - $("#resizable").resizable({ + $( "#resizable" ).resizable({ maxHeight: 250, maxWidth: 350, minHeight: 150, @@ -26,6 +26,7 @@ </script> </head> <body> + <div class="demo"> <div id="resizable" class="ui-widget-content"> @@ -34,10 +35,11 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Limit the resizable element to a maximum or minimum height or width using the <code>maxHeight</code>, <code>maxWidth</code>, <code>minHeight</code>, and <code>minWidth</code> options.</p> +<div class="demo-description"> +<p>Limit the resizable element to a maximum or minimum height or width using the <code>maxHeight</code>, <code>maxWidth</code>, <code>minHeight</code>, and <code>minWidth</code> options.</p> </div><!-- End demo-description --> + </body> </html> diff --git a/demos/resizable/snap-to-grid.html b/demos/resizable/snap-to-grid.html index 91ebbcd6f..6f9449555 100644 --- a/demos/resizable/snap-to-grid.html +++ b/demos/resizable/snap-to-grid.html @@ -1,28 +1,29 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Resizable - Snap to grid</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.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 type="text/javascript"> + <script> $(function() { - $("#resizable").resizable({ + $( "#resizable" ).resizable({ grid: 50 }); }); </script> </head> <body> + <div class="demo"> <div id="resizable" class="ui-widget-content"> @@ -31,10 +32,11 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Snap the resizable element to a grid. Set the dimensions of grid cells (height and width in pixels) with the <code>grid</code> option.</p> +<div class="demo-description"> +<p>Snap the resizable element to a grid. Set the dimensions of grid cells (height and width in pixels) with the <code>grid</code> option.</p> </div><!-- End demo-description --> + </body> </html> diff --git a/demos/resizable/synchronous-resize.html b/demos/resizable/synchronous-resize.html index 3b3b37241..5a27c825c 100644 --- a/demos/resizable/synchronous-resize.html +++ b/demos/resizable/synchronous-resize.html @@ -1,31 +1,32 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Resizable - Synchronous resize</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.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 type="text/javascript"> + <script> $(function() { - $("#resizable").resizable({ - alsoResize: '#also' + $( "#resizable" ).resizable({ + alsoResize: "#also" }); - $("#also").resizable(); + $( "#also" ).resizable(); }); </script> </head> <body> + <div class="demo"> <div id="resizable" class="ui-widget-header"> @@ -38,10 +39,11 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Resize multiple elements simultaneously by clicking and dragging the sides of one. Pass a shared selector into the <code>alsoResize</code> option.</p> +<div class="demo-description"> +<p>Resize multiple elements simultaneously by clicking and dragging the sides of one. Pass a shared selector into the <code>alsoResize</code> option.</p> </div><!-- End demo-description --> + </body> </html> diff --git a/demos/resizable/textarea.html b/demos/resizable/textarea.html index 2e6e42f9e..b63510d5c 100644 --- a/demos/resizable/textarea.html +++ b/demos/resizable/textarea.html @@ -1,39 +1,41 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Resizable - Textarea</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - .ui-resizable-se { - bottom: 17px; - } + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.resizable.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .ui-resizable-se { + bottom: 17px; + } </style> - <script type="text/javascript"> + <script> $(function() { - $("#resizable").resizable({ + $( "#resizable" ).resizable({ handles: "se" }); }); </script> </head> <body> + <div class="demo"> <textarea id="resizable" rows="5" cols="20"></textarea> </div><!-- End demo --> -<div class="demo-description"> -<p>Display only an outline of the element while resizing by setting the <code>helper</code> option to a CSS class.</p> +<div class="demo-description"> +<p>Display only an outline of the element while resizing by setting the <code>helper</code> option to a CSS class.</p> </div><!-- End demo-description --> + </body> </html> diff --git a/demos/resizable/visual-feedback.html b/demos/resizable/visual-feedback.html index 44178423c..63de8bdf8 100644 --- a/demos/resizable/visual-feedback.html +++ b/demos/resizable/visual-feedback.html @@ -1,29 +1,30 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Resizable - Visual feedback</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.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 type="text/javascript"> + <script> $(function() { - $("#resizable").resizable({ + $( "#resizable" ).resizable({ ghost: true }); }); </script> </head> <body> + <div class="demo"> <div id="resizable" class="ui-widget-content"> @@ -32,10 +33,11 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Instead of showing the actual element during resize, set the <code>ghost</code> option to true to show a semi-transparent part of the element.</p> +<div class="demo-description"> +<p>Instead of showing the actual element during resize, set the <code>ghost</code> option to true to show a semi-transparent part of the element.</p> </div><!-- End demo-description --> + </body> </html> diff --git a/demos/selectable/default.html b/demos/selectable/default.html index f7d6d8693..bd72f651c 100644 --- a/demos/selectable/default.html +++ b/demos/selectable/default.html @@ -1,30 +1,31 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Selectable - Default functionality</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.selectable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.selectable.js"></script> + <link rel="stylesheet" href="../demos.css"> - <style type="text/css"> + <style> #feedback { font-size: 1.4em; } #selectable .ui-selecting { background: #FECA40; } #selectable .ui-selected { background: #F39814; color: white; } #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 type="text/javascript"> + <script> $(function() { - $("#selectable").selectable(); + $( "#selectable" ).selectable(); }); </script> </head> <body> + <div class="demo"> <ol id="selectable"> @@ -39,10 +40,11 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>Enable a DOM element (or group of elements) to be selectable. Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections. </p> +<div class="demo-description"> +<p>Enable a DOM element (or group of elements) to be selectable. Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections. </p> </div><!-- End demo-description --> + </body> </html> diff --git a/demos/selectable/display-grid.html b/demos/selectable/display-grid.html index 654a68d5b..2a9cc984d 100644 --- a/demos/selectable/display-grid.html +++ b/demos/selectable/display-grid.html @@ -1,30 +1,31 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Selectable - Display as grid</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.selectable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.selectable.js"></script> + <link rel="stylesheet" href="../demos.css"> - <style type="text/css"> + <style> #feedback { font-size: 1.4em; } #selectable .ui-selecting { background: #FECA40; } #selectable .ui-selected { background: #F39814; color: white; } #selectable { list-style-type: none; margin: 0; padding: 0; } #selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; } </style> - <script type="text/javascript"> + <script> $(function() { - $("#selectable").selectable(); + $( "#selectable" ).selectable(); }); </script> </head> <body> + <div class="demo"> <ol id="selectable"> @@ -44,10 +45,11 @@ </div><!-- End demo --> -<div class="demo-description"> -<p>To arrange selectable items as a grid, give them identical dimensions and float them using CSS.</p> +<div class="demo-description"> +<p>To arrange selectable items as a grid, give them identical dimensions and float them using CSS.</p> </div><!-- End demo-description --> + </body> </html> diff --git a/demos/selectable/index.html b/demos/selectable/index.html index 19ef9b1fa..21fa4d5a7 100644 --- a/demos/selectable/index.html +++ b/demos/selectable/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Selectable Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/selectable/serialize.html b/demos/selectable/serialize.html index 9744944a5..d10e86f5b 100644 --- a/demos/selectable/serialize.html +++ b/demos/selectable/serialize.html @@ -1,31 +1,31 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Selectable - Serialize</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.selectable.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.mouse.js"></script> + <script src="../../ui/jquery.ui.selectable.js"></script> + <link rel="stylesheet" href="../demos.css"> - <style type="text/css"> + <style> #feedback { font-size: 1.4em; } #selectable .ui-selecting { background: #FECA40; } #selectable .ui-selected { background: #F39814; color: white; } #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 type="text/javascript"> + <script> $(function() { - $("#selectable").selectable({ - stop: function(){ - var result = $("#select-result").empty(); - $(".ui-selected", this).each(function(){ - var index = $("#selectable li").index(this); - result.append(" #" + (index + 1)); + $( "#selectable" ).selectable({ + stop: function() { + var result = $( "#select-result" ).empty(); + $( ".ui-selected", this ).each(function() { + var index = $( "#selectable li" ).index( this ); + result.append( " #" + ( index + 1 ) ); }); } }); @@ -33,6 +33,7 @@ </script> </head> <body> + <div class="demo"> <p id="feedback"> @@ -50,10 +51,11 @@ You've selected: <span id="select-result">none</span>. </div><!-- End demo --> -<div class="demo-description"> -<p>Write a function that fires on the <code>stop</code> event to collect the index values of selected items. Present values as feedback, or pass as a data string.</p> +<div class="demo-description"> +<p>Write a function that fires on the <code>stop</code> event to collect the index values of selected items. Present values as feedback, or pass as a data string.</p> </div><!-- End demo-description --> + </body> </html> diff --git a/demos/show/default.html b/demos/show/default.html index 65cb288e5..dbbd3a9ab 100644 --- a/demos/show/default.html +++ b/demos/show/default.html @@ -1,61 +1,63 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Effects - Show Demo</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.bounce.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.clip.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.drop.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.fold.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.highlight.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.pulsate.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.scale.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.shake.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.slide.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - .toggler { width: 500px; height: 200px; } - #button { padding: .5em 1em; text-decoration: none; } - #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; } - #effect h3 { margin: 0; padding: 0.4em; text-align: center; } + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.effects.core.js"></script> + <script src="../../ui/jquery.effects.blind.js"></script> + <script src="../../ui/jquery.effects.bounce.js"></script> + <script src="../../ui/jquery.effects.clip.js"></script> + <script src="../../ui/jquery.effects.drop.js"></script> + <script src="../../ui/jquery.effects.explode.js"></script> + <script src="../../ui/jquery.effects.fold.js"></script> + <script src="../../ui/jquery.effects.highlight.js"></script> + <script src="../../ui/jquery.effects.pulsate.js"></script> + <script src="../../ui/jquery.effects.scale.js"></script> + <script src="../../ui/jquery.effects.shake.js"></script> + <script src="../../ui/jquery.effects.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: 135px; padding: 0.4em; position: relative; } + #effect h3 { margin: 0; padding: 0.4em; text-align: center; } </style> - <script type="text/javascript"> + <script> $(function() { + // run the currently selected effect + function runEffect() { + // get effect type from + var selectedEffect = $( "#effectTypes" ).val(); - //run the currently selected effect - function runEffect(){ - //get effect type from - var selectedEffect = $('#effectTypes').val(); - - //most effect types need no options passed by default + // most effect types need no options passed by default var options = {}; - //check if it's scale or size - they need options explicitly set - if(selectedEffect == 'scale'){ options = {percent: 100}; } - else if(selectedEffect == 'size'){ options = { to: {width: 280,height: 185} }; } - - //run the effect - $("#effect").show(selectedEffect,options,500,callback); + // some effects have required parameters + if ( selectedEffect === "scale" ) { + options = { percent: 100 }; + } else if ( selectedEffect === "size" ) { + options = { to: { width: 280, height: 185 } }; + } + + // run the effect + $( "#effect" ).show( selectedEffect, options, 500, callback ); }; - + //callback function to bring a hidden box back - function callback(){ - setTimeout(function(){ - $("#effect:visible").removeAttr('style').hide().fadeOut(); - }, 1000); + function callback() { + setTimeout(function() { + $( "#effect:visible" ).removeAttr( "style" ).fadeOut(); + }, 1000 ); }; - - //set effect from select menu value - $("#button").click(function() { + + // set effect from select menu value + $( "#button" ).click(function() { runEffect(); return false; }); - - $("#effect").hide(); + + $( "#effect" ).hide(); }); </script> </head> @@ -90,13 +92,12 @@ <a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a> - </div><!-- End demo --> -<div class="demo-description"> -<p>Click the button above to preview the effect.</p> +<div class="demo-description"> +<p>Click the button above to preview the effect.</p> </div><!-- End demo-description --> </body> diff --git a/demos/show/index.html b/demos/show/index.html index 0e9af371f..f5bd6a0e4 100644 --- a/demos/show/index.html +++ b/demos/show/index.html @@ -1,9 +1,9 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Effects Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/external/qunit.css b/external/qunit.css index 214b9b04e..a4daa27e4 100644 --- a/external/qunit.css +++ b/external/qunit.css @@ -31,6 +31,11 @@ -webkit-border-top-left-radius: 15px; } +#qunit-header a { + text-decoration: none; + color: white; +} + #qunit-banner { height: 5px; } diff --git a/external/qunit.js b/external/qunit.js index 9399a608f..45ad1dcf8 100644 --- a/external/qunit.js +++ b/external/qunit.js @@ -218,15 +218,7 @@ var QUnit = { } }); - if ( window.setTimeout && !config.doneTimer ) { - config.doneTimer = window.setTimeout(function(){ - if ( !config.queue.length ) { - done(); - } else { - synchronize( done ); - } - }, 13); - } + synchronize( done ); }, /** @@ -505,6 +497,10 @@ addEvent(window, "load", function() { if ( userAgent ) { userAgent.innerHTML = navigator.userAgent; } + var banner = id("qunit-header"); + if ( banner ) { + banner.innerHTML = '<a href="' + location.href + '">' + banner.innerHTML + '</a>'; + } var toolbar = id("qunit-testrunner-toolbar"); if ( toolbar ) { diff --git a/tests/unit/accordion/accordion.html b/tests/unit/accordion/accordion.html index c53db8c75..82098fa06 100644 --- a/tests/unit/accordion/accordion.html +++ b/tests/unit/accordion/accordion.html @@ -46,6 +46,7 @@ <script type="text/javascript" src="accordion_options.js"></script> <script type="text/javascript" src="accordion_tickets.js"></script> + <script type="text/javascript" src="../swarminject.js"></script> <style> #main { font-size: 10pt; font-family: 'trebuchet ms', verdana, arial; } #list, #list1 *, #navigation, #navigation * { margin: 0; padding: 0; font-size: 12px; } diff --git a/tests/unit/accordion/accordion_methods.js b/tests/unit/accordion/accordion_methods.js index 73faff27c..96688b59e 100644 --- a/tests/unit/accordion/accordion_methods.js +++ b/tests/unit/accordion/accordion_methods.js @@ -18,9 +18,6 @@ test("init", function() { $('<div></div>').appendTo('body').remove().accordion().remove(); ok(true, '.accordion() called on disconnected DOMElement - removed'); - $('<div></div>').accordion().accordion("foo").remove(); - ok(true, 'arbitrary method called after init'); - var el = $('<div></div>').accordion(); var foo = el.accordion("option", "foo"); el.remove(); diff --git a/tests/unit/autocomplete/autocomplete.html b/tests/unit/autocomplete/autocomplete.html index 943708694..ae4580721 100644 --- a/tests/unit/autocomplete/autocomplete.html +++ b/tests/unit/autocomplete/autocomplete.html @@ -25,6 +25,7 @@ <script type="text/javascript" src="autocomplete_options.js"></script> <script type="text/javascript" src="autocomplete_tickets.js"></script> + <script type="text/javascript" src="../swarminject.js"></script> </head> <body id="body"> diff --git a/tests/unit/autocomplete/autocomplete_core.js b/tests/unit/autocomplete/autocomplete_core.js index 9b8709abb..fcd835d1a 100644 --- a/tests/unit/autocomplete/autocomplete_core.js +++ b/tests/unit/autocomplete/autocomplete_core.js @@ -23,7 +23,7 @@ test("close-on-blur is properly delayed", function() { same( $(".ui-menu:visible").length, 0 ); start(); }, 200); -}) +}); test("close-on-blur is cancelled when starting a search", function() { var ac = $("#autocomplete").autocomplete({ @@ -38,6 +38,35 @@ test("close-on-blur is cancelled when starting a search", function() { same( $(".ui-menu:visible").length, 1 ); start(); }, 200); -}) +}); + +test( "prevent form submit on enter when menu is active", function() { + var event; + var ac = $( "#autocomplete" ).autocomplete({ + source: [ "java", "javascript" ] + }).val( "ja" ).autocomplete( "search" ); + + event = $.Event( "keydown" ); + event.keyCode = $.ui.keyCode.DOWN; + ac.trigger( event ); + same( $( ".ui-menu-item:has(.ui-state-hover)" ).length, 1, "menu item is active" ); + + event = $.Event( "keydown" ); + event.keyCode = $.ui.keyCode.ENTER; + ac.trigger( event ); + ok( event.isDefaultPrevented(), "default action is prevented" ); +}); + +test( "allow form submit on enter when menu is not active", function() { + var event; + var ac = $( "#autocomplete" ).autocomplete({ + source: [ "java", "javascript" ] + }).val( "ja" ).autocomplete( "search" ); + + event = $.Event( "keydown" ); + event.keyCode = $.ui.keyCode.ENTER; + ac.trigger( event ); + ok( !event.isDefaultPrevented(), "default action is prevented" ); +}); })(jQuery); diff --git a/tests/unit/button/button.html b/tests/unit/button/button.html index 7c6d05977..0700eb804 100644 --- a/tests/unit/button/button.html +++ b/tests/unit/button/button.html @@ -23,6 +23,7 @@ <script type="text/javascript" src="button_options.js"></script> <script type="text/javascript" src="button_tickets.js"></script> + <script type="text/javascript" src="../swarminject.js"></script> </head> <body> diff --git a/tests/unit/button/button_defaults.js b/tests/unit/button/button_defaults.js index e1657854a..b81fa7cbb 100644 --- a/tests/unit/button/button_defaults.js +++ b/tests/unit/button/button_defaults.js @@ -3,7 +3,7 @@ */ var button_defaults = { - disabled: false, + disabled: null, text: true, label: null, icons: { diff --git a/tests/unit/button/button_options.js b/tests/unit/button/button_options.js index 6ee8ab541..5b25ecd63 100644 --- a/tests/unit/button/button_options.js +++ b/tests/unit/button/button_options.js @@ -5,6 +5,30 @@ module("button: options"); +test("disabled, explicity value", function() { + $("#radio01").button({ disabled: false }); + same(false, $("#radio01").button("option", "disabled"), + "disabled option set to false"); + same(false, $("#radio01").attr("disabled"), "element is disabled"); + + $("#radio02").button({ disabled: true }); + same(true, $("#radio02").button("option", "disabled"), + "disabled option set to true"); + same(true, $("#radio02").attr("disabled"), "element is not disabled"); +}); + +test("disabled, null", function() { + $("#radio01").button({ disabled: null }); + same(false, $("#radio01").button("option", "disabled"), + "disabled option set to false"); + same(false, $("#radio01").attr("disabled"), "element is disabled"); + + $("#radio02").attr("disabled", "disabled").button({ disabled: null }); + same(true, $("#radio02").button("option", "disabled"), + "disabled option set to true"); + same(true, $("#radio02").attr("disabled"), "element is not disabled"); +}); + test("text false without icon", function() { $("#button").button({ text: false diff --git a/tests/unit/button/button_tickets.js b/tests/unit/button/button_tickets.js index 7f972513d..46002bdea 100644 --- a/tests/unit/button/button_tickets.js +++ b/tests/unit/button/button_tickets.js @@ -5,6 +5,11 @@ module("button: tickets"); - +test("#5946 - buttonset should ignore buttons that are not :visible", function() { + $( "#radio01" ).next().wrap( "<div></div>" ).parent().hide(); + var set = $( "#radio0" ).buttonset(); + ok( set.find( "label:eq(0)" ).is( ".ui-button:not(.ui-corner-left)" ) ); + ok( set.find( "label:eq(1)" ).is( ".ui-button.ui-corner-left" ) ); +}); })(jQuery); diff --git a/tests/unit/core/core.html b/tests/unit/core/core.html index 4f9e13bde..5d6745cff 100644 --- a/tests/unit/core/core.html +++ b/tests/unit/core/core.html @@ -11,21 +11,12 @@ <link rel="stylesheet" href="../../../external/qunit.css" type="text/css"/> <script type="text/javascript" src="../../../external/qunit.js"></script> <script type="text/javascript" src="../../jquery.simulate.js"></script> + <script type="text/javascript" src="../testsuite.js"></script> <script type="text/javascript" src="core.js"></script> <script type="text/javascript" src="selector.js"></script> - <script type="text/javascript"> - // disable this stale testsuite for testswarm only - var url = window.location.search; - url = decodeURIComponent( url.slice( url.indexOf("swarmURL=") + 9 ) ); - if ( url && url.indexOf("http") == 0 ) { - // reset config to kill previous tests; make sure testsuite.js is loaded afterwards to init the testswarm script - QUnit.init(); - test("core", function() { ok(true, "disabled core testsuite"); }); - } - </script> - <script type="text/javascript" src="../testsuite.js"></script> + <script type="text/javascript" src="../swarminject.js"></script> <style type="text/css"> .zindex {z-index: 100} @@ -65,7 +56,7 @@ <option>option</option> </select> <textarea id="visibleAncestor-textarea">x</textarea> - <object id="visibleAncestor-object">xxx</object> + <object id="visibleAncestor-object" codebase="about:blank">xxx</object> <a href="#" id="visibleAncestor-anchorWithHref">anchor</a> <a id="visibleAncestor-anchorWithoutHref">anchor</a> <span id="visibleAncestor-span">x</span> @@ -97,11 +88,11 @@ <span tabindex="1" id="visibilityHiddenAncestor-span">.</span> </div> - <input id="displayNone-input" style="display: none;" /> - <input id="visibilityHidden-input" style="visibility: hidden;" /> - <span tabindex="1" id="displayNone-span" style="display: none;">.</span> <span tabindex="1" id="visibilityHidden-span" style="visibility: hidden;">.</span> + + <input id="displayNone-input" style="display: none;" /> + <input id="visibilityHidden-input" style="visibility: hidden;" /> </div> <div> diff --git a/tests/unit/core/core.js b/tests/unit/core/core.js index cb2a14570..03a7ab810 100644 --- a/tests/unit/core/core.js +++ b/tests/unit/core/core.js @@ -5,27 +5,27 @@ module('core - jQuery extensions'); -test('focus', function() { - expect(3); +test('focus - original functionality', function() { + expect(1); - var el = $('#inputTabindex0'), - // used to remove focus from the main element - other = $('#inputTabindex10'); - - // test original functionality - el.focus(function() { - ok(true, 'event triggered'); - }); - el.focus(); - other.focus(); - - // trigger event handler + callback - stop(); - el.focus(500, function() { - ok(true, 'callback triggered'); - start(); - }); - other.focus(); + $('#inputTabindex0') + .focus(function() { + ok(true, 'event triggered'); + }) + .focus(); +}); + +asyncTest('focus', function() { + expect(2); + $('#inputTabindex0') + .focus(function() { + ok(true, 'event triggered'); + }) + .focus(500, function() { + ok(true, 'callback triggered'); + $(this).unbind('focus'); + start(); + }); }); test('zIndex', function() { diff --git a/tests/unit/datepicker/datepicker.html b/tests/unit/datepicker/datepicker.html index 9354e7b99..16ebffb54 100644 --- a/tests/unit/datepicker/datepicker.html +++ b/tests/unit/datepicker/datepicker.html @@ -16,6 +16,7 @@ <link rel="stylesheet" href="../../../external/qunit.css" type="text/css"/> <script type="text/javascript" src="../../../external/qunit.js"></script> <script type="text/javascript" src="../../jquery.simulate.js"></script> + <script type="text/javascript" src="../testsuite.js"></script> <script type="text/javascript" src="datepicker_core.js"></script> <script type="text/javascript" src="datepicker_defaults.js"></script> @@ -34,7 +35,7 @@ test("datepicker", function() { ok(true, "disabled datepicker testsuite"); }); } </script> - <script type="text/javascript" src="../testsuite.js"></script> + <script type="text/javascript" src="../swarminject.js"></script> </head> <body> diff --git a/tests/unit/dialog/dialog.html b/tests/unit/dialog/dialog.html index d8260cc9f..f2e47b978 100644 --- a/tests/unit/dialog/dialog.html +++ b/tests/unit/dialog/dialog.html @@ -28,17 +28,7 @@ <script type="text/javascript" src="dialog_options.js"></script> <script type="text/javascript" src="dialog_tickets.js"></script> - <script type="text/javascript"> - // disable this stale testsuite for testswarm only - var url = window.location.search; - url = decodeURIComponent( url.slice( url.indexOf("swarmURL=") + 9 ) ); - if ( url && url.indexOf("http") == 0 ) { - // reset config to kill previous tests; make sure testsuite.js is loaded afterwards to init the testswarm script - QUnit.init(); - test("dialog", function() { ok(true, "disabled dialog testsuite"); }); - } - </script> - <script type="text/javascript" src="../testsuite.js"></script> + <script type="text/javascript" src="../swarminject.js"></script> </head> <body> diff --git a/tests/unit/dialog/dialog_core.js b/tests/unit/dialog/dialog_core.js index 4618417f0..aec3e22be 100644 --- a/tests/unit/dialog/dialog_core.js +++ b/tests/unit/dialog/dialog_core.js @@ -88,23 +88,6 @@ function margin(el, side) { module("dialog: core"); -test("element types", function() { - var typeNames = ('p,h1,h2,h3,h4,h5,h6,blockquote,ol,ul,dl,div,form' - + ',table,fieldset,address,ins,del,em,strong,q,cite,dfn,abbr' - + ',acronym,code,samp,kbd,var,img,object,hr' - + ',input,button,label,select,iframe').split(','); - - $.each(typeNames, function(i) { - var typeName = typeNames[i]; - el = $(document.createElement(typeName)).appendTo('body'); - (typeName == 'table' && el.append("<tr><td>content</td></tr>")); - el.dialog(); - ok(true, '$("<' + typeName + '/>").dialog()'); - el.dialog("destroy"); - el.remove(); - }); -}); - test("title id", function() { expect(3); diff --git a/tests/unit/dialog/dialog_events.js b/tests/unit/dialog/dialog_events.js index e2b7bd9ee..8c7657dfd 100644 --- a/tests/unit/dialog/dialog_events.js +++ b/tests/unit/dialog/dialog_events.js @@ -6,11 +6,12 @@ module("dialog: events"); test("open", function() { - expect(11); + expect(13); el = $("<div></div>"); el.dialog({ open: function(ev, ui) { + ok(el.data("dialog")._isOpen, "interal _isOpen flag is set"); ok(true, 'autoOpen: true fires open callback'); equals(this, el[0], "context of callback"); equals(ev.type, 'dialogopen', 'event type in callback'); @@ -29,6 +30,7 @@ test("open", function() { same(ui, {}, 'ui hash in callback'); } }).bind('dialogopen', function(ev, ui) { + ok(el.data("dialog")._isOpen, "interal _isOpen flag is set"); ok(true, 'dialog("open") fires open event'); equals(this, el[0], 'context of event'); same(ui, {}, 'ui hash in event'); diff --git a/tests/unit/dialog/dialog_methods.js b/tests/unit/dialog/dialog_methods.js index 93d1b25db..a961b4e03 100644 --- a/tests/unit/dialog/dialog_methods.js +++ b/tests/unit/dialog/dialog_methods.js @@ -10,7 +10,7 @@ module("dialog: methods", { }); test("init", function() { - expect(7); + expect(6); $("<div></div>").appendTo('body').dialog().remove(); ok(true, '.dialog() called on element'); @@ -24,9 +24,6 @@ test("init", function() { $('<div></div>').appendTo('body').remove().dialog().remove(); ok(true, '.dialog() called on disconnected DOMElement - removed'); - $('<div></div>').dialog().dialog("foo").remove(); - ok(true, 'arbitrary method called after init'); - el = $('<div></div>').dialog(); var foo = el.dialog("option", "foo"); el.remove(); @@ -46,9 +43,6 @@ test("destroy", function() { $('<div></div>').dialog().dialog("destroy").remove(); ok(true, '.dialog("destroy") called on disconnected DOMElement'); - $('<div></div>').dialog().dialog("destroy").dialog("foo").remove(); - ok(true, 'arbitrary method called after destroy'); - var expected = $('<div></div>').dialog(), actual = expected.dialog('destroy'); equals(actual, expected, 'destroy is chainable'); diff --git a/tests/unit/dialog/dialog_options.js b/tests/unit/dialog/dialog_options.js index fb6a28e12..ac457d9b2 100644 --- a/tests/unit/dialog/dialog_options.js +++ b/tests/unit/dialog/dialog_options.js @@ -71,6 +71,31 @@ test("buttons", function() { el.remove(); }); +test("buttons - advanced", function() { + expect(5); + + el = $("<div></div>").dialog({ + buttons: [ + { + text: "a button", + "class": "additional-class", + id: "my-button-id", + click: function() { + equals(this, el[0], "correct context"); + } + } + ] + }); + var buttons = dlg().find("button"); + equals(buttons.length, 1, "correct number of buttons"); + equals(buttons.attr("id"), "my-button-id", "correct id"); + equals(buttons.text(), "a button", "correct label"); + ok(buttons.hasClass("additional-class"), "additional classes added"); + buttons.click(); + + el.remove(); +}); + test("closeOnEscape", function() { el = $('<div></div>').dialog({ closeOnEscape: false }); ok(true, 'closeOnEscape: false'); @@ -150,51 +175,51 @@ test("height", function() { equals(dlg().height(), dialog_defaults.minHeight, "default height"); el.remove(); - el = $('<div></div>').dialog({ height: 437 }); - equals(dlg().height(), 437, "explicit height"); + el = $('<div></div>').dialog({ height: 237 }); + equals(dlg().height(), 237, "explicit height"); el.remove(); el = $('<div></div>').dialog(); - el.dialog('option', 'height', 438); - equals(dlg().height(), 438, "explicit height set after init"); + el.dialog('option', 'height', 238); + equals(dlg().height(), 238, "explicit height set after init"); el.remove(); }); test("maxHeight", function() { expect(3); - el = $('<div></div>').dialog({ maxHeight: 400 }); + el = $('<div></div>').dialog({ maxHeight: 200 }); drag('.ui-resizable-s', 1000, 1000); - equals(heightAfter, 400, "maxHeight"); + equals(heightAfter, 200, "maxHeight"); el.remove(); - el = $('<div></div>').dialog({ maxHeight: 400 }); + el = $('<div></div>').dialog({ maxHeight: 200 }); drag('.ui-resizable-n', -1000, -1000); - equals(heightAfter, 400, "maxHeight"); + equals(heightAfter, 200, "maxHeight"); el.remove(); - el = $('<div></div>').dialog({ maxHeight: 400 }).dialog('option', 'maxHeight', 600); - drag('.ui-resizable-n', -1000, -1000); - equals(heightAfter, 600, "maxHeight"); + el = $('<div></div>').dialog({ maxHeight: 200 }).dialog('option', 'maxHeight', 300); + drag('.ui-resizable-s', 1000, 1000); + equals(heightAfter, 300, "maxHeight"); el.remove(); }); test("maxWidth", function() { expect(3); - el = $('<div></div>').dialog({ maxWidth: 400 }); + el = $('<div></div>').dialog({ maxWidth: 200 }); drag('.ui-resizable-e', 1000, 1000); - equals(widthAfter, 400, "maxWidth"); + equals(widthAfter, 200, "maxWidth"); el.remove(); - el = $('<div></div>').dialog({ maxWidth: 400 }); + el = $('<div></div>').dialog({ maxWidth: 200 }); drag('.ui-resizable-w', -1000, -1000); - equals(widthAfter, 400, "maxWidth"); + equals(widthAfter, 200, "maxWidth"); el.remove(); - el = $('<div></div>').dialog({ maxWidth: 400 }).dialog('option', 'maxWidth', 600); + el = $('<div></div>').dialog({ maxWidth: 200 }).dialog('option', 'maxWidth', 300); drag('.ui-resizable-w', -1000, -1000); - equals(widthAfter, 600, "maxWidth"); + equals(widthAfter, 300, "maxWidth"); el.remove(); }); @@ -236,10 +261,6 @@ test("minWidth", function() { el.remove(); }); -test("modal", function() { - ok(false, 'missing test - untested code is broken code'); -}); - test("position, default center on window", function() { var el = $('<div></div>').dialog(); var dialog = el.dialog('widget'); @@ -364,31 +385,33 @@ test("resizable", function() { el.remove(); }); -test("stack", function() { - ok(false, 'missing test - untested code is broken code'); -}); - test("title", function() { - expect(5); + expect(9); function titleText() { return dlg().find(".ui-dialog-title").html(); } el = $('<div></div>').dialog(); - equals(titleText(), " ", "[default]"); + // some browsers return a non-breaking space and some return " " + // so we get the text to normalize to the actual non-breaking space + equals(dlg().find(".ui-dialog-title").text(), " ", "[default]"); + equals(el.dialog("option", "title"), "", "option not changed"); el.remove(); el = $('<div title="foo"/>').dialog(); equals(titleText(), "foo", "title in element attribute"); + equals(el.dialog("option", "title"), "foo", "option updated from attribute"); el.remove(); el = $('<div></div>').dialog({ title: 'foo' }); equals(titleText(), "foo", "title in init options"); + equals(el.dialog("option", "title"), "foo", "opiton set from options hash"); el.remove(); el = $('<div title="foo"/>').dialog({ title: 'bar' }); equals(titleText(), "bar", "title in init options should override title in element attribute"); + equals(el.dialog("option", "title"), "bar", "opiton set from options hash"); el.remove(); el = $('<div></div>').dialog().dialog('option', 'title', 'foo'); diff --git a/tests/unit/draggable/draggable.html b/tests/unit/draggable/draggable.html index 2be472a50..4e3a43da2 100644 --- a/tests/unit/draggable/draggable.html +++ b/tests/unit/draggable/draggable.html @@ -13,6 +13,7 @@ <link rel="stylesheet" href="../../../external/qunit.css" type="text/css"/> <script type="text/javascript" src="../../../external/qunit.js"></script> <script type="text/javascript" src="../../jquery.simulate.js"></script> + <script type="text/javascript" src="../testsuite.js"></script> <script type="text/javascript" src="draggable_core.js"></script> <script type="text/javascript" src="draggable_defaults.js"></script> @@ -31,7 +32,7 @@ test("draggable", function() { ok(true, "disabled draggable testsuite"); }); } </script> - <script type="text/javascript" src="../testsuite.js"></script> + <script type="text/javascript" src="../swarminject.js"></script> </head> <body> diff --git a/tests/unit/droppable/droppable.html b/tests/unit/droppable/droppable.html index c15992bcd..0b962b1cf 100644 --- a/tests/unit/droppable/droppable.html +++ b/tests/unit/droppable/droppable.html @@ -14,6 +14,7 @@ <link rel="stylesheet" href="../../../external/qunit.css" type="text/css"/> <script type="text/javascript" src="../../../external/qunit.js"></script> <script type="text/javascript" src="../../jquery.simulate.js"></script> + <script type="text/javascript" src="../testsuite.js"></script> <script type="text/javascript" src="droppable_core.js"></script> <script type="text/javascript" src="droppable_defaults.js"></script> @@ -32,7 +33,7 @@ test("droppable", function() { ok(true, "disabled droppable testsuite"); }); } </script> - <script type="text/javascript" src="../testsuite.js"></script> + <script type="text/javascript" src="../swarminject.js"></script> </head> <body> diff --git a/tests/unit/position/position.html b/tests/unit/position/position.html index ca5f2585d..52569289a 100644 --- a/tests/unit/position/position.html +++ b/tests/unit/position/position.html @@ -13,6 +13,8 @@ <script type="text/javascript" src="../testsuite.js"></script> <script type="text/javascript" src="position_core.js"></script> + + <script type="text/javascript" src="../swarminject.js"></script> </head> <body> @@ -22,21 +24,26 @@ <ol id="qunit-tests"> </ol> +<!-- +elements smaller than 10px have a line-height set on them to avoid a bug in IE6 +.height() returns the greater of the height and line-height +--> + <div id="main" style="position: absolute; top: 0; left: 0;"> - <div id="el1" style="position: absolute; width: 6px; height: 6px;"></div> - <div id="el2" style="position: absolute; width: 6px; height: 6px;"></div> - <div id="parent" style="position: absolute; width: 6px; height: 6px; top: 4px; left: 4px;"></div> + <div id="el1" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div> + <div id="el2" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div> + <div id="parent" style="position: absolute; width: 6px; height: 6px; top: 4px; left: 4px; line-height: 6px;"></div> </div> <div style="position: absolute; top: 0px; left: 0px"> - <div id="elx" style="position: absolute; width: 10px; height: 10px;"></div> + <div id="elx" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div> <div id="parentx" style="position: absolute; width: 20px; height: 20px; top: 40px; left: 40px;"></div> </div> <div style="position: absolute; top: 200px; left: 100px;"> - <div id="el-offset-100-200" style="position: absolute; width: 10px; height: 10px;"></div> + <div id="el-offset-100-200" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div> <div style="position: absolute; top: 100px; left: 50px;"> - <div id="el-two-offset-150-300" style="position: absolute; width: 10px; height: 10px;"></div> + <div id="el-two-offset-150-300" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div> <div id="el-fixed" style="position: fixed; top: 200px; left: 200px;"></div> </div> </div> diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js index 3976e43ab..f4075ccfe 100644 --- a/tests/unit/position/position_core.js +++ b/tests/unit/position/position_core.js @@ -131,6 +131,17 @@ test('of', function() { $('#elx').position({ my: 'right bottom', at: 'right bottom', + of: $(document), + collision: 'none' + }); + same($('#elx').offset(), { + top: $(document).height() - 10, + left: $(document).width() - 10 + }, 'document'); + + $('#elx').position({ + my: 'right bottom', + at: 'right bottom', of: window, collision: 'none' }); @@ -139,6 +150,17 @@ test('of', function() { left: $(window).width() - 10 }, 'window'); + $('#elx').position({ + my: 'right bottom', + at: 'right bottom', + of: $(window), + collision: 'none' + }); + same($('#elx').offset(), { + top: $(window).height() - 10, + left: $(window).width() - 10 + }, 'window'); + $(window).scrollTop(500).scrollLeft(200); $('#elx').position({ my: 'right bottom', @@ -332,6 +354,58 @@ test("collision: none, with offset", function() { }, { top: -13, left: -12 }, "left top, negative offset"); }); +test("collision: fit, with margin", function() { + $("#elx").css("margin", 10); + + collisionTest({ + collision: "fit" + }, { top: $(window).height() - 20, left: $(window).width() - 20 }, "right bottom"); + + collisionTest2({ + collision: "fit" + }, { top: 10, left: 10 }, "left top"); + + $("#elx").css({ + "margin-left": 5, + "margin-top": 5 + }); + + collisionTest({ + collision: "fit" + }, { top: $(window).height() - 20, left: $(window).width() - 20 }, "right bottom"); + + collisionTest2({ + collision: "fit" + }, { top: 5, left: 5 }, "left top"); + + $("#elx").css({ + "margin-right": 15, + "margin-bottom": 15 + }); + + collisionTest({ + collision: "fit" + }, { top: $(window).height() - 25, left: $(window).width() - 25 }, "right bottom"); + + collisionTest2({ + collision: "fit" + }, { top: 5, left: 5 }, "left top"); +}); + +test("collision: flip, with margin", function() { + $("#elx").css("margin", 10); + + collisionTest({ + collision: "flip", + at: "left top" + }, { top: $(window).height() - 10, left: $(window).width() - 10 }, "left top"); + + collisionTest2({ + collision: "flip", + at: "right bottom" + }, { top: 0, left: 0 }, "right bottom"); +}); + //test('bug #5280: consistent results (avoid fractional values)', function() { // var wrapper = $('#bug-5280'), // elem = wrapper.children(), diff --git a/tests/unit/progressbar/progressbar.html b/tests/unit/progressbar/progressbar.html index 924413505..4e9bed907 100644 --- a/tests/unit/progressbar/progressbar.html +++ b/tests/unit/progressbar/progressbar.html @@ -22,6 +22,8 @@ <script type="text/javascript" src="progressbar_methods.js"></script> <script type="text/javascript" src="progressbar_options.js"></script> <script type="text/javascript" src="progressbar_tickets.js"></script> + + <script type="text/javascript" src="../swarminject.js"></script> </head> <body> diff --git a/tests/unit/progressbar/progressbar_events.js b/tests/unit/progressbar/progressbar_events.js index b273cd5e9..22b301abe 100644 --- a/tests/unit/progressbar/progressbar_events.js +++ b/tests/unit/progressbar/progressbar_events.js @@ -14,4 +14,25 @@ test("change", function() { }).progressbar("value", 5); }); +test( "complete", function() { + expect( 3 ); + var changes = 0, + value; + + $( "#progressbar" ).progressbar({ + change: function() { + changes++; + same( $( this ).progressbar( "value" ), value, "change at " + value ); + }, + complete: function() { + equal( changes, 2, "complete triggered after change" ); + } + }); + + value = 5; + $( "#progressbar" ).progressbar( "value", value ); + value = 100; + $( "#progressbar" ).progressbar( "value", value ); +}); + })(jQuery); diff --git a/tests/unit/resizable/resizable.html b/tests/unit/resizable/resizable.html index 0f4f91aae..8081d8435 100644 --- a/tests/unit/resizable/resizable.html +++ b/tests/unit/resizable/resizable.html @@ -15,6 +15,7 @@ <link rel="stylesheet" href="../../../external/qunit.css" type="text/css"/> <script type="text/javascript" src="../../../external/qunit.js"></script> <script type="text/javascript" src="../../jquery.simulate.js"></script> + <script type="text/javascript" src="../testsuite.js"></script> <script type="text/javascript" src="resizable_core.js"></script> <script type="text/javascript" src="resizable_defaults.js"></script> @@ -33,7 +34,7 @@ test("resizable", function() { ok(true, "disabled resizable testsuite"); }); } </script> - <script type="text/javascript" src="../testsuite.js"></script> + <script type="text/javascript" src="../swarminject.js"></script> </head> <body> diff --git a/tests/unit/selectable/selectable.html b/tests/unit/selectable/selectable.html index 278d4dde3..cdb79dbcb 100644 --- a/tests/unit/selectable/selectable.html +++ b/tests/unit/selectable/selectable.html @@ -13,6 +13,7 @@ <link rel="stylesheet" href="../../../external/qunit.css" type="text/css"/> <script type="text/javascript" src="../../../external/qunit.js"></script> <script type="text/javascript" src="../../jquery.simulate.js"></script> + <script type="text/javascript" src="../testsuite.js"></script> <script type="text/javascript" src="selectable_core.js"></script> <script type="text/javascript" src="selectable_defaults.js"></script> @@ -31,7 +32,7 @@ test("selectable", function() { ok(true, "disabled selectable testsuite"); }); } </script> - <script type="text/javascript" src="../testsuite.js"></script> + <script type="text/javascript" src="../swarminject.js"></script> </head> <body> diff --git a/tests/unit/slider/slider.html b/tests/unit/slider/slider.html index 1ba5f76af..3df07c517 100644 --- a/tests/unit/slider/slider.html +++ b/tests/unit/slider/slider.html @@ -15,6 +15,7 @@ <link rel="stylesheet" href="../../../external/qunit.css" type="text/css"/> <script type="text/javascript" src="../../../external/qunit.js"></script> <script type="text/javascript" src="../../jquery.simulate.js"></script> + <script type="text/javascript" src="../testsuite.js"></script> <script type="text/javascript" src="slider_core.js"></script> <script type="text/javascript" src="slider_defaults.js"></script> @@ -33,7 +34,7 @@ test("slider", function() { ok(true, "disabled slider testsuite"); }); } </script> - <script type="text/javascript" src="../testsuite.js"></script> + <script type="text/javascript" src="../swarminject.js"></script> </head> <body> diff --git a/tests/unit/slider/slider_methods.js b/tests/unit/slider/slider_methods.js index 567c5de2e..77ae65148 100644 --- a/tests/unit/slider/slider_methods.js +++ b/tests/unit/slider/slider_methods.js @@ -6,7 +6,7 @@ module("slider: methods"); test("init", function() { - expect(6); + expect(5); $("<div></div>").appendTo('body').slider().remove(); ok(true, '.slider() called on element'); @@ -17,9 +17,6 @@ test("init", function() { $('<div></div>').slider().remove(); ok(true, '.slider() called on disconnected DOMElement'); - $('<div></div>').slider().slider("foo").remove(); - ok(true, 'arbitrary method called after init'); - var el = $('<div></div>').slider(); var foo = el.slider("option", "foo"); el.remove(); @@ -39,9 +36,6 @@ test("destroy", function() { $('<div></div>').appendTo('body').remove().slider().slider("destroy").remove(); ok(true, '.slider("destroy") called on disconnected DOMElement'); - $('<div></div>').slider().slider("destroy").slider("foo").remove(); - ok(true, 'arbitrary method called after destroy'); - var expected = $('<div></div>').slider(), actual = expected.slider('destroy'); equals(actual, expected, 'destroy is chainable'); diff --git a/tests/unit/sortable/sortable.html b/tests/unit/sortable/sortable.html index ad5cdca6d..071737ab0 100644 --- a/tests/unit/sortable/sortable.html +++ b/tests/unit/sortable/sortable.html @@ -13,6 +13,7 @@ <link rel="stylesheet" href="../../../external/qunit.css" type="text/css"/> <script type="text/javascript" src="../../../external/qunit.js"></script> <script type="text/javascript" src="../../jquery.simulate.js"></script> + <script type="text/javascript" src="../testsuite.js"></script> <script type="text/javascript" src="sortable_core.js"></script> <script type="text/javascript" src="sortable_defaults.js"></script> @@ -31,7 +32,7 @@ test("sortable", function() { ok(true, "disabled sortable testsuite"); }); } </script> - <script type="text/javascript" src="../testsuite.js"></script> + <script type="text/javascript" src="../swarminject.js"></script> </head> <body> diff --git a/tests/unit/swarminject.js b/tests/unit/swarminject.js new file mode 100644 index 000000000..db69326ab --- /dev/null +++ b/tests/unit/swarminject.js @@ -0,0 +1,9 @@ +// load testswarm agent +(function() { + var url = window.location.search; + url = decodeURIComponent( url.slice( url.indexOf("swarmURL=") + 9 ) ); + if ( !url || url.indexOf("http") !== 0 ) { + return; + } + document.write("<scr" + "ipt src='http://swarm.jquery.org/js/inject.js?" + (new Date).getTime() + "'></scr" + "ipt>"); +})(); diff --git a/tests/unit/tabs/tabs.html b/tests/unit/tabs/tabs.html index 211237569..aa79ddabb 100644 --- a/tests/unit/tabs/tabs.html +++ b/tests/unit/tabs/tabs.html @@ -34,7 +34,7 @@ test("tabs", function() { ok(true, "disabled tabs testsuite"); }); } </script> - <script type="text/javascript" src="../testsuite.js"></script> + <script type="text/javascript" src="../swarminject.js"></script> </head> <body> @@ -61,6 +61,7 @@ <li><a href="#colon:test"><span>1</span></a></li> <li><a href="#inline-style"><span>2</span></a></li> <li><a href="data/test.html#test"><span>3</span></a></li> + <li><a href="data/test.html" title="∫ßáö Սե"<span>4</span></a></li> </ul> <div id="colon:test"></div> <div style="height: 300px;" id="inline-style"></div> @@ -93,6 +94,19 @@ <ul id="tabs5-list"></ul> </div> </div> + <div id="tabs6"> + <ul id="tabs6-list"> + <li><a href="#tabs6-1">1</a> + <ul> + <li><a href="#item6-3">3</a></li> + <li><a href="#item6-4">4</a></li> + </ul> + </li> + <li><a href="#tabs6-2">2</a></li> + </ul> + <div id="tabs6-1"></div> + <div id="tabs6-2"></div> + </div> </div> </body> </html> diff --git a/tests/unit/tabs/tabs_tickets.js b/tests/unit/tabs/tabs_tickets.js index 4d51e905d..fdc2295e9 100644 --- a/tests/unit/tabs/tabs_tickets.js +++ b/tests/unit/tabs/tabs_tickets.js @@ -70,5 +70,25 @@ test('#5069 - ui.tabs.add creates two tab panels when using a full URL', functio }); +test('#5893 - Sublist in the tab list are considered as tab', function() { + // http://dev.jqueryui.com/ticket/5893 + expect(1); + + el = $('#tabs6').tabs(); + equals(el.tabs( "length" ), 2, 'should contain 2 tab'); + +}); + +asyncTest( "#4581 - title attribute for remote tabs does not support foreign languages", function() { + expect( 1 ); + + $( "#tabs2" ).tabs({ + selected: 3, + load: function( event, ui ) { + equal( ui.panel.id, "∫ßáö_Սե", "proper title" ); + start(); + } + }); +}); })(jQuery); diff --git a/tests/unit/testsuite.js b/tests/unit/testsuite.js index 9a16e9d0c..d152f84cd 100644 --- a/tests/unit/testsuite.js +++ b/tests/unit/testsuite.js @@ -37,13 +37,3 @@ function commonWidgetTests(widget, settings) { testWidgetDefaults(widget, settings.defaults); testWidgetOverrides(widget); } - -// load testswarm agent -(function() { - var url = window.location.search; - url = decodeURIComponent( url.slice( url.indexOf("swarmURL=") + 9 ) ); - if ( !url || url.indexOf("http") !== 0 ) { - return; - } - document.write("<scr" + "ipt src='http://swarm.jquery.org/js/inject.js?" + (new Date).getTime() + "'></scr" + "ipt>"); -})(); diff --git a/tests/unit/widget/widget.html b/tests/unit/widget/widget.html index 9e02880c4..9f7a0f040 100644 --- a/tests/unit/widget/widget.html +++ b/tests/unit/widget/widget.html @@ -15,6 +15,8 @@ <script type="text/javascript" src="widget_core.js"></script> <script type="text/javascript" src="widget_tickets.js"></script> + + <script type="text/javascript" src="../swarminject.js"></script> </head> <body> @@ -26,6 +28,12 @@ <div id="main" style="position: absolute; top: -10000px; left: -10000px;"> +<div id="widget-wrapper"> + <div id="widget"> + <div>...</div> + </div> +</div> + </div> </body> diff --git a/tests/unit/widget/widget_core.js b/tests/unit/widget/widget_core.js index 3c870f1fe..76d6543c2 100644 --- a/tests/unit/widget/widget_core.js +++ b/tests/unit/widget/widget_core.js @@ -1,90 +1,95 @@ /* * widget unit tests */ -(function($) { +(function( $ ) { -module('widget factory', { +module( "widget factory", { teardown: function() { delete $.ui.testWidget; } }); -test('widget creation', function() { +test( "widget creation", function() { var myPrototype = { _create: function() {}, creationTest: function() {} }; - - $.widget('ui.testWidget', myPrototype); - ok($.isFunction($.ui.testWidget), 'constructor was created'); - equals('object', typeof $.ui.testWidget.prototype, 'prototype was created'); - equals($.ui.testWidget.prototype._create, myPrototype._create, 'create function is copied over'); - equals($.ui.testWidget.prototype.creationTest, myPrototype.creationTest, 'random function is copied over'); - equals($.ui.testWidget.prototype.option, $.Widget.prototype.option, 'option method copied over from base widget'); + + $.widget( "ui.testWidget", myPrototype ); + ok( $.isFunction( $.ui.testWidget ), "constructor was created" ); + equals( "object", typeof $.ui.testWidget.prototype, "prototype was created" ); + equals( $.ui.testWidget.prototype._create, myPrototype._create, + "create function is copied over" ); + equals( $.ui.testWidget.prototype.creationTest, myPrototype.creationTest, + "random function is copied over" ); + equals( $.ui.testWidget.prototype.option, $.Widget.prototype.option, + "option method copied over from base widget" ); }); -test('jQuery usage', function() { - expect(10); - +test( "jQuery usage", function() { + expect( 10 ); + var shouldInit = false; - - $.widget('ui.testWidget', { + + $.widget( "ui.testWidget", { getterSetterVal: 5, _create: function() { - ok(shouldInit, 'init called on instantiation'); + ok( shouldInit, "init called on instantiation" ); }, - methodWithParams: function(param1, param2) { - ok(true, 'method called via .pluginName(methodName)'); - equals(param1, 'value1', 'parameter passed via .pluginName(methodName, param)'); - equals(param2, 'value2', 'multiple parameter passed via .pluginName(methodName, param, param)'); + methodWithParams: function( param1, param2 ) { + ok( true, "method called via .pluginName(methodName)" ); + equals( param1, "value1", + "parameter passed via .pluginName(methodName, param)" ); + equals( param2, "value2", + "multiple parameters passed via .pluginName(methodName, param, param)" ); return this; }, - getterSetterMethod: function(val) { - if (val) { + getterSetterMethod: function( val ) { + if ( val ) { this.getterSetterVal = val; } else { return this.getterSetterVal; } } }); - + shouldInit = true; - var elem = $('<div></div>').testWidget(); + var elem = $( "<div></div>" ).testWidget(); shouldInit = false; - - var instance = elem.data('testWidget'); - equals(typeof instance, 'object', 'instance stored in .data(pluginName)'); - equals(instance.element[0], elem[0], 'element stored on widget'); - var ret = elem.testWidget('methodWithParams', 'value1', 'value2'); - equals(ret, elem, 'jQuery object returned from method call'); - - ret = elem.testWidget('getterSetterMethod'); - equals(ret, 5, 'getter/setter can act as getter'); - ret = elem.testWidget('getterSetterMethod', 30); - equals(ret, elem, 'getter/setter method can be chainable'); - equals(instance.getterSetterVal, 30, 'getter/setter can act as setter'); + + var instance = elem.data( "testWidget" ); + equals( typeof instance, "object", "instance stored in .data(pluginName)" ); + equals( instance.element[0], elem[0], "element stored on widget" ); + var ret = elem.testWidget( "methodWithParams", "value1", "value2" ); + equals( ret, elem, "jQuery object returned from method call" ); + + ret = elem.testWidget( "getterSetterMethod" ); + equals( ret, 5, "getter/setter can act as getter" ); + ret = elem.testWidget( "getterSetterMethod", 30 ); + equals( ret, elem, "getter/setter method can be chainable" ); + equals( instance.getterSetterVal, 30, "getter/setter can act as setter" ); }); -test('direct usage', function() { - expect(9); - +test( "direct usage", function() { + expect( 9 ); + var shouldInit = false; - - $.widget('ui.testWidget', { + + $.widget( "ui.testWidget", { getterSetterVal: 5, _create: function() { - ok(shouldInit, 'init called on instantiation'); + ok( shouldInit, "init called on instantiation" ); }, - methodWithParams: function(param1, param2) { - ok(true, 'method called via .pluginName(methodName)'); - equals(param1, 'value1', 'parameter passed via .pluginName(methodName, param)'); - equals(param2, 'value2', 'multiple parameter passed via .pluginName(methodName, param, param)'); - + methodWithParams: function( param1, param2 ) { + ok( true, "method called dirctly" ); + equals( param1, "value1", "parameter passed via direct call" ); + equals( param2, "value2", "multiple parameters passed via direct call" ); + return this; }, - getterSetterMethod: function(val) { - if (val) { + getterSetterMethod: function( val ) { + if ( val ) { this.getterSetterVal = val; } else { return this.getterSetterVal; @@ -92,29 +97,30 @@ test('direct usage', function() { } }); - var elem = $('<div></div>')[0]; + var elem = $( "<div></div>" )[ 0 ]; shouldInit = true; - var instance = new $.ui.testWidget({}, elem); + var instance = new $.ui.testWidget( {}, elem ); shouldInit = false; + + equals( $( elem ).data( "testWidget" ), instance, + "instance stored in .data(pluginName)" ); + equals( instance.element[ 0 ], elem, "element stored on widget" ); - equals($(elem).data('testWidget'), instance, 'instance stored in .data(pluginName)'); - equals(instance.element[0], elem, 'element stored on widget'); - - var ret = instance.methodWithParams('value1', 'value2'); - equals(ret, instance, 'plugin returned from method call'); - + var ret = instance.methodWithParams( "value1", "value2" ); + equals( ret, instance, "plugin returned from method call" ); + ret = instance.getterSetterMethod(); - equals(ret, 5, 'getter/setter can act as getter'); - instance.getterSetterMethod(30); - equals(instance.getterSetterVal, 30, 'getter/setter can act as setter'); + equals( ret, 5, "getter/setter can act as getter" ); + instance.getterSetterMethod( 30 ); + equals( instance.getterSetterVal, 30, "getter/setter can act as setter" ); }); -test('merge multiple option arguments', function() { - expect(1); - $.widget("ui.testWidget", { +test("merge multiple option arguments", function() { + expect( 1 ); + $.widget( "ui.testWidget", { _create: function() { - same(this.options, { + same( this.options, { disabled: false, option1: "value1", option2: "value2", @@ -126,7 +132,7 @@ test('merge multiple option arguments', function() { }); } }); - $("<div></div>").testWidget({ + $( "<div></div>" ).testWidget({ option1: "valuex", option2: "valuex", option3: "value3", @@ -146,23 +152,351 @@ test('merge multiple option arguments', function() { }); }); -test(".widget() - base", function() { - $.widget("ui.testWidget", { +test( "re-init", function() { + var div = $( "<div></div>" ), + actions = []; + + $.widget( "ui.testWidget", { + _create: function() { + actions.push( "create" ); + }, + _init: function() { + actions.push( "init" ); + }, + _setOption: function( key, value ) { + actions.push( "option" + key ); + } + }); + + actions = []; + div.testWidget({ foo: "bar" }); + same( actions, [ "create", "init" ], "correct methods called on init" ); + + actions = []; + div.testWidget(); + same( actions, [ "init" ], "correct methods call on re-init" ); + + actions = []; + div.testWidget({ foo: "bar" }); + same( actions, [ "optionfoo", "init" ], "correct methods called on re-init with options" ); +}); + +test( ".option() - getter", function() { + $.widget( "ui.testWidget", { + _create: function() {} + }); + + var div = $( "<div></div>" ).testWidget({ + foo: "bar", + baz: 5, + qux: [ "quux", "quuux" ] + }); + + same( div.testWidget( "option", "foo"), "bar", "single option - string" ); + same( div.testWidget( "option", "baz"), 5, "single option - number" ); + same( div.testWidget( "option", "qux"), [ "quux", "quuux" ], + "single option - array" ); + + var options = div.testWidget( "option" ); + same( options, { + disabled: false, + foo: "bar", + baz: 5, + qux: [ "quux", "quuux" ] + }, "full options hash returned" ); + options.foo = "notbar"; + same( div.testWidget( "option", "foo"), "bar", + "modifying returned options hash does not modify plugin instance" ); +}); + +test( ".option() - delegate to ._setOptions()", function() { + var calls = []; + $.widget( "ui.testWidget", { + _create: function() {}, + _setOptions: function( options ) { + calls.push( options ); + } + }); + var div = $( "<div></div>" ).testWidget(); + + calls = []; + div.testWidget( "option", "foo", "bar" ); + same( calls, [{ foo: "bar" }], "_setOptions called for single option" ); + + calls = []; + div.testWidget( "option", { + bar: "qux", + quux: "quuux" + }); + same( calls, [{ bar: "qux", quux: "quuux" }], + "_setOptions called with multiple options" ); +}); + +test( ".option() - delegate to ._setOption()", function() { + var calls = []; + $.widget( "ui.testWidget", { + _create: function() {}, + _setOption: function( key, val ) { + calls.push({ + key: key, + val: val + }); + } + }); + var div = $( "<div></div>" ).testWidget(); + + calls = []; + div.testWidget( "option", "foo", "bar" ); + same( calls, [{ key: "foo", val: "bar" }], + "_setOption called for single option" ); + + calls = []; + div.testWidget( "option", { + bar: "qux", + quux: "quuux" + }); + same( calls, [ + { key: "bar", val: "qux" }, + { key: "quux", val: "quuux" } + ], "_setOption called with multiple options" ); +}); + +test( ".enable()", function() { + expect( 2 ); + $.widget( "ui.testWidget", { + _create: function() {}, + _setOption: function( key, val ) { + same( key, "disabled", "_setOption called with disabled option" ); + same( val, false, "disabled set to false" ); + } + }); + $( "<div></div>" ).testWidget().testWidget( "enable" ); +}); + +test( ".disable()", function() { + expect( 2 ); + $.widget( "ui.testWidget", { + _create: function() {}, + _setOption: function( key, val ) { + same( key, "disabled", "_setOption called with disabled option" ); + same( val, true, "disabled set to true" ); + } + }); + $( "<div></div>" ).testWidget().testWidget( "disable" ); +}); + +test( ".widget() - base", function() { + $.widget( "ui.testWidget", { _create: function() {} }); - var div = $("<div></div>").testWidget() - same(div[0], div.testWidget("widget")[0]); + var div = $( "<div></div>" ).testWidget(); + same( div[0], div.testWidget( "widget" )[0]); }); -test(".widget() - overriden", function() { - var wrapper = $("<div></div>"); - $.widget("ui.testWidget", { +test( ".widget() - overriden", function() { + var wrapper = $( "<div></div>" ); + $.widget( "ui.testWidget", { _create: function() {}, widget: function() { return wrapper; } }); - same(wrapper[0], $("<div></div>").testWidget().testWidget("widget")[0]); + same( wrapper[0], $( "<div></div>" ).testWidget().testWidget( "widget" )[0] ); +}); + +test( "._trigger() - no event, no ui", function() { + expect( 7 ); + var handlers = []; + + $.widget( "ui.testWidget", { + _create: function() {} + }); + + $( "#widget" ).testWidget({ + foo: function( event, ui ) { + same( event.type, "testwidgetfoo", "correct event type in callback" ); + same( ui, {}, "empty ui hash passed" ); + handlers.push( "callback" ); + } + }); + $( document ).add( "#widget-wrapper" ).add( "#widget" ) + .bind( "testwidgetfoo", function( event, ui ) { + same( ui, {}, "empty ui hash passed" ); + handlers.push( this ); + }); + same( $( "#widget" ).data( "testWidget" )._trigger( "foo" ), true, + "_trigger returns true when event is not cancelled" ); + same( handlers, [ + $( "#widget" )[ 0 ], + $( "#widget-wrapper" )[ 0 ], + document, + "callback" + ], "event bubbles and then invokes callback" ); + + $( document ).unbind( "testwidgetfoo" ); +}); + +test( "._trigger() - cancelled event", function() { + expect( 3 ); + + $.widget( "ui.testWidget", { + _create: function() {} + }); + + $( "#widget" ).testWidget({ + foo: function( event, ui ) { + ok( true, "callback invoked even if event is cancelled" ); + } + }) + .bind( "testwidgetfoo", function( event, ui ) { + ok( true, "event was triggered" ); + return false; + }); + same( $( "#widget" ).data( "testWidget" )._trigger( "foo" ), false, + "_trigger returns false when event is cancelled" ); +}); + +test( "._trigger() - cancelled callback", function() { + $.widget( "ui.testWidget", { + _create: function() {} + }); + + $( "#widget" ).testWidget({ + foo: function( event, ui ) { + return false; + } + }); + same( $( "#widget" ).data( "testWidget" )._trigger( "foo" ), false, + "_trigger returns false when callback returns false" ); +}); + +test( "._trigger() - provide event and ui", function() { + expect( 7 ); + + var originalEvent = $.Event( "originalTest" ); + $.widget( "ui.testWidget", { + _create: function() {}, + testEvent: function() { + var ui = { + foo: "bar", + baz: { + qux: 5, + quux: 20 + } + }; + this._trigger( "foo", originalEvent, ui ); + same( ui, { + foo: "notbar", + baz: { + qux: 10, + quux: "jQuery" + } + }, "ui object modified" ); + } + }); + $( "#widget" ).bind( "testwidgetfoo", function( event, ui ) { + equal( event.originalEvent, originalEvent, "original event object passed" ); + same( ui, { + foo: "bar", + baz: { + qux: 5, + quux: 20 + } + }, "ui hash passed" ); + ui.foo = "notbar"; + }); + $( "#widget-wrapper" ).bind( "testwidgetfoo", function( event, ui ) { + equal( event.originalEvent, originalEvent, "original event object passed" ); + same( ui, { + foo: "notbar", + baz: { + qux: 5, + quux: 20 + } + }, "modified ui hash passed" ); + ui.baz.qux = 10; + }); + $( "#widget" ).testWidget({ + foo: function( event, ui ) { + equal( event.originalEvent, originalEvent, "original event object passed" ); + same( ui, { + foo: "notbar", + baz: { + qux: 10, + quux: 20 + } + }, "modified ui hash passed" ); + ui.baz.quux = "jQuery"; + } + }) + .testWidget( "testEvent" ); +}); + +test( "auto-destroy - .remove()", function() { + expect( 1 ); + $.widget( "ui.testWidget", { + _create: function() {}, + destroy: function() { + ok( true, "destroyed from .remove()" ); + } + }); + $( "#widget" ).testWidget().remove(); +}); + +test( "auto-destroy - .remove() on parent", function() { + expect( 1 ); + $.widget( "ui.testWidget", { + _create: function() {}, + destroy: function() { + ok( true, "destroyed from .remove() on parent" ); + } + }); + $( "#widget" ).testWidget().parent().remove(); +}); + +test( "auto-destroy - .remove() on child", function() { + $.widget( "ui.testWidget", { + _create: function() {}, + destroy: function() { + ok( false, "destroyed from .remove() on child" ); + } + }); + $( "#widget" ).testWidget().children().remove(); + // http://github.com/jquery/qunit/pull/34 + $.ui.testWidget.prototype.destroy = $.noop; +}); + +test( "auto-destroy - .empty()", function() { + $.widget( "ui.testWidget", { + _create: function() {}, + destroy: function() { + ok( false, "destroyed from .empty()" ); + } + }); + $( "#widget" ).testWidget().empty(); + // http://github.com/jquery/qunit/pull/34 + $.ui.testWidget.prototype.destroy = $.noop; +}); + +test( "auto-destroy - .empty() on parent", function() { + expect( 1 ); + $.widget( "ui.testWidget", { + _create: function() {}, + destroy: function() { + ok( true, "destroyed from .empty() on parent" ); + } + }); + $( "#widget" ).testWidget().parent().empty(); +}); + +test( "auto-destroy - .detach()", function() { + $.widget( "ui.testWidget", { + _create: function() {}, + destroy: function() { + ok( false, "destroyed from .detach()" ); + } + }); + $( "#widget" ).testWidget().detach(); }); -})(jQuery); +})( jQuery ); diff --git a/tests/unit/widget/widget_tickets.js b/tests/unit/widget/widget_tickets.js index 47303dc9c..21f44b54c 100644 --- a/tests/unit/widget/widget_tickets.js +++ b/tests/unit/widget/widget_tickets.js @@ -1,11 +1,11 @@ /* * widget unit tests */ -(function($) { +(function( $ ) { -module('widget: tickets'); +module( "widget: tickets" ); -test('#5830 - Widget: Using inheritance overwrites the base classes options', function() { +test( "#5830 - Widget: Using inheritance overwrites the base classes options", function() { $.widget( "ui.testWidgetBase", { options: { obj: { @@ -15,7 +15,7 @@ test('#5830 - Widget: Using inheritance overwrites the base classes options', fu arr: [ "testing" ] } }); - + $.widget( "ui.testWidgetExtension", $.ui.testWidgetBase, { options: { obj: { @@ -24,7 +24,7 @@ test('#5830 - Widget: Using inheritance overwrites the base classes options', fu arr: [ "alpha", "beta" ] } }); - + same( $.ui.testWidgetBase.prototype.options.obj, { key1: "foo", key2: "bar" @@ -38,9 +38,9 @@ test('#5830 - Widget: Using inheritance overwrites the base classes options', fu }, "extension class option object extends base"); same( $.ui.testWidgetExtension.prototype.options.arr, [ "alpha", "beta" ], "extension class option array overwrites base"); - + delete $.ui.testWidgetBase; delete $.ui.testWidgetExtension; }); -})(jQuery); +})( jQuery ); diff --git a/tests/visual/position/position_margin.html b/tests/visual/position/position_margin.html new file mode 100644 index 000000000..b29480061 --- /dev/null +++ b/tests/visual/position/position_margin.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>Position Visual Test: Default</title> + <link rel="stylesheet" href="../visual.css" type="text/css" /> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> + <script type="text/javascript" src="../../../jquery-1.4.2.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> + <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> + <script type="text/javascript"> + $(function() { + $( "#elem" ).position({ + my: "right bottom", + at: "right bottom", + of: window, + collision: "fit" + }); + }); + </script> + <style> + #elem { + position: absolute; + top: 100px; + left: 100px; + width: 200px; + height: 200px; + box-shadow: 10px 10px 5px #888; + -moz-box-shadow: 10px 10px 5px #888; + -webkit-box-shadow: 10px 10px 5px #888; + background-color: #aaa; + margin: 15px; + } + </style> +</head> +<body> + +<div id="elem"></div> + +</body> +</html> diff --git a/ui/i18n/jquery.ui.datepicker-gl.js b/ui/i18n/jquery.ui.datepicker-gl.js new file mode 100644 index 000000000..278403e8f --- /dev/null +++ b/ui/i18n/jquery.ui.datepicker-gl.js @@ -0,0 +1,23 @@ +/* Galician localization for 'UI date picker' jQuery extension. */ +/* Translated by Jorge Barreiro <yortx.barry@gmail.com>. */ +jQuery(function($){ + $.datepicker.regional['gl'] = { + closeText: 'Pechar', + prevText: '<Ant', + nextText: 'Seg>', + currentText: 'Hoxe', + monthNames: ['Xaneiro','Febreiro','Marzo','Abril','Maio','Xuño', + 'Xullo','Agosto','Setembro','Outubro','Novembro','Decembro'], + monthNamesShort: ['Xan','Feb','Mar','Abr','Mai','Xuñ', + 'Xul','Ago','Set','Out','Nov','Dec'], + dayNames: ['Domingo','Luns','Martes','Mércores','Xoves','Venres','Sábado'], + dayNamesShort: ['Dom','Lun','Mar','Mér','Xov','Ven','Sáb'], + dayNamesMin: ['Do','Lu','Ma','Mé','Xo','Ve','Sá'], + weekHeader: 'Sm', + dateFormat: 'dd/mm/yy', + firstDay: 1, + isRTL: false, + showMonthAfterYear: false, + yearSuffix: ''}; + $.datepicker.setDefaults($.datepicker.regional['gl']); +});
\ No newline at end of file diff --git a/ui/i18n/jquery.ui.datepicker-kz.js b/ui/i18n/jquery.ui.datepicker-kz.js new file mode 100644 index 000000000..f1f897b00 --- /dev/null +++ b/ui/i18n/jquery.ui.datepicker-kz.js @@ -0,0 +1,23 @@ +/* Kazakh (UTF-8) initialisation for the jQuery UI date picker plugin. */ +/* Written by Dmitriy Karasyov (dmitriy.karasyov@gmail.com). */ +jQuery(function($){ + $.datepicker.regional['kz'] = { + closeText: 'Жабу', + prevText: '<Алдыңғы', + nextText: 'Келесі>', + currentText: 'Бүгін', + monthNames: ['Қаңтар','Ақпан','Наурыз','Сәуір','Мамыр','Маусым', + 'Шілде','Тамыз','Қыркүйек','Қазан','Қараша','Желтоқсан'], + monthNamesShort: ['Қаң','Ақп','Нау','Сәу','Мам','Мау', + 'Шіл','Там','Қыр','Қаз','Қар','Жел'], + dayNames: ['Жексенбі','Дүйсенбі','Сейсенбі','Сәрсенбі','Бейсенбі','Жұма','Сенбі'], + dayNamesShort: ['жкс','дсн','ссн','срс','бсн','жма','снб'], + dayNamesMin: ['Жк','Дс','Сс','Ср','Бс','Жм','Сн'], + weekHeader: 'Не', + dateFormat: 'dd.mm.yy', + firstDay: 1, + isRTL: false, + showMonthAfterYear: false, + yearSuffix: ''}; + $.datepicker.setDefaults($.datepicker.regional['kz']); +}); diff --git a/ui/i18n/jquery.ui.datepicker-pt.js b/ui/i18n/jquery.ui.datepicker-pt.js new file mode 100644 index 000000000..f09f5aeb0 --- /dev/null +++ b/ui/i18n/jquery.ui.datepicker-pt.js @@ -0,0 +1,22 @@ +/* Portuguese initialisation for the jQuery UI date picker plugin. */ +jQuery(function($){ + $.datepicker.regional['pt'] = { + closeText: 'Fechar', + prevText: '<Anterior', + nextText: 'Seguinte', + currentText: 'Hoje', + monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho', + 'Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'], + monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun', + 'Jul','Ago','Set','Out','Nov','Dez'], + dayNames: ['Domingo','Segunda-feira','Terça-feira','Quarta-feira','Quinta-feira','Sexta-feira','Sábado'], + dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'], + dayNamesMin: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'], + weekHeader: 'Sem', + dateFormat: 'dd/mm/yy', + firstDay: 0, + isRTL: false, + showMonthAfterYear: false, + yearSuffix: ''}; + $.datepicker.setDefaults($.datepicker.regional['pt']); +});
\ No newline at end of file diff --git a/ui/jquery.effects.core.js b/ui/jquery.effects.core.js index 801b57e4c..a835a062f 100644 --- a/ui/jquery.effects.core.js +++ b/ui/jquery.effects.core.js @@ -439,6 +439,20 @@ function _normalizeArguments(effect, options, speed, callback) { return [effect, options, speed, callback]; } +function standardSpeed( speed ) { + // valid standard speeds + if ( !speed || typeof speed === "number" || $.fx.speeds[ speed ] ) { + return true; + } + + // invalid strings - treat as "normal" speed + if ( typeof speed === "string" && !$.effects[ speed ] ) { + return true; + } + + return false; +} + $.fn.extend({ effect: function(effect, options, speed, callback) { var args = _normalizeArguments.apply(this, arguments), @@ -455,7 +469,7 @@ $.fn.extend({ _show: $.fn.show, show: function(speed) { - if (!speed || typeof speed == 'number' || $.fx.speeds[speed]) { + if ( standardSpeed( speed ) ) { return this._show.apply(this, arguments); } else { var args = _normalizeArguments.apply(this, arguments); @@ -466,7 +480,7 @@ $.fn.extend({ _hide: $.fn.hide, hide: function(speed) { - if (!speed || typeof speed == 'number' || $.fx.speeds[speed]) { + if ( standardSpeed( speed ) ) { return this._hide.apply(this, arguments); } else { var args = _normalizeArguments.apply(this, arguments); @@ -475,11 +489,10 @@ $.fn.extend({ } }, - // jQuery core overloads toggle and create _toggle + // jQuery core overloads toggle and creates _toggle __toggle: $.fn.toggle, toggle: function(speed) { - if (!speed || typeof speed == 'number' || $.fx.speeds[speed] || - typeof speed == 'boolean' || $.isFunction(speed)) { + if ( standardSpeed( speed ) || typeof speed === "boolean" || $.isFunction( speed ) ) { return this.__toggle.apply(this, arguments); } else { var args = _normalizeArguments.apply(this, arguments); diff --git a/ui/jquery.ui.accordion.js b/ui/jquery.ui.accordion.js index 216a32668..96a69d4f3 100644 --- a/ui/jquery.ui.accordion.js +++ b/ui/jquery.ui.accordion.js @@ -92,7 +92,8 @@ $.widget( "ui.accordion", { self.active = self._findActive( self.active || options.active ) .addClass( "ui-state-default ui-state-active" ) - .toggleClass( "ui-corner-all ui-corner-top" ); + .toggleClass( "ui-corner-all" ) + .toggleClass( "ui-corner-top" ); self.active.next().addClass( "ui-accordion-content-active" ); self._createIcons(); diff --git a/ui/jquery.ui.autocomplete.js b/ui/jquery.ui.autocomplete.js index 8380df8ad..2d1d7f94b 100644 --- a/ui/jquery.ui.autocomplete.js +++ b/ui/jquery.ui.autocomplete.js @@ -63,8 +63,8 @@ $.widget( "ui.autocomplete", { break; case keyCode.ENTER: case keyCode.NUMPAD_ENTER: - // when menu is open or has focus - if ( self.menu.element.is( ":visible" ) ) { + // when menu is open and has focus + if ( self.menu.active ) { event.preventDefault(); } //passthrough - ENTER and TAB both select the current element @@ -125,7 +125,7 @@ $.widget( "ui.autocomplete", { // so we have to track the next mousedown and close the menu if // the user clicks somewhere outside of the autocomplete var menuElement = self.menu.element[ 0 ]; - if ( event.target === menuElement ) { + if ( !$( event.target ).closest( ".ui-menu-item" ).length ) { setTimeout(function() { $( document ).one( 'mousedown', function( event ) { if ( event.target !== self.element[ 0 ] && @@ -160,9 +160,16 @@ $.widget( "ui.autocomplete", { if ( self.element[0] !== doc.activeElement ) { self.element.focus(); self.previous = previous; + // #6109 - IE triggers two focus events and the second + // is asynchronous, so we need to reset the previous + // term synchronously and asynchronously :-( + setTimeout(function() { + self.previous = previous; + }, 1); } if ( false !== self._trigger( "select", event, { item: item } ) ) { + self.term = item.value; self.element.val( item.value ); } @@ -210,7 +217,8 @@ $.widget( "ui.autocomplete", { }, _initSource: function() { - var array, + var self = this, + array, url; if ( $.isArray(this.options.source) ) { array = this.options.source; @@ -220,7 +228,15 @@ $.widget( "ui.autocomplete", { } else if ( typeof this.options.source === "string" ) { url = this.options.source; this.source = function( request, response ) { - $.getJSON( url, request, response ); + if (self.xhr) { + self.xhr.abort(); + } + self.xhr = $.getJSON( url, request, function( data, status, xhr ) { + if ( xhr === self.xhr ) { + response( data ); + } + self.xhr = null; + }); }; } else { this.source = this.options.source; @@ -229,6 +245,10 @@ $.widget( "ui.autocomplete", { search: function( value, event ) { value = value != null ? value : this.element.val(); + + // always save the actual value, not the one passed as an argument + this.term = this.element.val(); + if ( value.length < this.options.minLength ) { return this.close( event ); } @@ -242,10 +262,7 @@ $.widget( "ui.autocomplete", { }, _search: function( value ) { - this.term = this.element - .addClass( "ui-autocomplete-loading" ) - // always save the actual value, not the one passed as an argument - .val(); + this.element.addClass( "ui-autocomplete-loading" ); this.source( { term: value }, this.response ); }, @@ -428,7 +445,7 @@ $.widget("ui.menu", { elementHeight = this.element.height(); if (offset < 0) { this.element.attr("scrollTop", scroll + offset); - } else if (offset > elementHeight) { + } else if (offset >= elementHeight) { this.element.attr("scrollTop", scroll + offset - elementHeight + item.height()); } } @@ -484,12 +501,12 @@ $.widget("ui.menu", { if (this.hasScroll()) { // TODO merge with no-scroll-else if (!this.active || this.last()) { - this.activate(event, this.element.children(":first")); + this.activate(event, this.element.children(".ui-menu-item:first")); return; } var base = this.active.offset().top, height = this.element.height(), - result = this.element.children("li").filter(function() { + result = this.element.children(".ui-menu-item").filter(function() { var close = $(this).offset().top - base - height + $(this).height(); // TODO improve approximation return close < 10 && close > -10; @@ -497,11 +514,12 @@ $.widget("ui.menu", { // TODO try to catch this earlier when scrollTop indicates the last page anyway if (!result.length) { - result = this.element.children(":last"); + result = this.element.children(".ui-menu-item:last"); } this.activate(event, result); } else { - this.activate(event, this.element.children(!this.active || this.last() ? ":first" : ":last")); + this.activate(event, this.element.children(".ui-menu-item") + .filter(!this.active || this.last() ? ":first" : ":last")); } }, @@ -510,13 +528,13 @@ $.widget("ui.menu", { if (this.hasScroll()) { // TODO merge with no-scroll-else if (!this.active || this.first()) { - this.activate(event, this.element.children(":last")); + this.activate(event, this.element.children(".ui-menu-item:last")); return; } var base = this.active.offset().top, height = this.element.height(); - result = this.element.children("li").filter(function() { + result = this.element.children(".ui-menu-item").filter(function() { var close = $(this).offset().top - base + height - $(this).height(); // TODO improve approximation return close < 10 && close > -10; @@ -524,11 +542,12 @@ $.widget("ui.menu", { // TODO try to catch this earlier when scrollTop indicates the last page anyway if (!result.length) { - result = this.element.children(":first"); + result = this.element.children(".ui-menu-item:first"); } this.activate(event, result); } else { - this.activate(event, this.element.children(!this.active || this.first() ? ":last" : ":first")); + this.activate(event, this.element.children(".ui-menu-item") + .filter(!this.active || this.first() ? ":last" : ":first")); } }, diff --git a/ui/jquery.ui.button.js b/ui/jquery.ui.button.js index b2fab4d24..5e52fb4cb 100644 --- a/ui/jquery.ui.button.js +++ b/ui/jquery.ui.button.js @@ -44,6 +44,7 @@ var lastActive, $.widget( "ui.button", { options: { + disabled: null, text: true, label: null, icons: { @@ -56,6 +57,10 @@ $.widget( "ui.button", { .unbind( "reset.button" ) .bind( "reset.button", formResetHandler ); + if ( typeof this.options.disabled !== "boolean" ) { + this.options.disabled = this.element.attr( "disabled" ); + } + this._determineButtonType(); this.hasTitle = !!this.buttonElement.attr( "title" ); @@ -339,11 +344,13 @@ $.widget( "ui.buttonset", { return $( this ).button( "widget" )[ 0 ]; }) .removeClass( "ui-corner-all ui-corner-left ui-corner-right" ) - .filter( ":first" ) - .addClass( "ui-corner-left" ) - .end() - .filter( ":last" ) - .addClass( "ui-corner-right" ) + .filter( ":visible" ) + .filter( ":first" ) + .addClass( "ui-corner-left" ) + .end() + .filter( ":last" ) + .addClass( "ui-corner-right" ) + .end() .end() .end(); }, diff --git a/ui/jquery.ui.core.js b/ui/jquery.ui.core.js index bf5312d5c..99aec2a63 100644 --- a/ui/jquery.ui.core.js +++ b/ui/jquery.ui.core.js @@ -17,72 +17,9 @@ if ( $.ui.version ) { return; } -//Helper functions and ui object $.extend( $.ui, { version: "@VERSION", - // $.ui.plugin is deprecated. Use the proxy pattern instead. - plugin: { - add: function( module, option, set ) { - var proto = $.ui[ module ].prototype; - for ( var i in set ) { - proto.plugins[ i ] = proto.plugins[ i ] || []; - proto.plugins[ i ].push( [ option, set[ i ] ] ); - } - }, - call: function( instance, name, args ) { - var set = instance.plugins[ name ]; - if ( !set || !instance.element[ 0 ].parentNode ) { - return; - } - - for ( var i = 0; i < set.length; i++ ) { - if ( instance.options[ set[ i ][ 0 ] ] ) { - set[ i ][ 1 ].apply( instance.element, args ); - } - } - } - }, - - contains: function( a, b ) { - return document.compareDocumentPosition ? - a.compareDocumentPosition( b ) & 16 : - a !== b && a.contains( b ); - }, - - hasScroll: function( el, a ) { - - //If overflow is hidden, the element might have extra content, but the user wants to hide it - if ( $( el ).css( "overflow" ) === "hidden") { - return false; - } - - var scroll = ( a && a === "left" ) ? "scrollLeft" : "scrollTop", - has = false; - - if ( el[ scroll ] > 0 ) { - return true; - } - - // TODO: determine which cases actually cause this to happen - // if the element doesn't have the scroll set, see if it's possible to - // set the scroll - el[ scroll ] = 1; - has = ( el[ scroll ] > 0 ); - el[ scroll ] = 0; - return has; - }, - - isOverAxis: function( x, reference, size ) { - //Determines when x coordinate is over "b" element axis - return ( x > reference ) && ( x < ( reference + size ) ); - }, - - isOver: function( y, x, top, left, height, width ) { - //Determines when x, y coordinates is over "b" element - return $.ui.isOverAxis( y, top, height ) && $.ui.isOverAxis( x, left, width ); - }, - keyCode: { ALT: 18, BACKSPACE: 8, @@ -119,7 +56,7 @@ $.extend( $.ui, { } }); -//jQuery plugins +// plugins $.fn.extend({ _focus: $.fn.focus, focus: function( delay, fn ) { @@ -136,18 +73,6 @@ $.fn.extend({ this._focus.apply( this, arguments ); }, - enableSelection: function() { - return this - .attr( "unselectable", "off" ) - .css( "MozUserSelect", "" ); - }, - - disableSelection: function() { - return this - .attr( "unselectable", "on" ) - .css( "MozUserSelect", "none" ); - }, - scrollParent: function() { var scrollParent; if (($.browser.msie && (/(static|relative)/).test(this.css('position'))) || (/absolute/).test(this.css('position'))) { @@ -190,6 +115,17 @@ $.fn.extend({ } return 0; + }, + + disableSelection: function() { + return this.bind( $.support.selectstart ? "selectstart" : "mousedown" + + ".ui-disableSelection", function( event ) { + event.preventDefault(); + }); + }, + + enableSelection: function() { + return this.unbind( ".ui-disableSelection" ); } }); @@ -237,7 +173,7 @@ $.each( [ "Width", "Height" ], function( i, name ) { }; }); -//Additional selectors +// selectors function visible( element ) { return !$( element ).parents().andSelf().filter(function() { return $.curCSS( this, "visibility" ) === "hidden" || @@ -278,4 +214,95 @@ $.extend( $.expr[ ":" ], { } }); +// support +$(function() { + var body = document.body, + div = body.appendChild( div = document.createElement( "div" ) ); + + $.extend( div.style, { + minHeight: "100px", + height: "auto", + padding: 0, + borderWidth: 0 + }); + + $.support.minHeight = div.offsetHeight === 100; + $.support.selectstart = "onselectstart" in div; + + // set display to none to avoid a layout bug in IE + // http://dev.jquery.com/ticket/4014 + body.removeChild( div ).style.display = "none"; +}); + + + + + +// deprecated +$.extend( $.ui, { + // $.ui.plugin is deprecated. Use the proxy pattern instead. + plugin: { + add: function( module, option, set ) { + var proto = $.ui[ module ].prototype; + for ( var i in set ) { + proto.plugins[ i ] = proto.plugins[ i ] || []; + proto.plugins[ i ].push( [ option, set[ i ] ] ); + } + }, + call: function( instance, name, args ) { + var set = instance.plugins[ name ]; + if ( !set || !instance.element[ 0 ].parentNode ) { + return; + } + + for ( var i = 0; i < set.length; i++ ) { + if ( instance.options[ set[ i ][ 0 ] ] ) { + set[ i ][ 1 ].apply( instance.element, args ); + } + } + } + }, + + // will be deprecated when we switch to jQuery 1.4 - use jQuery.contains() + contains: function( a, b ) { + return document.compareDocumentPosition ? + a.compareDocumentPosition( b ) & 16 : + a !== b && a.contains( b ); + }, + + // only used by resizable + hasScroll: function( el, a ) { + + //If overflow is hidden, the element might have extra content, but the user wants to hide it + if ( $( el ).css( "overflow" ) === "hidden") { + return false; + } + + var scroll = ( a && a === "left" ) ? "scrollLeft" : "scrollTop", + has = false; + + if ( el[ scroll ] > 0 ) { + return true; + } + + // TODO: determine which cases actually cause this to happen + // if the element doesn't have the scroll set, see if it's possible to + // set the scroll + el[ scroll ] = 1; + has = ( el[ scroll ] > 0 ); + el[ scroll ] = 0; + return has; + }, + + // these are odd functions, fix the API or move into individual plugins + isOverAxis: function( x, reference, size ) { + //Determines when x coordinate is over "b" element axis + return ( x > reference ) && ( x < ( reference + size ) ); + }, + isOver: function( y, x, top, left, height, width ) { + //Determines when x, y coordinates is over "b" element + return $.ui.isOverAxis( y, top, height ) && $.ui.isOverAxis( x, left, width ); + } +}); + })( jQuery ); diff --git a/ui/jquery.ui.datepicker.js b/ui/jquery.ui.datepicker.js index 27ffadbff..ccbcc6dac 100644 --- a/ui/jquery.ui.datepicker.js +++ b/ui/jquery.ui.datepicker.js @@ -982,7 +982,7 @@ $.extend(Datepicker.prototype, { var getName = function(match, shortNames, longNames) { var names = (lookAhead(match) ? longNames : shortNames); for (var i = 0; i < names.length; i++) { - if (value.substr(iValue, names[i].length) == names[i]) { + if (value.substr(iValue, names[i].length).toLowerCase() == names[i].toLowerCase()) { iValue += names[i].length; return i + 1; } @@ -1493,7 +1493,7 @@ $.extend(Datepicker.prototype, { (otherMonth && !showOtherMonths ? ' ' : // display for other months (unselectable ? '<span class="ui-state-default">' + printDate.getDate() + '</span>' : '<a class="ui-state-default' + (printDate.getTime() == today.getTime() ? ' ui-state-highlight' : '') + - (printDate.getTime() == selectedDate.getTime() ? ' ui-state-active' : '') + // highlight selected day + (printDate.getTime() == currentDate.getTime() ? ' ui-state-active' : '') + // highlight selected day (otherMonth ? ' ui-priority-secondary' : '') + // distinguish dates from other months '" href="#">' + printDate.getDate() + '</a>')) + '</td>'; // display selectable date printDate.setDate(printDate.getDate() + 1); diff --git a/ui/jquery.ui.dialog.js b/ui/jquery.ui.dialog.js index 44f5cbbbc..11cc1960b 100644 --- a/ui/jquery.ui.dialog.js +++ b/ui/jquery.ui.dialog.js @@ -19,10 +19,25 @@ (function( $, undefined ) { var uiDialogClasses = - 'ui-dialog ' + - 'ui-widget ' + - 'ui-widget-content ' + - 'ui-corner-all '; + 'ui-dialog ' + + 'ui-widget ' + + 'ui-widget-content ' + + 'ui-corner-all ', + sizeRelatedOptions = { + buttons: true, + height: true, + maxHeight: true, + maxWidth: true, + minHeight: true, + minWidth: true, + width: true + }, + resizableRelatedOptions = { + maxHeight: true, + maxWidth: true, + minHeight: true, + minWidth: true + }; $.widget("ui.dialog", { options: { @@ -67,10 +82,11 @@ $.widget("ui.dialog", { this.originalTitle = ""; } + this.options.title = this.options.title || this.originalTitle; var self = this, options = self.options, - title = options.title || self.originalTitle || ' ', + title = options.title || ' ', titleId = $.ui.dialog.getTitleId(self.element), uiDialog = (self.uiDialog = $('<div></div>')) @@ -328,8 +344,8 @@ $.widget("ui.dialog", { uiDialog.find('.ui-dialog-buttonpane :tabbable').get().concat( uiDialog.get()))).eq(0).focus(); - self._trigger('open'); self._isOpen = true; + self._trigger('open'); return self; }, @@ -356,10 +372,15 @@ $.widget("ui.dialog", { }); } if (hasButtons) { - $.each(buttons, function(name, fn) { - var button = $('<button type="button"></button>') - .text(name) - .click(function() { fn.apply(self.element[0], arguments); }) + $.each(buttons, function(name, props) { + props = $.isFunction( props ) ? + { click: props, text: name } : + props; + var button = $('<button></button>', props) + .unbind('click') + .click(function() { + props.click.apply(self.element[0], arguments); + }) .appendTo(uiButtonSet); if ($.fn.button) { button.button(); @@ -512,12 +533,34 @@ $.widget("ui.dialog", { } }, - _setOption: function(key, value){ + _setOptions: function( options ) { var self = this, - uiDialog = self.uiDialog, - isResizable = uiDialog.is(':data(resizable)'), + resizableOptions = {}, resize = false; + $.each( options, function( key, value ) { + self._setOption( key, value ); + + if ( key in sizeRelatedOptions ) { + resize = true; + } + if ( key in resizableRelatedOptions ) { + resizableOptions[ key ] = value; + } + }); + + if ( resize ) { + this._size(); + } + if ( this.uiDialog.is( ":data(resizable)" ) ) { + this.uiDialog.resizable( "option", resizableOptions ); + } + }, + + _setOption: function(key, value){ + var self = this, + uiDialog = self.uiDialog; + switch (key) { //handling of deprecated beforeclose (vs beforeClose) option //Ticket #4669 http://dev.jqueryui.com/ticket/4669 @@ -527,10 +570,9 @@ $.widget("ui.dialog", { break; case "buttons": self._createButtons(value); - resize = true; break; case "closeText": - // convert whatever was passed in to a string, for text() to not throw up + // ensure that we always pass a string self.uiDialogTitlebarCloseText.text("" + value); break; case "dialogClass": @@ -546,44 +588,21 @@ $.widget("ui.dialog", { } break; case "draggable": - if (value) { - self._makeDraggable(); - } else { - uiDialog.draggable('destroy'); - } - break; - case "height": - resize = true; - break; - case "maxHeight": - if (isResizable) { - uiDialog.resizable('option', 'maxHeight', value); + var isDraggable = uiDialog.is( ":data(draggable)" ) + if ( isDraggable && !value ) { + uiDialog.draggable( "destroy" ); } - resize = true; - break; - case "maxWidth": - if (isResizable) { - uiDialog.resizable('option', 'maxWidth', value); - } - resize = true; - break; - case "minHeight": - if (isResizable) { - uiDialog.resizable('option', 'minHeight', value); + + if ( !isDraggable && value ) { + self._makeDraggable(); } - resize = true; - break; - case "minWidth": - if (isResizable) { - uiDialog.resizable('option', 'minWidth', value); - } - resize = true; break; case "position": self._position(value); break; case "resizable": // currently resizable, becoming non-resizable + var isResizable = uiDialog.is( ":data(resizable)" ) if (isResizable && !value) { uiDialog.resizable('destroy'); } @@ -602,15 +621,9 @@ $.widget("ui.dialog", { // convert whatever was passed in o a string, for html() to not throw up $(".ui-dialog-title", self.uiDialogTitlebar).html("" + (value || ' ')); break; - case "width": - resize = true; - break; } $.Widget.prototype._setOption.apply(self, arguments); - if (resize) { - self._size(); - } }, _size: function() { @@ -643,7 +656,8 @@ $.widget("ui.dialog", { this.element .css(options.height === 'auto' ? { minHeight: Math.max(options.minHeight - nonContentHeight, 0), - height: 'auto' + height: $.support.minHeight ? 'auto' : + Math.max(options.minHeight - nonContentHeight, 0) } : { minHeight: 0, height: Math.max(options.height - nonContentHeight, 0) @@ -693,7 +707,10 @@ $.extend($.ui.dialog.overlay, { if ($.ui.dialog.overlay.instances.length) { $(document).bind($.ui.dialog.overlay.events, function(event) { // stop events if the z-index of the target is < the z-index of the overlay - return ($(event.target).zIndex() >= $.ui.dialog.overlay.maxZ); + // we cannot return true when we don't want to cancel the event (#3523) + if ($(event.target).zIndex() < $.ui.dialog.overlay.maxZ) { + return false; + } }); } }, 1); diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 50ef23d5a..aa9881cff 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -12,9 +12,8 @@ $.ui = $.ui || {}; var horizontalPositions = /left|center|right/, - horizontalDefault = "center", verticalPositions = /top|center|bottom/, - verticalDefault = "center", + center = "center", _position = $.fn.position, _offset = $.fn.offset; @@ -27,21 +26,22 @@ $.fn.position = function( options ) { options = $.extend( {}, options ); var target = $( options.of ), + targetElem = target[0], collision = ( options.collision || "flip" ).split( " " ), offset = options.offset ? options.offset.split( " " ) : [ 0, 0 ], targetWidth, targetHeight, basePosition; - if ( options.of.nodeType === 9 ) { + if ( targetElem.nodeType === 9 ) { targetWidth = target.width(); targetHeight = target.height(); basePosition = { top: 0, left: 0 }; - } else if ( options.of.scrollTo && options.of.document ) { + } else if ( targetElem.scrollTo && targetElem.document ) { targetWidth = target.width(); targetHeight = target.height(); basePosition = { top: target.scrollTop(), left: target.scrollLeft() }; - } else if ( options.of.preventDefault ) { + } else if ( targetElem.preventDefault ) { // force left top to allow flipping options.at = "left top"; targetWidth = targetHeight = 0; @@ -58,13 +58,13 @@ $.fn.position = function( options ) { var pos = ( options[this] || "" ).split( " " ); if ( pos.length === 1) { pos = horizontalPositions.test( pos[0] ) ? - pos.concat( [verticalDefault] ) : + pos.concat( [center] ) : verticalPositions.test( pos[0] ) ? - [ horizontalDefault ].concat( pos ) : - [ horizontalDefault, verticalDefault ]; + [ center ].concat( pos ) : + [ center, center ]; } - pos[ 0 ] = horizontalPositions.test( pos[0] ) ? pos[ 0 ] : horizontalDefault; - pos[ 1 ] = verticalPositions.test( pos[1] ) ? pos[ 1 ] : verticalDefault; + pos[ 0 ] = horizontalPositions.test( pos[0] ) ? pos[ 0 ] : center; + pos[ 1 ] = verticalPositions.test( pos[1] ) ? pos[ 1 ] : center; options[ this ] = pos; }); @@ -82,13 +82,13 @@ $.fn.position = function( options ) { if ( options.at[0] === "right" ) { basePosition.left += targetWidth; - } else if (options.at[0] === horizontalDefault ) { + } else if (options.at[0] === center ) { basePosition.left += targetWidth / 2; } if ( options.at[1] === "bottom" ) { basePosition.top += targetHeight; - } else if ( options.at[1] === verticalDefault ) { + } else if ( options.at[1] === center ) { basePosition.top += targetHeight / 2; } @@ -99,17 +99,24 @@ $.fn.position = function( options ) { var elem = $( this ), elemWidth = elem.outerWidth(), elemHeight = elem.outerHeight(), - position = $.extend( {}, basePosition ); + marginLeft = parseInt( $.curCSS( this, "marginLeft", true ) ) || 0, + marginTop = parseInt( $.curCSS( this, "marginTop", true ) ) || 0, + collisionWidth = elemWidth + marginLeft + + parseInt( $.curCSS( this, "marginRight", true ) ) || 0, + collisionHeight = elemHeight + marginTop + + parseInt( $.curCSS( this, "marginBottom", true ) ) || 0, + position = $.extend( {}, basePosition ), + collisionPosition; if ( options.my[0] === "right" ) { position.left -= elemWidth; - } else if ( options.my[0] === horizontalDefault ) { + } else if ( options.my[0] === center ) { position.left -= elemWidth / 2; } if ( options.my[1] === "bottom" ) { position.top -= elemHeight; - } else if ( options.my[1] === verticalDefault ) { + } else if ( options.my[1] === center ) { position.top -= elemHeight / 2; } @@ -117,6 +124,11 @@ $.fn.position = function( options ) { position.left = parseInt( position.left ); position.top = parseInt( position.top ); + collisionPosition = { + left: position.left - marginLeft, + top: position.top - marginTop + }; + $.each( [ "left", "top" ], function( i, dir ) { if ( $.ui.position[ collision[i] ] ) { $.ui.position[ collision[i] ][ dir ]( position, { @@ -124,6 +136,9 @@ $.fn.position = function( options ) { targetHeight: targetHeight, elemWidth: elemWidth, elemHeight: elemHeight, + collisionPosition: collisionPosition, + collisionWidth: collisionWidth, + collisionHeight: collisionHeight, offset: offset, my: options.my, at: options.at @@ -142,41 +157,44 @@ $.ui.position = { fit: { left: function( position, data ) { var win = $( window ), - over = position.left + data.elemWidth - win.width() - win.scrollLeft(); - position.left = over > 0 ? position.left - over : Math.max( 0, position.left ); + over = data.collisionPosition.left + data.collisionWidth - win.width() - win.scrollLeft(); + position.left = over > 0 ? position.left - over : Math.max( position.left - data.collisionPosition.left, position.left ); }, top: function( position, data ) { var win = $( window ), - over = position.top + data.elemHeight - win.height() - win.scrollTop(); - position.top = over > 0 ? position.top - over : Math.max( 0, position.top ); + over = data.collisionPosition.top + data.collisionHeight - win.height() - win.scrollTop(); + position.top = over > 0 ? position.top - over : Math.max( position.top - data.collisionPosition.top, position.top ); } }, flip: { left: function( position, data ) { - if ( data.at[0] === "center" ) { + if ( data.at[0] === center ) { return; } var win = $( window ), - over = position.left + data.elemWidth - win.width() - win.scrollLeft(), + over = data.collisionPosition.left + data.collisionWidth - win.width() - win.scrollLeft(), myOffset = data.my[ 0 ] === "left" ? -data.elemWidth : data.my[ 0 ] === "right" ? data.elemWidth : 0, + atOffset = data.at[ 0 ] === "left" ? + data.targetWidth : + -data.targetWidth, offset = -2 * data.offset[ 0 ]; - position.left += position.left < 0 ? - myOffset + data.targetWidth + offset : + position.left += data.collisionPosition.left < 0 ? + myOffset + atOffset + offset : over > 0 ? - myOffset - data.targetWidth + offset : + myOffset + atOffset + offset : 0; }, top: function( position, data ) { - if ( data.at[1] === "center" ) { + if ( data.at[1] === center ) { return; } var win = $( window ), - over = position.top + data.elemHeight - win.height() - win.scrollTop(), + over = data.collisionPosition.top + data.collisionHeight - win.height() - win.scrollTop(), myOffset = data.my[ 1 ] === "top" ? -data.elemHeight : data.my[ 1 ] === "bottom" ? @@ -186,8 +204,8 @@ $.ui.position = { data.targetHeight : -data.targetHeight, offset = -2 * data.offset[ 1 ]; - position.top += position.top < 0 ? - myOffset + data.targetHeight + offset : + position.top += data.collisionPosition.top < 0 ? + myOffset + atOffset + offset : over > 0 ? myOffset + atOffset + offset : 0; diff --git a/ui/jquery.ui.progressbar.js b/ui/jquery.ui.progressbar.js index e0b728f1a..5347e026b 100644 --- a/ui/jquery.ui.progressbar.js +++ b/ui/jquery.ui.progressbar.js @@ -64,6 +64,9 @@ $.widget( "ui.progressbar", { this.options.value = value; this._refreshValue(); this._trigger( "change" ); + if ( this._value() === this.max ) { + this._trigger( "complete" ); + } } $.Widget.prototype._setOption.apply( this, arguments ); diff --git a/ui/jquery.ui.resizable.js b/ui/jquery.ui.resizable.js index 59a977b74..a835ef9a8 100644 --- a/ui/jquery.ui.resizable.js +++ b/ui/jquery.ui.resizable.js @@ -595,7 +595,7 @@ $.ui.plugin.add("resizable", "alsoResize", { // reset position for Opera - no need to verify it was changed el.css({ position: el.data("resizable-alsoresize").position }); }); - } + }; if (self._revertToRelativePosition) { self._revertToRelativePosition = false; diff --git a/ui/jquery.ui.tabs.js b/ui/jquery.ui.tabs.js index 62cae726e..7f7a631ee 100644 --- a/ui/jquery.ui.tabs.js +++ b/ui/jquery.ui.tabs.js @@ -63,7 +63,7 @@ $.widget( "ui.tabs", { }, _tabId: function( a ) { - return a.title && a.title.replace( /\s/g, "_" ).replace( /[^A-Za-z0-9\-_:\.]/g, "" ) || + return a.title && a.title.replace( /\s/g, "_" ).replace( /[^\w\u00c0-\uFFFF-]/g, "" ) || this.options.idPrefix + getNextTabId(); }, @@ -103,7 +103,7 @@ $.widget( "ui.tabs", { fragmentId = /^#.+/; // Safari 2 reports '#' for an empty hash this.list = this.element.find( "ol,ul" ).eq( 0 ); - this.lis = $( "li:has(a[href])", this.list ); + this.lis = $( " > li:has(a[href])", this.list ); this.anchors = this.lis.map(function() { return $( "a", this )[ 0 ]; }); @@ -129,7 +129,7 @@ $.widget( "ui.tabs", { self.panels = self.panels.add( self._sanitizeSelector( href ) ); // remote tab // prevent loading the page itself if href is just "#" - } else if ( href !== "#" ) { + } else if ( href && href !== "#" ) { // required for restore on destroy $.data( a, "href.tabs", href ); @@ -346,6 +346,7 @@ $.widget( "ui.tabs", { if ( ( $li.hasClass( "ui-tabs-selected" ) && !o.collapsible) || $li.hasClass( "ui-state-disabled" ) || $li.hasClass( "ui-state-processing" ) || + self.panels.filter( ":animated" ).length || self._trigger( "select", null, self._ui( this, $show[ 0 ] ) ) === false ) { this.blur(); return false; @@ -603,7 +604,7 @@ $.widget( "ui.tabs", { return this; }, - load: function( index ) { + load: function( index ) { index = this._getIndex( index ); var self = this, o = this.options, diff --git a/ui/jquery.ui.widget.js b/ui/jquery.ui.widget.js index e21287ae0..866f7441e 100644 --- a/ui/jquery.ui.widget.js +++ b/ui/jquery.ui.widget.js @@ -9,20 +9,30 @@ */ (function( $, undefined ) { -var _remove = $.fn.remove; - -$.fn.remove = function( selector, keepData ) { - return this.each(function() { - if ( !keepData ) { - if ( !selector || $.filter( selector, [ this ] ).length ) { - $( "*", this ).add( [ this ] ).each(function() { - $( this ).triggerHandler( "remove" ); - }); - } +// jQuery 1.4+ +if ( $.cleanData ) { + var _cleanData = $.cleanData; + $.cleanData = function( elems ) { + for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) { + $( elem ).triggerHandler( "remove" ); } - return _remove.call( $(this), selector, keepData ); - }); -}; + _cleanData( elems ); + }; +} else { + var _remove = $.fn.remove; + $.fn.remove = function( selector, keepData ) { + return this.each(function() { + if ( !keepData ) { + if ( !selector || $.filter( selector, [ this ] ).length ) { + $( "*", this ).add( [ this ] ).each(function() { + $( this ).triggerHandler( "remove" ); + }); + } + } + return _remove.call( $(this), selector, keepData ); + }); + }; +} $.widget = function( name, base, prototype ) { var namespace = name.split( "." )[ 0 ], @@ -80,16 +90,21 @@ $.widget.bridge = function( name, object ) { options; // prevent calls to internal methods - if ( isMethodCall && options.substring( 0, 1 ) === "_" ) { + if ( isMethodCall && options.charAt( 0 ) === "_" ) { return returnValue; } if ( isMethodCall ) { this.each(function() { - var instance = $.data( this, name ), - methodValue = instance && $.isFunction( instance[options] ) ? - instance[ options ].apply( instance, args ) : - instance; + var instance = $.data( this, name ); + if ( !instance ) { + throw "cannot call methods on " + name + " prior to initialization; " + + "attempted to call method '" + options + "'"; + } + if ( !$.isFunction( instance[options] ) ) { + throw "no such method '" + options + "' for " + name + " widget instance"; + } + var methodValue = instance[ options ].apply( instance, args ); if ( methodValue !== instance && methodValue !== undefined ) { returnValue = methodValue; return false; @@ -99,10 +114,7 @@ $.widget.bridge = function( name, object ) { this.each(function() { var instance = $.data( this, name ); if ( instance ) { - if ( options ) { - instance.option( options ); - } - instance._init(); + instance.option( options || {} )._init(); } else { $.data( this, name, new object( options, this ) ); } @@ -164,12 +176,11 @@ $.Widget.prototype = { }, option: function( key, value ) { - var options = key, - self = this; + var options = key; if ( arguments.length === 0 ) { // don't return a reference to the internal hash - return $.extend( {}, self.options ); + return $.extend( {}, this.options ); } if (typeof key === "string" ) { @@ -180,11 +191,17 @@ $.Widget.prototype = { options[ key ] = value; } + this._setOptions( options ); + + return this; + }, + _setOptions: function( options ) { + var self = this; $.each( options, function( key, value ) { self._setOption( key, value ); }); - return self; + return this; }, _setOption: function( key, value ) { this.options[ key ] = value; diff --git a/version.txt b/version.txt index 21441b706..13c1a7371 100644 --- a/version.txt +++ b/version.txt @@ -1 +1 @@ -1.9pre
\ No newline at end of file +1.9pre |