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个小部件/脚本可以提供所有这些行为。它实际上是各种技术和小工具的组成部分。

这应该让你开始。