Question

我有一个简单的html文件，如下所示：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Inpress</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="/src/css/themes/inpress.css" />
    <link rel="stylesheet" href="/src/css/jquery.mobile.structure-1.3.2.min.css" /> 

    <script src="/src/scripts/jquery-1.10.2.min.js"></script>  
    <script src="/src/scripts/jquery.mobile-1.3.2.min.js"></script>
    <script src="/src/scripts/inpress/jquery.inpress.js"></script>  

    <style>
        * {
            -ms-touch-action: none;
        }

        .fullscreen {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
</body>
</html>

然后我使用jquery和json的组合动态创建所有页面。我的问题是，我可以轻松添加类 ui-page-active 来显示页面，但它无法正常工作。在普通版本中，我可以使用带#home的网址，它会显示，但是当我刷新页面时，它总是显示第一个。

所以我的问题是：

我可以在jquery mobile试图做到这一点之前将所有项目加载到页面上吗？

更新1

好的，这是我用来创建页面的代码。

function createPages(data) {
    if (data.configuration.global.target) {
        showDebug("Creating pages.");

        $.each(data.pages, function (i, item) {
            if (item.enabled) {
                var loadTemplate = (i == 0) ? true : false;
                createPage(item.template, loadTemplate);
            } else {
                showDebug("The page is disabled.");
            }
        });

        //if (document.location.hash != "")
        //    startPage = document.location.hash;

        //showDebug(startPage);

        //$.mobile.changePage(startPage);
    } else {
        showDebug("The target file could not be found.");
    }
};

function createPage(template, loadTemplate) {
    $.ajax({
        url: template,
        dataType: 'json',
        async: false,
        success: function (data) {
            showDebug("Creating page.");

            var page = createElement(data);
            var id = page.attr('id');

            $('body').append(page);
            $('#' + id).trigger('create');

            showDebug("Page created: " + id);
        }
    });
};

function createElement(template) {
    var o;

    o = $('<' + template.element + '/>');

    if (template.id) {
        o.attr("id", template.id);
    }

    if (template.href) {
        o.attr("href", template.href);
    };

    if (template.src) {
        o.attr("src", template.src);
    };

    if (template.type) {
        o.attr("type", template.type);
    };

    if (template.classes) {
        $.each(template.classes, function (i, item) {
            o.addClass(item);
        });
    }

    if (template.data) {
        $.each(template.data, function (key, value) {
            $.each(value, function (key, value) {
                o.attr("data-" + key, value);
            });
        });
    }

    if (template.content) {
        $.each(template.content, function (i, item) {
            if (item.element) {
                o.append(createElement(item));
            } else {
                o.append(item);
            }
        });
    }

    return o;
};

只是让你了解它正在解析的json：

{
   "id":"introPage",
   "element":"div",
   "data":[
      {
         "role":"page"
      }
   ],
   "content":[
      {
         "element":"div",
         "data":[
            {
               "role":"content"
            }
         ],
         "content":[
            {
               "id":"skip-intro",
               "element":"a",
               "href":"#homePage",
               "content":[
                  {
                     "id":"introMovie",
                     "element":"video",
                     "classes":[
                        "fullscreen"
                     ],
                     "content":[
                        {
                           "element":"source",
                           "type":"video/mp4",
                           "src":"/src/assets/test.mp4"
                        },
                        {
                           "element":"source",
                           "type":"video/webm",
                           "src":"/src/assets/test.webm"
                        },
                        {
                           "element":"source",
                           "type":"video/ogg",
                           "src":"/src/assets/test.ogv"
                        },
                        "Your browser does not support the video tag."
                     ]
                  }
               ]
            }
         ]
      }
   ]
}

我希望这可以帮助你帮助我:)。

欢呼声， / r3plica

Answer 1

下面的代码添加了动态页面，这里已经定义为JSON。我在这里留下了一个非常必要的保留页面，但是如果您通过ajax加载模板会更好看，因为用户可能会在一段时间内看到空白空间。

此处第一页有一个链接，您可以单击该链接以加载动态生成的页面。当然，因为你有相对的网址，只有相对的网址是正确的，视频才能正常显示。我已经更改了视频的href以返回到mainPage这里，以演示动态页面如何通过anchor href更改为另一个页面。（它也可能是另一个动态添加页面的ID）。如果您想立即加载其中一个动态网页，只需取消注释下面的$.mobile.changePage('#somePageId');。

N.B。请记住，如果您通过ajax调用页面，因为这是异步的，您需要在ajax调用的success函数内调用changePage。

