<!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>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง
