javascript - 从对象动态创建 JQuery Mobile 页面

标签 javascript jquery jquery-mobile dom-manipulation

我知道可以通过写出长字符串并将其附加到页面容器来动态创建 JQuery Mobile 页面。但是我想将页面创建为对象并将其附加到页面容器。

这就是我用来创建页面的方式: http://jsfiddle.net/pjUcn/

var page = $("<div data-role='page' id='page'><div data-role=header>
<a data-iconpos='left' data-icon='back' href='#' data-role='button' 
data-rel='back'>Back</a><h1>Dynamic Page</h1></div>
<div data-role=content>Stuff here</div></div>");

page.appendTo($.mobile.pageContainer);

$.mobile.changePage('#page');

这就是我想要创建它们的方式:http://jsfiddle.net/8NZMw/2/

var page = $('<div/>'),
     header = $('<div/>'),
     back = $('<a/>'),
     title = $('<h1/>'),
     content = $('<div/>');

page.data('role', 'page');
page.attr('id', 'page');

header.data('role', 'header');

back.data('iconpos', 'left');
back.data('icon', 'back');
back.data('role', 'button');
back.data('rel', 'back');
back.attr('href', '#');
back.text('Back');

title.text('Dynamic Page');

header.append(back);
header.append(title);

page.append(header);

content.data('role', 'content');
content.text('stuff here');

page.append(content);

page.appendTo($.mobile.pageContainer);

$.mobile.changePage('#page');

我可以毫无问题地创建其他简单的 JQuery Mobile 元素,例如 this ,我只是不知道如何以这种方式创建整个页面。我什至尝试在页面对象上调用 .trigger("create") ,但这仍然没有成功。

任何帮助将不胜感激,谢谢!

最佳答案

给你,这对我有用(注意我在哪里注释掉了你的代码以使其工作)-

var page = $('<div/>'),
    header = $('<div/>'),
    back = $('<a/>'),
    title = $('<h1/>'),
    content = $('<div/>');

//page.data('role', 'page');
page.attr('data-role', 'page');
page.attr('id', 'page');

//header.data('role', 'header');
header.attr('data-role', 'header');

back.data('iconpos', 'left');
back.data('icon', 'back');
back.data('role', 'button');
back.data('rel', 'back');
back.attr('href', '#');
back.text('Back');

title.text('Dynamic Page');

header.append(back);
header.append(title);

page.append(header);

//content.data('role', 'content');
content.attr('data-role', 'content');
content.text('stuff here');

page.append(content);

page.appendTo($.mobile.pageContainer);

$.mobile.changePage('#page');

Here is a jsFiddle demo

关于javascript - 从对象动态创建 JQuery Mobile 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18112722/

相关文章:

javascript - 如何在 jQuery Mobile 中顺序显示多个对话框?

javascript - 包含外部 jQuery 脚本

javascript - Node.js 无法使用 JSON 数据读取未定义的属性

javascript - 使 tr 宽度与粘性表格标题上的 thead 宽度匹配

javascript - 有没有办法全局而不是单独处理未定义的值?

javascript - jQuery Steps - 无需重新加载页面的重置向导

javascript - 单击另一个 select2 下拉列表时如何保持 select2 下拉事件打开

jquery-mobile - flot.axislabels : how to choose labels' colors?

jquery - ui 与 jqGrid 一起使用时的多选自定义以进行列重新排序

javascript - Android 中的 Phonegap-Jquery 兼容性问题