iPhone一樣重新排序播放/隨機播放插件爲Javascript/jQuery的

Question

是否存在什麼使用Javascript/jQuery的，這將允許在時裝訂貨李塊iPhone做的：當你在iPhone主菜單中重新排列應用此效果可以看出

• 所有列表項是塊（圖像）中的4×4網格

• 當重排序啓用項具有不穩定的動畫效果

• 用戶可以使用鼠標器/觸摸式拖動以重新排序的項目

Answer 1

一個良好的開端是jQuery用戶界面可排序： http://jqueryui.com/demos/sortable/#display-grid

可以添加所有其他要求，例如刪除的。

$(".apps") // container holding sortable elements 

    // make it sortable 
    .sortable() 

    // add delete button behaviour 
    .delegate(".delete","click",function(e){ 
     var btn = $(this) 
     , container = btn.closest(".apps") 
     , item = btn.closest("li") 
     // shrink animation 
     item.animate({ 
      width: 0, 
      height: 0, 
      margin: 24 
     },function(){ 
      // remove item from sortable. 
      item.remove(); 
      // make sortable see that an item has been removed. 
      container.sortable("refresh"); 
     }); 

    }); 

上面的代碼假定HTML這樣的：

<ul class="apps"> 
    <li> 
     <span class="delete">x</span> 
     1 
    </li> 
    <li> 
     <span class="delete">x</span> 
     2 
    </li> 
    <li> 
     <span class="delete">x</span> 
     3 
    </li> 
</ul> 

列表和物品看起來怎麼樣，應該通過CSS來實現。 我們只是用javascript添加行爲。

.apps {padding:10px;overflow:hidden;border:1px solid #000;} 
.apps li {display:block;width:50px;height:50px;border:1px solid #000;float:left;margin:5px;position:relative;background:#ccc;} 
.apps .delete {display:none;} 
.apps li:hover {z-index:1;} 
.apps li:hover .delete {display:block;text-indent:-9999;overflow:hidden;position:absolute;top:-10px;right:-10px;background:#000;width:20px;height:20px;cursor:default;} 

見上面的例子：要做http://jsfiddle.net/KkXZ3/

Ofcourse有更多的需求，如： - 添加shakyness - 創建/銷燬排序觸摸並按住 - 滑項目的動畫 - 可以將它們變成容器

在任何情況下，iPhone的GUI應用程序行爲都會發生很多，我嚴重懷疑只有1個小部件/腳本可以提供所有這些行爲。它實際上是各種技術和小工具的組成部分。

這應該讓你開始。