Home › jQuery UI transfer effect example

jQuery UI transfer effect example 

James
Joined:
02/21/2009
Posts:
151

October 11, 2010 19:01:28    Last update: January 11, 2011 20:38:56
Test page (click the "new window" icon to see the transition):
  • Code
  • Demo
<!DOCTYPE html>
<html>
<head>
	<title>jQuery UI Transfer Effect</title>

	<link rel="stylesheet" type="text/css" media="all"
		href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/ui-lightness/jquery-ui.css"/>

	<script type="text/javascript" 
		src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
	</script>

	<script type="text/javascript" 
		src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js">
	</script>

	<style type="text/css">
		div {
			padding: 4px;
			border: #aaa 1px solid;
			width: 650px;
			margin-bottom: 5px;
		}

		.ui-effects-transfer {  /* style the transfer element */
			border: #AAA 1px solid;
		}

		ul {
			list-style: none outside none;
			background: none repeat scroll 0 0 transparent;
			outline: 0 none;
			border: 0 none;
			margin: 2px;
			padding: 0;
			vertical-align: baseline;
		}

		li {
			display: block;
			padding: 4px;
			height: 16px;
			width: 16px;
		}
		
		li a {
			outline: 0 none;
		}
	</style>

	<script type="text/javascript">
		$(function() {
			$('li').click(function() {
				if ($(this).data('collapsed')) {
					$('div').show('slow');
					$(this).data('collapsed', false);
				}
				else {
					$('div').effect('transfer', { to: $('li') }, 500).hide();
					$(this).data('collapsed', true);
				}
                                return false;
			});
		});
	</script>
</head>

<body>
	<ul>
		<li title="" class="ui-state-default ui-corner-all">
			<a href='#'><span class="ui-icon ui-icon-newwin"></span></a>
		</li>
	</ul>

	<div>
	<pre>
Reads some number of bytes from the input stream and stores them into the 
buffer array b. The number of bytes actually read is returned as an integer. 
This method blocks until input data is available, end of file is detected, 
or an exception is thrown.

If the length of b is zero, then no bytes are read and 0 is returned; 
otherwise, there is an attempt to read at least one byte. If no byte is 
available because the stream is at the end of the file, the value -1 is 
returned; otherwise, at least one byte is read and stored into b.

The first byte read is stored into element b[0], the next one into b[1], 
and so on. The number of bytes read is, at most, equal to the length of b. 
Let k be the number of bytes actually read; these bytes will be stored in 
elements b[0] through b[k-1], leaving elements b[k] through b[b.length-1] 
unaffected. 
	</pre>
	</div>
</body>
</html>
Share |
| Comment  | Tags