iPhone就像Javascript/jQuery的重新排序/随机播放小部件一样

Question

Javascript/jQuery是否存在任何可以在时尚iPhone中重新排序li块的功能:当您在iPhone主菜单中重新排序应用程序时可以看到此效果

• 所有列表项都是4 x 4网格中的块(图像)

• 启用重新排序时,项目具有不稳定的动画效果

• 用户可以使用鼠标/触摸来拖动以重新排序项目

Answer 1

一个好的起点是jQuery UI可排序: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/

当然还有很多工作要做,比如: - 添加不稳定性 - 创建/销毁可触摸和保持的可排序 - 滑动项目动画 - 可放置的项目,以便它们可以变成容器

在任何情况下,iphone的GUI应用程序行为都会发生很多事情,我严重怀疑只有1个widget/script可以提供所有这些行为.它实际上是各种技术和小部件的组合.

这应该让你开始.