|
 |
| |
ผมมีตัวอย่างเว็บ น่าจะเป็น jQuery ครับให้พอดูให้ได้มั่งครับ ว่าผมจะทำไงดี |
| |
 |
|
|
 |
 |
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title>jQuery Quicksand plugin</title>
<!--[if IE 7]><link rel="stylesheet" href="styles/ie7.css" /><![endif]-->
<!-- DO NOT USE THESE FILES. they are compiled for fast http access -->
<!-- if you’re looking for source, download or read documentation -->
<link href="stylesheets/all.css?1354486200" media="screen" rel="stylesheet" type="text/css" />
<script src="javascripts/all.js?1356130973" type="text/javascript"></script>
<script src="javascripts/main.js?1355061933" type="text/javascript"></script>
</head>
<body class="index">
<div id="wrapper">
<div id="site">
<div id="title">
<h1>Quicksand<span></span></h1>
<p>Reorder and filter items with a nice shuffling animation.</p>
</div>
<!-- this isn’t part of the plugin, just a control for demo -->
<ul class="splitter"><li>Filter by type:<ul><li class="segment-1 selected-1"><a href="#" data-value="all">Everything</a></li><li class="segment-0"><a href="#" data-value="app">Applications</a></li><li class="segment-2"><a href="#" data-value="util">Utilities</a></li></ul></li><li>Sort by:<ul><li class="segment-1 selected-1"><a href="#" data-value="name">Name</a></li><li class="segment-2"><a href="#" data-value="size">Size</a></li></ul></li></ul>
<div class="demo">
<!-- read the documentation to understand what’s going on here -->
<ul id="list" class="image-grid" style="height: 600px !important;">
<li data-id="id-1" class="util">
<img width="128" height="128" src="images/activity-monitor.png?1354486198" />
<strong>Activity Monitor</strong>
<span>348 KB</span>
</li>
<li data-id="id-2" class="app">
<img width="128" height="128" src="images/address-book.png?1354486198" />
<strong>Address Book</strong><span>1904 KB</span>
</li>
<li data-id="id-3" class="app">
<img width="128" height="128" src="images/finder.png?1354486198" />
<strong>Finder</strong>
<span>1337 KB</span>
</li>
<li data-id="id-4" class="app">
<img width="128" height="128" src="images/front-row.png?1354486198" />
<strong>Front Row</strong>
<span>401 KB</span>
</li>
<li data-id="id-5" class="app">
<img width="128" height="128" src="images/google-pokemon.png?1354486198" />
<strong>Google Pokémon</strong>
<span>12875 KB</span>
</li>
<li data-id="id-6" class="app">
<img width="128" height="128" src="images/ical.png?1354486198" />
<strong>iCal</strong>
<span>5273 KB</span>
</li>
<li data-id="id-7" class="app">
<img width="128" height="128" src="images/ichat.png?1354486198" />
<strong>iChat</strong>
<span>5437 KB</span>
</li>
<li data-id="id-8" class="app">
<img width="128" height="128" src="images/interface-builder.png?1354486198" />
<strong>Interface Builder</strong>
<span>2764 KB</span>
</li>
<li data-id="id-9" class="app">
<img width="128" height="128" src="images/ituna.png?1354486198" />
<strong>iTuna</strong>
<span>17612 KB</span>
</li>
<li data-id="id-10" class="util">
<img width="128" height="128" src="images/keychain-access.png?1354486198" />
<strong>Keychain Access</strong>
<span>972 KB</span>
</li>
<li data-id="id-11" class="util">
<img width="128" height="128" src="images/network-utility.png?1354486198" />
<strong>Network Utility</strong>
<span>245 KB</span>
</li>
<li data-id="id-12" class="util">
<img width="128" height="128" src="images/sync.png?1354486198" />
<strong>Sync</strong>
<span>3788 KB</span>
</li>
<li data-id="id-13" class="app">
<img width="128" height="128" src="images/textedit.png?1354486198" />
<strong>TextEdit</strong>
<span>1669 KB</span>
</li>
</ul>
</div>
<p id="performance-toggle">Demo seems sluggish? <a href="#toggle">Disable CSS3 scaling</a> and try again.</p>
<p class="splitter">Isn’t it cool? Now, choose your fighter:</p>
<div class="actions">
<p>
<a class="download" href="https://raw.github.com/razorjack/quicksand/v1.3/jquery.quicksand.js">
<strong>Download</strong>
<span>Version <span class="version">1.3</span></span>
</a>
</p>
<p>
<a class="demos-n-docs" href="docs-and-demos.html"><strong>Demos & Docs</strong></a>
</a>
</p>
<p>
<a class="fork" href="http://github.com/razorjack/quicksand/">
<strong>Fork on GitHub</strong>
</a>
</p>
</div>
</div>
</div>
<p class="footer">
<span>Powered by <a href="http://jquery.com">jQuery</a> – Made by <a href="http://twitter.com/razorjack">@razorjack</a> from <a href="http://agilope.com">agilope</a>, <a href="http://www.artua.com">
icons design</a> by Artua</span>
<span>Design by <a href="http://twitter.com/riddle">@riddle</a></span>
</p>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1121012-6']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
|
 |
 |
 |
 |
| Date :
2013-07-11 16:40:16 |
By :
okboou |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
|
|
| |
|
 Load balance : Server 05
|