至于在整页刷新后直接打开其中一个动态页面，这将永远不会起作用，因为当您使用锚点引用直接引用它时尚未添加动态页面，因此它是当您尝试直接访问DOM时，ID不会出现在DOM中。

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>- jsFiddle demo by robschmuecker</title>
        <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.js"></script>
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.css">
        <link rel="stylesheet" type="text/css" href="/css/result-light.css">
        <script type='text/javascript'>
            //<![CDATA[ 
            $(window).load(function() {
                jsonData = {
                    "id": "introPage",
                        "element": "div",
                        "data": [{
                        "role": "page"
                    }],
                        "content": [{
                        "element": "div",
                            "data": [{
                            "role": "content"
                        }],
                            "content": [{
                            "id": "skip-intro",
                                "element": "a",
                                "href": "#mainPage",
                                "content": [{
                                "id": "introMovie",
                                    "element": "video",
                                    "classes": [
                                    "fullscreen"],
                                    "content": [{
                                    "element": "source",
                                        "type": "video/mp4",
                                        "src": "/src/assets/test.mp4"
                                }, {
                                    "element": "source",
                                        "type": "video/webm",
                                        "src": "/src/assets/test.webm"
                                }, {
                                    "element": "source",
                                        "type": "video/ogg",
                                        "src": "/src/assets/test.ogv"
                                },
                                    "Your browser does not support the video tag."]
                            }]
                        }]
                    }]
                };

                function createPage(data) {
                    var page = createElement(data);
                    var id = page.attr('id');

                    $('body').append(page);
                    $('#' + id).trigger('create');
                };

                function createElement(template) {
                    var o;

                    o = $('<' + template.element + '/>');

                    if (template.id) {
                        o.attr("id", template.id);
                    }

                    if (template.href) {
                        o.attr("href", template.href);
                    };

                    if (template.src) {
                        o.attr("src", template.src);
                    };

                    if (template.type) {
                        o.attr("type", template.type);
                    };

                    if (template.classes) {
                        $.each(template.classes, function(i, item) {
                            o.addClass(item);
                        });
                    }

                    if (template.data) {
                        $.each(template.data, function(key, value) {
                            $.each(value, function(key, value) {
                                o.attr("data-" + key, value);
                            });
                        });
                    }

                    if (template.content) {
                        $.each(template.content, function(i, item) {
                            if (item.element) {
                                o.append(createElement(item));
                            } else {
                                o.append(item);
                            }
                        });
                    }

                    return o;
                };
                createPage(jsonData);
                // Example of how to change page programatically.
                //$.mobile.changePage('#introPage');
            }); //]]>
        </script>
    </head>

    <body>
        <div id="mainPage" data-role="page">
            <div data-role="header">
                    <h1>Page Title</h1>

            </div>
            <!-- /header -->
            <div data-role="content">
                <p>Page content goes here. <a href="#introPage">Click to load new page.</a>

                </p>
            </div>
            <!-- /content -->
            <div data-role="footer">
                    <h4>Page Footer</h4>

            </div>
            <!-- /footer -->
        </div>
        <!-- /page -->
    </body>

</html>

Working Fiddle Here

Answer 2

修正了我的自我。问题在于让代码在正确的时间执行。查看文档，最佳时间是http://api.jquerymobile.com/pagebeforechange/

所以我修改了我的代码，这就是我所拥有的：

debug = true;
initialized = false;

$(document).bind("pagebeforechange", function (e, data) {
    if (!initialized) {
        initialize();

        e.preventDefault();
    }
});

function initialize() {
    $.getJSON('/src/assets/json/config.txt', function (data) {
        initialized = true;

        createPages(data);
    });
};

function createPages(data) {
    if (data.configuration.global.target) {
        showDebug("Creating pages.");

        $.each(data.pages, function (i, item) {
            if (item.enabled) {
                var loadTemplate = (i == 0) ? true : false;
                createPage(item.template, loadTemplate);
            } else {
                showDebug("The page is disabled.");
            }
        });
    } else {
        showDebug("The target file could not be found.");
    }
};

function createPage(template, loadTemplate) {
    $.ajax({
        url: template,
        dataType: 'json',
        async: false,
        success: function (data) {
            showDebug("Creating page.");

            var page = createElement(data);
            var pageId = '#' + page.attr('id');

            $('body').append(page);

            if (document.location.hash) {
                if (document.location.hash == pageId) {
                    $.mobile.changePage(document.location.hash);
                }
            } else {
                if (loadTemplate) {
                    $.mobile.changePage(pageId, { changeHash: false });
                }
            }

            showDebug("Page created.");
        }
    });
};

function createElement(template) {
    var o;

    o = $('<' + template.element + '/>');

    if (template.id) {
        o.attr("id", template.id);
    }

    if (template.href) {
        o.attr("href", template.href);
    };

    if (template.src) {
        o.attr("src", template.src);
    };

    if (template.type) {
        o.attr("type", template.type);
    };
    if (template.classes) {
        $.each(template.classes, function (i, item) {
            o.addClass(item);
        });
    }

    if (template.data) {
        $.each(template.data, function (key, value) {
            $.each(value, function (key, value) {
                o.attr("data-" + key, value);
            });
        });
    }

    if (template.content) {
        $.each(template.content, function (i, item) {
            if (item.element) {
                o.append(createElement(item, false));
            } else {
                o.append(item);
            }
        });
    }

    return o;
};

function showDebug(message) {
    if (debug) {
        console.log(message);
    }
};

你可以在 createPage 函数中看到我运行这段代码：

if (document.location.hash) {
    if (document.location.hash == pageId) {
        $.mobile.changePage(document.location.hash);
    }
} else {
    if (loadTemplate) {
        $.mobile.changePage(pageId, { changeHash: false });
    }
}

如果我们有一个集合，或者如果我们没有，则处理我的散列的

，它会检查这是否是应该加载的页面。这基本上将第一页设置为默认页面（不更改哈希），但如果我们在url中指定了哈希，那么它将转到那里。

jquery移动和动态页面

2 个答案: