使用 jQuery 模板动态创建 jQuery Mobile 页面 [英] Dynamically creating jQuery Mobile pages using jQuery Templates

问题描述

我正在使用 jquery mobile 为 UI 和 jquery 模板构建一个锻炼目录来处理 html.由于 .page() 函数，我已经能够将 html 附加到已经创建的页面并让 jquery mobile 更改标记.

但是，我希望能够创建新的 jq 移动页面.我可以将代码注入到带有 data-role=page 的 div 中，调用 .page() 就可以了.但是将一个完整的页面附加到正文中不起作用.

这个问题和我的回答指的是 jquery mobile alpha 3

解决方案

好的，我明白了.如果您想向 DOM 添加一个，您还必须为 data-url 添加一个值.创建静态html页面时，

jQuery mobile 会自动添加一个与您提供的 id 相等的 data-url.自己做的时候，还得拉着它的手传个data-url="home".

当您生成 html 字符串时，将它附加到 $.mobile.pageContainer 以便 jQuery Mobile 知道在哪里可以找到它(将它附加到正文也可以，但最好不要动摇船).之后，在 DOM 中对您的页面调用 .page() 以便 jQuery mobile 执行其所有神奇的 <span> 魔法，使其变得漂亮.

$('#home').page();

I am building a workout catalog using jquery mobile for the UI and jquery templates to deal with the html. I have been able to append html to an already created page AND get jquery mobile to change the markup thanks to the .page() function.

However, I want to be able to create new jq mobile pages. I can inject code into divs with data-role=page, call .page() on it and it's all fine. But appending a fully made page to the body does not work.

EDIT: This question and my answer refers to jquery mobile alpha 3

解决方案

Ok I got it. If you want to add a to the DOM you have to also add a value for data-url. When you create a static html page,

<div data-role="page" id="home">

jQuery mobile automatically adds a data-url equal to the id you give it. When you do it yourself, you have to hold its hand and pass it a data-url="home".

When you generate your html string append it to $.mobile.pageContainer so jQuery Mobile knows where to find it (appending it to the body works also, but it's probably best not to rock the boat). After that, call .page() on your page in the DOM so that jQuery mobile does all of its magical <span> magic to make it pretty.

$('#home').page();

这篇关于使用 jQuery 模板动态创建 jQuery Mobile 页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！