我正在学习如何使用jQuery mobile渲染移动网页,在jsfiddle上编码。 当我按照jQuery mobile document中显示的方式加载网页加载后增强附加元素时,结果似乎是jQuery mobile的EnhanceWithin方法无法正常工作。
我想知道我的代码有什么问题?或者这是由jsFiddle引起的? 也许它在某些情况下无法效仿?
这是我的HTML代码:
<div data-role="page">
<div data-role="header" data-position='fixed'>
<a href="#" id="back" data-role="back" data-rel="back">Back</a>
<div id="head">Title</div>
</div>
<div id="content" data-role="content">
<ul id="items" data-role="listview" data-inset="true">
<li><a href='#'>Sony TV</a></li>
<li><a href='#'>Samsung Note 3</a></li>
<li><a href='#'>ASUS zenfone</a></li>
</ul>
<div id="insert">
</div>
<div>
<div data-role="footer" data-position='fixed'>
<div id="foot">copy right.</div>
</div>
</div>
样式
#head{
font-size:35px;
height:100%;
line-height:100%;
text-align:center;
}
#foot{
font-size:30px;
height:100%;
line-height:100%;
text-align:center;
}
脚本:
$("#items").append("<li><a href='#'>Sony Z3</a></li>")
.append("<li><a href='#'>Test</a></li>").listview("refresh");
var ctx =
"<ul id='newlistview' data-role='listview' data-inset='true'>" +
"<li><a href='#'>Line 1</a></li>" +
"<li><a href='#'>Line 2</a></li>" +
"</ul>";
$("#insert").append(ctx).enhanceWithin();
/*
$('#newlistview').listview({
inset:true
});
*/
最后,jsFiddle
的渲染结果我希望显示的结果以及在评论的块中调用.listview({options})所得到的结果。
但是我无法使用enhanceWithin()方法制作它,我打算稍后使用许多小部件来增强huger代码块。