动态生成网格样式问题

时间:2015-03-26 04:34:23

标签: javascript jquery html jquery-mobile

在jQuery mobile(版本1.3.3)中,我试图动态生成网格块并将其附加到网格导致样式问题。 UI块像

一样附加
$("#grid").append(s1).trigger("create");

以下是解释此问题的JSFiddle

1 个答案:

答案 0 :(得分:0)

var a116 = {
   name: 'text',
   city: 'text',
   number: "number"
};

var a117 = {
   firstname: 'text',
   lastname: 'text'
};


function getValues() {
   var formTitle = $("#readselectval").val();
   $("#grid").html("");
   switch (formTitle) {

    case "116":
        var a1 = Object.keys(a116);
        for (var i = 0; i < a1.length; i++) {

            var s1 = '<div class="ui-block-a">' + createLabel(a1[i]) + '' + createInputForm(a1[i], a116[a1[i]]); + '</div>';
            $("#grid").append(s1).trigger("create");

            i++;
            s2 = '<div class="ui-block-b"></div>';
            $("#grid").append(s2).trigger("create");
            s3 = '<div class="ui-block-c">' + createLabel(a1[i]) + '' + createInputForm(a1[i], a116[a1[i]]); + '</div>';
            if (a1[i]) {
                $("#grid").append(s3).trigger("create");
            }

        }

        break;
    case "117":
        var a1 = Object.keys(a117);
        //alert(a1.length)
        for (var i = 0; i < a1.length; i++) {

            var s1 = '<div class="ui-block-a">' + createLabel(a1[i]) + '' + createInputForm(a1[i], a117[a1[i]]); + '</div>';
            $("#grid").append(s1).trigger("create");
            i++;
            //alert(a117[a1[i]])
            s2 = '<div class="ui-block-b"></div>';
            $("#grid").append(s2).trigger("create");
            s3 = '<div class="ui-block-c">' + createLabel(a1[i]) + '' + createInputForm(a1[i], a117[a1[i]]); + '</div>';
            $("#grid").append(s3).trigger("create");

        }

        break;
   }
}