layout - 是否有任何用于制作平铺列表的 jQuery 移动插件？

Question

我想制作一个像这样的列表http://jquerymobile.com/demos/1.2.0-alpha.1/docs/lists/lists-search.html，但我不想使用标准的垂直列表，而是想使用基于图块的列表。

你知道有什么插件可以做到这一点吗？如果你不这样做，有没有一种方法你认为你可以在不破坏 jquery mobile 的情况下做到这一点？

Answer 1

你可以用一点 CSS 做到这一点：

.custom-ul .ui-li {
    width  : 200px;
    height : 200px;
    float  : left;
}
/*jQuery Mobile adds a `.ui-btn-inner` element that also has the `.ul-li` class, so it needs to be reset after the changes made above*/
.custom-ul .ui-li .ui-btn-inner {
    width : 100%;
}

这会为列表项设置一个特定的高度/宽度，然后将它们浮动以便它们以网格样式堆叠，然后它会重置列表项的内部 div。请注意.custom-ul选择器的部分，这使得您仍然可以拥有标准列表，但是当您想要“网格样式”列表时，您可以将.custom-ul类添加到<ul data-role="listview">元素中。

这是一个演示： http: //jsfiddle.net/ykEtD/（相同的列表输出两次，第一个有.custom-ul类）

请注意，您可能需要调整其他 CSS 以获得您想要的内容，但这对您来说是一个很好的起点。