2013-08-07 2 views
2

긴 문자열을 쓰고 페이지 컨테이너에 추가하여 동적으로 JQuery Mobile 페이지를 생성 할 수 있다는 것을 알고 있습니다. 그러나 개체로 페이지를 만들고 페이지 컨테이너에 추가하고 싶습니다. http://jsfiddle.net/8NZMw/2/객체에서 JQuery Mobile 페이지를 동적으로 생성하기

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와 모바일 요소를 만드는 아무 문제가 없다 : 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'); 

이 내가 그들을 만들 방법은 다음과 같습니다

내가 페이지를 만드는 데 사용하는 방법입니다 예를 들어 this처럼 전체 페이지를 만드는 방법을 알아낼 수 없습니다. 나는 심지어 페이지 객체에 .trigger ("create")를 호출하려고 시도했지만 여전히 그 트릭을 수행하지는 못했다.

도움을 주시면 감사하겠습니다. 여기

+0

, 당신은'.prop을 사용할 수 있습니다 ('id', ...)'대신'attr'을 사용합니다. 그 외에, 당신이 가지고있는 문제는 정확히 무엇입니까? '$ .mobile.pageContainer'가 기존 DOM 요소를 가리 킵니까? – Derek

답변

5

나중에 (난 당신의 코드에서 주석 통지가 작동하도록)이 나를 위해 작동, 이동 -

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

관련 문제