1

我正在尝试使用 JQuery Mobile 创建一个类似于 Windows 8 开始菜单（Metro 风格）的菜单。

Scrollview为此，我将使用 JQuery Mobile 。（见这个例子）

Scrollview按水平顺序添加元素（如下图所示）

当前的 上图为真实截图

但我想将元素添加到Scrollview垂直顺序（如下图所示）

目标 上图不是真的。这是我的目标。（我在 MS Paint 中创建了它：P）

所以，我的问题是：如何更改Scrollview垂直顺序的添加顺序？（如第二张图片）

4

1 回答 1

1

同意这篇文章

您应该移动列表中的项目以重新排序所需的序列（例如翻译矩阵），一旦您获得了可以消除上述列表并重新创建它的内容，之后移动 jquery 将应用其效果。

我试过这个（使用你的例子，我已经在本地复制了页面），它不是很好，但你明白了。

<script>

$(document).ready(function(){


var arr = $.map( $(".threeByThree").children().text(), function(n){
   return n;
 });

var result = [];
var results;

while(arr.length){

    transform(arr.splice(0,8));     
}   

function transform(arr){

    var a = [
        [arr[0], arr[1], arr[2]],
        [arr[3], arr[4], arr[5]],
        [arr[6], arr[7], arr[8]]
    ],

    w = a.length ? a.length : 0,
    h = a[0] instanceof Array ? a[0].length : 0;

  if(h === 0 || w === 0) { return []; }

  var i, j, t = [];

  for(i=0; i<h; i++) {

    t[i] = [];

    for(j=0; j<w; j++) {

       t[i][j] = a[j][i];
    }
  }

results = result += t;
result += t; 

var rm = ',';

results = $.grep(results, function(value) {
  return value != rm;
});

}

$('.threeByThree').children().remove();

$.each(results, function(index, value){$('.threeByThree').append('<div class="square">'+value+'</div>');

});

});

</script>

和

.threeByThree > .ui-scrollview-view {
    height: 300px;
    background-color: white;
}

只是一个改进的测试。

于 2012-06-07T09:53:36.463 回答