RubyGems - alchemy - Versions diffs - 1.0.0 - Mend

alchemy 1.0.0

Files changed (620) hide show

data/vendor/assets/javascripts/alchemy/jquery-ui-1.8.11.custom/development-bundle/demos/position/cycler.html ADDED Viewed

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Position - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.5.1.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>
+	$(function() {
+		$.fn.position2 = function( options ) {
+			return this.position( $.extend({
+				of: window,
+				using: function( to ) {
+					$( this ).css({
+						top: to.top,
+						left: to.left
+					})
+				},
+				collision: "none"
+			}, options));
+		}
+		$.fn.left = function( using ) {
+			return this.position2({
+				my: "right middle",
+				at: "left middle",
+				offset: "25 0",
+				using: using
+			});
+		}
+		$.fn.right = function( using ) {
+			return this.position2({
+				my: "left middle",
+				at: "right middle",
+				offset: "-25 0",
+				using: 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({
+			overflow: "hidden"
+		})
+		$( ".demo" ).css({
+			position: "relative",
+		});
+		$( ".demo img" ).css({
+			position: "absolute",
+		});
+		function animate( to ) {
+			$(this).animate( to );
+		}
+		function next() {
+			$( "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" );
+		}
+		$( "#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 );
+		});
+	});
+	</script>
+</head>
+<body>
+<div class="demo">
+<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><!-- End demo -->
+<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>
+</html>

data/vendor/assets/javascripts/alchemy/jquery-ui-1.8.11.custom/development-bundle/demos/position/default.html ADDED Viewed

@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Position - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.5.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>
+	<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;
+		position: absolute;
+		display: block;
+		right: 0;
+		bottom: 0;
+		background-color: #bcd5e6;
+		text-align: center;
+	}
+	select, input {
+		margin-left: 15px;
+	}
+	</style>
+	<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(),
+				using: using,
+				collision: $( "#collision_horizontal" ).val() + ' ' + $( "#collision_vertical" ).val()
+			});
+		}
+		$( ".positionable" ).css( "opacity", 0.5 );
+		$( ":input" ).bind( "click keyup change", function() { position(); });
+		$( "#parent" ).draggable({
+			drag: function() { position(); }
+		});
+		$( ".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 ) );
+					position();
+				});
+			}
+		});
+		position();
+	});
+	</script>
+</head>
+<body>
+<div class="demo">
+<div id="parent">
+	<p>
+	This is the position parent element.
+	</p>
+</div>
+<div class="positionable">
+	<p>
+	to position
+	</p>
+</div>
+<div class="positionable" style="width:120px; height: 40px;">
+	<p>
+	to position 2
+	</p>
+</div>
+<div style="padding: 20px; margin-top: 75px;">
+	position...
+	<div style="padding-bottom: 20px;">
+		<b>my:</b>
+		<select id="my_horizontal">
+			<option value="left">left</option>
+			<option value="center">center</option>
+			<option value="right">right</option>
+		</select>
+		<select id="my_vertical">
+			<option value="top">top</option>
+			<option value="middle">center</option>
+			<option value="bottom">bottom</option>
+		</select>
+	</div>
+	<div style="padding-bottom: 20px;">
+		<b>at:</b>
+		<select id="at_horizontal">
+			<option value="left">left</option>
+			<option value="center">center</option>
+			<option value="right">right</option>
+		</select>
+		<select id="at_vertical">
+			<option value="top">top</option>
+			<option value="middle">center</option>
+			<option value="bottom">bottom</option>
+		</select>
+	</div>
+	<div style="padding-bottom: 20px;">
+		<b>offset:</b>
+		<input id="offset" type="text" size="15"/>
+	</div>
+	<div style="padding-bottom: 20px;">
+		<b>collision:</b>
+		<select id="collision_horizontal">
+			<option value="flip">flip</option>
+			<option value="fit">fit</option>
+			<option value="none">none</option>
+		</select>
+		<select id="collision_vertical">
+			<option value="flip">flip</option>
+			<option value="fit">fit</option>
+			<option value="none">none</option>
+		</select>
+	</div>
+</div>
+</div><!-- End demo -->
+<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>
+</html>

data/vendor/assets/javascripts/alchemy/jquery-ui-1.8.11.custom/development-bundle/demos/position/images/earth.jpg ADDED Viewed

Binary file

data/vendor/assets/javascripts/alchemy/jquery-ui-1.8.11.custom/development-bundle/demos/position/images/flight.jpg ADDED Viewed

Binary file

data/vendor/assets/javascripts/alchemy/jquery-ui-1.8.11.custom/development-bundle/demos/position/images/rocket.jpg ADDED Viewed

Binary file

data/vendor/assets/javascripts/alchemy/jquery-ui-1.8.11.custom/development-bundle/demos/position/index.html ADDED Viewed

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Position Demo</title>
+	<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="cycler.html">Cycling images</a></li>
+	</ul>
+</div>
+</body>
+</html>

data/vendor/assets/javascripts/alchemy/jquery-ui-1.8.11.custom/development-bundle/demos/progressbar/animated.html ADDED Viewed

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Progressbar - Animated</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.5.1.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>
+	$(function() {
+		$( "#progressbar" ).progressbar({
+			value: 59
+		});
+	});
+	</script>
+</head>
+<body>
+<div class="demo">
+<div id="progressbar"></div>
+</div><!-- End demo -->
+<div class="demo-description">
+<p>
+This progressbar has an animated fill by setting the
+<code>background-image</code>
+on the
+<code>.ui-progressbar-value</code>
+element, using css.
+</p>
+</div><!-- End demo-description -->
+</body>
+</html>

data/vendor/assets/javascripts/alchemy/jquery-ui-1.8.11.custom/development-bundle/demos/progressbar/default.html ADDED Viewed

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Progressbar - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.5.1.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({
+			value: 37
+		});
+	});
+	</script>
+</head>
+<body>
+<div class="demo">
+<div id="progressbar"></div>
+</div><!-- End demo -->
+<div class="demo-description">
+<p>Default determinate progress bar.</p>
+</div><!-- End demo-description -->
+</body>
+</html>

data/vendor/assets/javascripts/alchemy/jquery-ui-1.8.11.custom/development-bundle/demos/progressbar/images/pbar-ani.gif ADDED Viewed

Binary file

data/vendor/assets/javascripts/alchemy/jquery-ui-1.8.11.custom/development-bundle/demos/progressbar/index.html ADDED Viewed

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Progressbar Demos</title>
+	<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="animated.html">Animated</a></li>
+		<li><a href="resize.html">Resizable progressbar</a></li>
+	</ul>
+</div>
+</body>
+</html>

data/vendor/assets/javascripts/alchemy/jquery-ui-1.8.11.custom/development-bundle/demos/progressbar/resize.html ADDED Viewed

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Progressbar - Resizable</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.5.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.progressbar.js"></script>
+	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#progressbar" ).progressbar({
+			value: 37
+		});
+		$( "#progressbarWrapper" ).resizable();
+	});
+	</script>
+</head>
+<body>
+<div class="demo">
+<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><!-- End demo-description -->
+</body>
+</html>