r3210 committed - labs: added 5 more projects to labs
Revision: 3210
Author: paul.bakaus
Date: Sat Sep 12 11:07:28 2009
Log: labs: added 5 more projects to labs
http://code.google.com/p/jquery-ui/source/detail?r=3210
Added:
/branches/labs/3dcarousel
/branches/labs/3dcarousel/index.html
/branches/labs/fastSortable
/branches/labs/fastSortable/demo
/branches/labs/fastSortable/demo/index.html
/branches/labs/fastSortable/demo/pic.jpg
/branches/labs/fastSortable/jquery-1.2.6.js
/branches/labs/fastSortable/ui.core.js
/branches/labs/fastSortable/ui.fastSortable.js
/branches/labs/fastSortable/ui.sortable.js
/branches/labs/fastSortable/ui.sortable.old.js
/branches/labs/showthrough
/branches/labs/showthrough/index.html
/branches/labs/simulate
/branches/labs/simulate/demos
/branches/labs/simulate/demos/record
/branches/labs/simulate/demos/record/images
/branches/labs/simulate/demos/record/images/cursor.png
/branches/labs/simulate/demos/record/images/transparent.gif
/branches/labs/simulate/demos/record/index.html
/branches/labs/simulate/jquery.simulate.js
/branches/labs/simulate/jquery.simulate.live.js
/branches/labs/simulate/jquery.simulate.typing.js
/branches/labs/texturize
/branches/labs/texturize/index.html
/branches/labs/uberplayer
/branches/labs/uberplayer/css
/branches/labs/uberplayer/css/main.css
/branches/labs/uberplayer/css/ui
/branches/labs/uberplayer/css/ui/images
/branches/labs/uberplayer/css/ui/images/ui-bg_flat_0_aaaaaa_40x100.png
/branches/labs/uberplayer/css/ui/images/ui-bg_flat_75_ffffff_40x100.png
/branches/labs/uberplayer/css/ui/images/ui-bg_glass_55_fbf9ee_1x400.png
/branches/labs/uberplayer/css/ui/images/ui-bg_glass_65_ffffff_1x400.png
/branches/labs/uberplayer/css/ui/images/ui-bg_glass_75_dadada_1x400.png
/branches/labs/uberplayer/css/ui/images/ui-bg_glass_75_e6e6e6_1x400.png
/branches/labs/uberplayer/css/ui/images/ui-bg_glass_95_fef1ec_1x400.png
/branches/labs/uberplayer/css/ui/images/ui-bg_highlight-soft_75_cccccc_1x100.png
/branches/labs/uberplayer/css/ui/images/ui-icons_222222_256x240.png
/branches/labs/uberplayer/css/ui/images/ui-icons_2e83ff_256x240.png
/branches/labs/uberplayer/css/ui/images/ui-icons_454545_256x240.png
/branches/labs/uberplayer/css/ui/images/ui-icons_888888_256x240.png
/branches/labs/uberplayer/css/ui/images/ui-icons_cd0a0a_256x240.png
/branches/labs/uberplayer/css/ui/ui.core.css
/branches/labs/uberplayer/css/ui/ui.slider.css
/branches/labs/uberplayer/css/ui/ui.theme.css
/branches/labs/uberplayer/img
/branches/labs/uberplayer/img/footer_bg_left.png
/branches/labs/uberplayer/img/footer_bg_middle.png
/branches/labs/uberplayer/img/footer_bg_right.png
/branches/labs/uberplayer/img/header_bg.png
/branches/labs/uberplayer/img/next.png
/branches/labs/uberplayer/img/pause.png
/branches/labs/uberplayer/img/prev.png
/branches/labs/uberplayer/index.html
/branches/labs/uberplayer/js
/branches/labs/uberplayer/js/external
/branches/labs/uberplayer/js/external/ui.core.js
/branches/labs/uberplayer/js/external/ui.coverflow.js
/branches/labs/uberplayer/js/external/ui.slider.js
/branches/labs/uberplayer/js/main.js
/branches/labs/uberplayer/js/player.js
Modified:
/branches/labs/index.html
=======================================
--- /dev/null
+++ /branches/labs/3dcarousel/index.html Sat Sep 12 11:07:28 2009
@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>The Ubercarousel</title>
+
+ <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
+<script type="text/javascript"
src="../../jqueryui/source/trunk/jquery-1.3.2.js"></script>
+
+ <style type="text/css" media="screen">
+
+ html, body {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ }
+
+ body {
+ background-color: black; color: white;
+ font-family: 'Lucida Grande', Verdana, Arial; font-size: 12px;
+ background-image: -webkit-gradient(radial,
+ 50% 500, 1,
+ 50% 500, 400,
+ from(rgba(255, 255, 255, 0.3)),
+ to(rgba(255, 255, 255, 0)));
+ background-repeat: no-repeat;
+ }
+
+ #control {
+ background: rgba(255,255,255, 0.3);
+ margin: 20px; padding: 10px; -webkit-border-radius: 10px;
+ position: absolute; top: 0; right: 0; z-index: 1;
+ }
+
+ #container {
+ width: 100%; height: 100%;
+ -webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave
off the units here */
+ -webkit-perspective-origin: 50% 125px;
+ }
+
+ #shape {
+ font-size: 100px; /* This controls the overall image size */
+ position: absolute; top: 50%; left: 50%;
+ margin-left: -0.5em; margin-top: -1em;
+ height: 1em; width: 1em;
+
+ -webkit-transform-style: preserve-3d;
+ -webkit-animation: spin 24s infinite linear;
+ }
+
+ #shape > * {
+ position: absolute; top: 0; left: 0;
+ height: 1em; width: 1em;
+ -webkit-transform-style: preserve-3d;
+ display: table;
+ }
+
+ #shape div.frame {
+ height: 1em; width: 1em;
+ display: table-cell; vertical-align: middle;
+ -webkit-transition: all 0.5s ease;
+ -webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left
bottom, from(transparent), color-stop(0.5, transparent), to(white));
+ }
+
+ #shape.normal div.frame:hover {
+ -webkit-transform: scale(2) translateZ(1em);
+ /* -webkit-transform: scale(2) translateZ(1em) rotate(360deg); /*
batmaaaaan! */
+ }
+
+ #shape img {
+ max-width: 100%; max-height: 100%;
+ display: block; margin: 0 auto;
+ -webkit-transform: translateZ(0px); /* weird enough, this is needed or
the images are blurry */
+ }
+
+ /* wobbling */
+
+ #shape.wobble div.frame {
+ -webkit-box-reflect: none;
+ }
+
+ #shape.wobble img {
+ -webkit-animation: radiusWobble 6s infinite linear;
+ -webkit-animation-timing-function: ease-in-out;
+ }
+
+ /* debug */
+
+ #shape.debug {
+ border: 1px solid red;
+ }
+
+ #shape.debug div.frame {
+ background: rgba(255,0,0, 0.3);
+ }
+
+ /* animation definitions */
+
+ @-webkit-keyframes spin {
+ from { -webkit-transform: rotateY(0); }
+ to { -webkit-transform: rotateY(-360deg); }
+ }
+
+ @-webkit-keyframes radiusWobble {
+ 0% { -webkit-transform: translateZ(0px); opacity: 1; }
+ 50% { -webkit-transform: translateZ(200px); opacity: .1; }
+ 100% { -webkit-transform: translateZ(0px); opacity: 1; }
+ }
+
+ </style>
+ <script type="text/javascript" charset="utf-8">
+
+
+ function updateImages(num) {
+
+ $('#shape > *').each(function(i) {
+ $(this).css({
+ webkitTransform: 'rotateY('+((360 / num) * (i+1))+'deg)
translateZ(380px)',
+ display: (i+1) > num ? 'none' : 'table'
+ });
+ });
+
+ };
+
+ function updateImageSize(num) {
+ $('#shape').css('font-size', (num*2)+'px');
+ };
+
+ $(document).ready(function() {
+
+ $('#debug').click(function() {
+ $('#shape').toggleClass('debug');
+ });
+
+ $('#wobble').click(function() {
+ $('#shape').toggleClass('wobble').toggleClass('normal');
+ });
+
+ $('#pics').bind('change', function(e) {
+ updateImages(parseInt(this.value));
+ });
+
+ $('#size').bind('change', function(e) {
+ updateImageSize(parseInt(this.value));
+ });
+
+
$.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20flickr.photos.interestingness("+100+")&format=json&callback=?",
function(data) {
+
+ var photos = data.query.results.photo;
+ for (var i=0; i < photos.length; i++) {
+
+ $('<div><div class="frame"><img
src="http://farm'+photos[i].farm+'.static.flickr.com/'+photos[i].server+'/'+photos[i].id+'_'+photos[i].secret+'.jpg"></div></div>')
+ .appendTo('#shape')
+ .css({
+ webkitTransform: 'rotateY('+((360 / 15) * (i+1))+'deg)
translateZ(380px)',
+ display: (i+1) > 15 ? 'none' : 'table'
+ });
+
+ };
+
+ });
+
+ var windowHeight = $(window).height(),
+ windowWidth = $(window).width();
+
+ $(window).bind('mousemove', function(e) {
+ $('#container').css('webkitPerspectiveOrigin', '50% '+(50 +
(1-((windowHeight - e.pageY) / windowHeight))*400)+'px');
+ //$('#shape').css('webkitAnimation', 'spin '+((1-((windowWidth -
e.pageX) / windowWidth)) * 16)+'s infinite linear');
+ });
+
+ });
+
+ </script>
+</head>
+<body>
+
+<div id="control">
+
+
+ <input type="checkbox" name="debug" id="debug"><label for="debug">Enable
debug lines</label>
+ <input type="checkbox" name="wobble" id="wobble"><label
for="wobble">Enable wobbling<sub>experimental, disables
hovering+gradient</sub></label>
+
+
+
+ <input type="range" name="pics" id="pics" value="15" /><label
for="pics">Number of pictures</label>
+
+
+ <input type="range" name="size" id="size" /><label for="size">Picture
size</label>
+
+
+</div>
+
+<div id="container">
+ <div id="shape" class="normal">
+ </div>
+</div>
+
+</body>
+</html>
=======================================
--- /dev/null
+++ /branches/labs/fastSortable/demo/index.html Sat Sep 12 11:07:28 2009
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+ <title>Sortable boxes</title>
+
+ <style type="text/css" media="screen">
+
+ #sortable {
+ border: 2px solid #bbb;
+ width: 1200px;
+ height: 2000px;
+ }
+
+ #sortable div {
+ background: #999;
+ width: 50px;
+ height: 50px;
+ margin: 5px;
+ float: left;
+ }
+
+ #sortable div.sorting {
+ visibility: hidden;
+ }
+
+ </style>
+
+ <script type="text/javascript" src="../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../ui.core.js"></script>
+ <script type="text/javascript" src="../ui.sortable.js"></script>
+ <script type="text/javascript" src="../ui.fastSortable.js"></script>
+
+ <script type="text/javascript">
+ $(document).ready(function() {
+
+ var html = '';
+ for (var i=0; i < 2000; i++) {
+ html += '<div>'+i+'</div>';
+ };
+
+ //$('#sortable').html(html).sortable();
+ $('#sortable').html(html).fastSortable();
+
+ });
+ </script>
+
+
+ </head>
+ <body style='margin: 0; padding: 0;'>
+
+ <div id='sortable'>
+ </div>
+
+ </body>
+</html>
=======================================
--- /dev/null
+++ /branches/labs/fastSortable/demo/pic.jpg Sat Sep 12 11:07:28 2009
Binary file, no diff available.
=======================================
--- /dev/null
+++ /branches/labs/fastSortable/jquery-1.2.6.js Sat Sep 12 11:07:28 2009
@@ -0,0 +1,3549 @@
+(function(){
+/*
+ * jQuery 1.2.6 - New Wave Javascript
+ *
+ * Copyright (c) 2008 John Resig (jquery.com)
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * and GPL (GPL-LICENSE.txt) licenses.
+ *
+ * $Date: 2008-05-24 14:22:17 -0400 (Sat, 24 May 2008) $
+ * $Rev: 5685 $
+ */
+
+// Map over jQuery in case of overwrite
+var _jQuery = window.jQuery,
+// Map over the $ in case of overwrite
+ _$ = window.$;
+
+var jQuery = window.jQuery = window.$ = function( selector, context ) {
+ // The jQuery object is actually just the init constructor 'enhanced'
+ return new jQuery.fn.init( selector, context );
+};
+
+// A simple way to check for HTML strings or ID strings
+// (both of which we optimize for)
+var quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#(\w+)$/,
+
+// Is it a simple selector
+ isSimple = /^.[^:#\[\.]*$/,
+
+// Will speed up references to undefined, and allows munging its name.
+ undefined;
+
+jQuery.fn = jQuery.prototype = {
+ init: function( selector, context ) {
+ // Make sure that a selection was provided
+ selector = selector || document;
+
+ // Handle $(DOMElement)
+ if ( selector.nodeType ) {
+ this[0] = selector;
+ this.length = 1;
+ return this;
+ }
+ // Handle HTML strings
+ if ( typeof selector == "string" ) {
+ // Are we dealing with HTML string or an ID?
+ var match = quickExpr.exec( selector );
+
+ // Verify a match, and that no context was specified for #id
+ if ( match && (match[1] || !context) ) {
+
+ // HANDLE: $(html) -> $(array)
+ if ( match[1] )
+ selector = jQuery.clean( [ match[1] ], context );
+
+ // HANDLE: $("#id")
+ else {
+ var elem = document.getElementById( match[3] );
+
+ // Make sure an element was located
+ if ( elem ){
+ // Handle the case where IE and Opera return items
+ // by name instead of ID
+ if ( elem.id != match[3] )
+ return jQuery().find( selector );
+
+ // Otherwise, we inject the element directly into the jQuery object
+ return jQuery( elem );
+ }
+ selector = [];
+ }
+
+ // HANDLE: $(expr, [context])
+ // (which is just equivalent to: $(content).find(expr)
+ } else
+ return jQuery( context ).find( selector );
+
+ // HANDLE: $(function)
+ // Shortcut for document ready
+ } else if ( jQuery.isFunction( selector ) )
+ return jQuery( document )[ jQuery.fn.ready ? "ready" : "load" ](
selector );
+
+ return this.setArray(jQuery.makeArray(selector));
+ },
+
+ // The current version of jQuery being used
+ jquery: "1.2.6",
+
+ // The number of elements contained in the matched element set
+ size: function() {
+ return this.length;
+ },
+
+ // The number of elements contained in the matched element set
+ length: 0,
+
+ // Get the Nth element in the matched element set OR
+ // Get the whole matched element set as a clean array
+ get: function( num ) {
+ return num == undefined ?
+
+ // Return a 'clean' array
+ jQuery.makeArray( this ) :
+
+ // Return just the object
+ this[ num ];
+ },
+
+ // Take an array of elements and push it onto the stack
+ // (returning the new matched element set)
+ pushStack: function( elems ) {
+ // Build a new jQuery matched element set
+ var ret = jQuery( elems );
+
+ // Add the old object onto the stack (as a reference)
+ ret.prevObject = this;
+
+ // Return the newly-formed element set
+ return ret;
+ },
+
+ // Force the current matched set of elements to become
+ // the specified array of elements (destroying the stack in the process)
+ // You should use pushStack() in order to do this, but maintain the stack
+ setArray: function( elems ) {
+ // Resetting the length to 0, then using the native Array push
+ // is a super-fast way to populate an object with array-like properties
+ this.length = 0;
+ Array.prototype.push.apply( this, elems );
+
+ return this;
+ },
+
+ // Execute a callback for every element in the matched set.
+ // (You can seed the arguments with an array of args, but this is
+ // only used internally.)
+ each: function( callback, args ) {
+ return jQuery.each( this, callback, args );
+ },
+
+ // Determine the position of an element within
+ // the matched set of elements
+ index: function( elem ) {
+ var ret = -1;
+
+ // Locate the position of the desired element
+ return jQuery.inArray(
+ // If it receives a jQuery object, the first element is used
+ elem && elem.jquery ? elem[0] : elem
+ , this );
+ },
+
+ attr: function( name, value, type ) {
+ var options = name;
+
+ // Look for the case where we're accessing a style value
+ if ( name.constructor == String )
+ if ( value === undefined )
+ return this[0] && jQuery[ type || "attr" ]( this[0], name );
+
+ else {
+ options = {};
+ options[ name ] = value;
+ }
+
+ // Check to see if we're setting style values
+ return this.each(function(i){
+ // Set all the styles
+ for ( name in options )
+ jQuery.attr(
+ type ?
+ this.style :
+ this,
+ name, jQuery.prop( this, options[ name ], type, i, name )
+ );
+ });
+ },
+
+ css: function( key, value ) {
+ // ignore negative width and height values
+ if ( (key == 'width' || key == 'height') && parseFloat(value) < 0 )
+ value = undefined;
+ return this.attr( key, value, "curCSS" );
+ },
+
+ text: function( text ) {
+ if ( typeof text != "object" && text != null )
+ return this.empty().append( (this[0] && this[0].ownerDocument ||
document).createTextNode( text ) );
+
+ var ret = "";
+
+ jQuery.each( text || this, function(){
+ jQuery.each( this.childNodes, function(){
+ if ( this.nodeType != 8 )
+ ret += this.nodeType != 1 ?
+ this.nodeValue :
+ jQuery.fn.text( [ this ] );
+ });
+ });
+
+ return ret;
+ },
+
+ wrapAll: function( html ) {
+ if ( this[0] )
+ // The elements to wrap the target around
+ jQuery( html, this[0].ownerDocument )
+ .clone()
+ .insertBefore( this[0] )
+ .map(function(){
+ var elem = this;
+
+ while ( elem.firstChild )
+ elem = elem.firstChild;
+
+ return elem;
+ })
+ .append(this);
+
+ return this;
+ },
+
+ wrapInner: function( html ) {
+ return this.each(function(){
+ jQuery( this ).contents().wrapAll( html );
+ });
+ },
+
+ wrap: function( html ) {
+ return this.each(function(){
+ jQuery( this ).wrapAll( html );
+ });
+ },
+
+ append: function() {
+ return this.domManip(arguments, true, false, function(elem){
+ if (this.nodeType == 1)
+ this.appendChild( elem );
+