1

JQuery Mobile を使用して、Windows 8 のスタート メニュー (Metro スタイル) のようなメニューを作成しようとしています。

Scrollviewこの目的のためにJQuery Mobile を使用します。(この例を参照)

Scrollview水平方向の順序で要素を追加します (下の画像のように)

現時点の 上の画像は実際のスクリーンショットです

しかし、垂直方向に要素を追加したいScrollview（下の画像のように）

ゴール 上の画像は本物ではありません。それが私の目標です。(MSペイントで作成しました:P)

だから、私の質問は次のとおりScrollviewです。垂直方向への追加順序を変更するにはどうすればよいですか? (2枚目の画像のように)

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 に答える