TAGS: Quicksand | ソート | 並び替え | jQuery | プラグイン | MIT | GPL
コンテンツを見やすくなるには、ソート（並び替え）したい時があります。Quicksandは、Webコンテンツをクールなアニメーション効果でソートしてくれるjQueryプラグインです。




動作環境


◇　言語：JavaScript(jQuery.js)
◇　ライセンス：MIT または GPL version 2 license
◇　ブラウザー：Safari 4、Chrome 4、Firefox 3.5、Opera 10.15、IE7／8

使い方例


<html>
<head>
<!-- 1) ライブラリ定義 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.quicksand.js" type="text/javascript"></script>
</head>

<body>
<!-- 2) HTMLコード例 -->
<ol id="content" class="grid">
  <li data-id="red">Red</li>
  <li data-id="green">Green</li>
  <li data-id="blue">Blue</li>
  <li data-id="black">Black</li>
  <li data-id="white">White</li>
  <li data-id="yellow">Yellow</li>
  <li data-id="cyan">Cyan</li>
  <li data-id="magenta">Magenta</li>    
</ol>

<ol id="data" style="display: none;">
  <li data-id="cyan">Cyan</li>
  <li data-id="magenta">Magenta</li>
  <li data-id="yellow">Yellow</li>
  <li data-id="black">Black</li>    
</ol>

<!-- 3)JavaScriptコード -->
<script language="javascript" type="text/javascript">
//#data > liのほうが表示される
    $("#content").quicksand($("#data > li"),
      {
        duration: 1000,
        easing: "swing",
        attribute: "data-id",
      }
    );
</script>
</body>
</html>

quicksand - github.com

Sponsored Link


http://razorjack.net/quicksand/
有关作者
Syboos.jp編集長AJavaやオープンソース情報の執筆、Webサイトの開発や運営全般の業務に携わる。

Comments

我要投稿

分类

Newest Top10

 
    POWERED BY @pmplat.syboos.com