使用jQuery Mobile和ui.layout jquery插件

Question

有没有人成功使用jQuery ui.layout插件在窗格中加载jQuery mobile？

我正在开发一个桌面应用程序，它将在没有键盘的21英寸触摸屏上运行;此外，某些功能将可供客户端通过移动设备使用。

我只使用php，jqm和jQuery，并且想使用ui.layout，因为它具有广泛的灵活性，但是当我尝试将jqm页面动态加载到窗格中时，所有样式都会被剥离。

我必须构建一些相当复杂的实时数据仪表板，因此能够使用ui.layout将极大地帮助我完成这项任务。

这是我放在一起的测试页面的URL。我正在尝试将一个移动页面加载到左侧，将一个移动页面加载到右侧。 themachine.hopto.org:8080/~av2ma/test/index_test.html

提前感谢您的时间。

Answer 1

您可能不希望对元素使用page（）方法，因为页面可能会进入无限循环。您可以使用触发器（“创建”）代替。有了这个，“west_content”的风格就会回归。

但是center_content不会，因为当DOM准备就绪时，clone不会复制必要的移动类。当DOM准备就绪时会触发$（document）.ready，但是在加载所有可查看元素时不会触发。对于后者，您应该使用$（window）.load事件。以下代码将修复您的样式问题。

$(document).ready(function () {

       myLayout = $('body').layout({
        name: 'myLayout'
        ,west__size: '25%' 
        ,west__autoResize: true
        });
});
$(window).load(function () {
     center_content = $("#west_content").clone();
    center_content.attr("id", "center_content");

    $("#center").html(center_content);
    //you don't need this any more center_content.trigger("create");

});