如何使用Javascript设置动态加载元素的位置?

时间:2013-06-30 19:54:18

标签: javascript jquery arrays dynamic position

我正在处理从服务器上的文件加载“Apps”的应用程序。目前我必须按特定顺序加载应用程序,否则他们将在阵列数组中有错误的位置。

这是帮助解释我的意思的代码。

function getFacebook() {
    var appname = "facebooka1thd";
    $.get("apps/"+appname+"/"+appname+".html", function(data){
        $('.AppList').append(data);
        $.cookie(appname, 1, { expires : 365 });
        checkpositions();
    });
};

function checkpositions() {
    if ($.cookie('PosApps')){
        var Poscookie = $.cookie('PosApps');
        var Pos = JSON.parse(Poscookie);

        $("#User").css({top:Pos[0].top, left:Pos[0].left});
        $("#facebooka1thd").css({top:Pos[1].top, left:Pos[1].left});
        $("#youtubea2thd").css({top:Pos[2].top, left:Pos[2].left});
    };
};

function getAppPositions() {
    var apps = $(".App"),
    positions = [];

    $.each(apps, function (index, app) {
        var positionInfo = $(app).position();

        positions.push(positionInfo);
        console.log(positionInfo);
    });
    var setPositions = JSON.stringify(positions);

    $.cookie("PosApps", setPositions, { expires : 365 });
};

我希望代码能够适应现有的应用数量以及添加或删除它们的顺序。

基本上我没有线索如何绕过这个-_-我认为我的大多数代码都必须按顺序改变才能实现这一点,因为此时的位置是按照顺序保存的。应用程序已添加,但当用户删除其中一个应用程序并且相对于正在添加的应用程序的顺序设置位置时,这将无助于此。

任何帮助都会很棒!

1 个答案:

答案 0 :(得分:0)

我设法为自己解决这个问题......

function checkpositions() {
    if ($.cookie('PosApps')){
        var Poscookie = $.cookie('PosApps');
        var Pos = JSON.parse(Poscookie);

        for (var i = 0; i < Pos.length; i++) {
            $("#"+Pos[i][0]).css({top:Pos[i][1].top, left:Pos[i][1].left});
        };
    };
};

function getAppPositions() {
    var apps = $(".App"),
    positions = [];

    $.each(apps, function (index, app) {
        var id = $(app).attr('id');
        var positionInfo = [id,$(app).position()];

        positions.push(positionInfo);
        console.log(positionInfo);
    });
    var setPositions = JSON.stringify(positions);

    $.cookie("PosApps", setPositions, { expires : 365 });
};

我所要做的就是在其位置之前创建一个带有元素id的2D数组,并使用Pos [i] [0]为id和Pos i设置CSS。top / left for the位置。希望这可以帮助任何陷入这种事情的人。此外,如果你遇到问题我会建议你去site。他们的教程非常好,是帮助我解决这个问题的原因。