动态添加内容到面板 [英] Add content to Panel Dynamically
问题描述
可能是我的javascript能力不足:).
it might be the case that my javascript capabilities are not sufficient :).
我正在尝试快速增强到jQuery移动面板的列表(通过javascript添加项目).下面的代码是该功能的有效示例.完整的项目会有点过多的开销(并且您需要一些串行连接的设备来运行它).
I am trying to enhance a list (add items via javascript) to a jquery mobile panel on the fly. The code below is a working (non-working) example of the functionality. The complete project would be a bit too much overhead (and you need some serial connected devices to run it).
它很好地向列表添加了一个条目，但是没有以适当的样式呈现它.
It adds nicely an entry to the list, but does not render it in the proper style.
有没有我想念的把戏?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title> Device control</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" />
<style>
</style>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script>
function addEntry()
{
var div = $("<li><a href=\"#\">Device 2</a></li>").appendTo("#list_devices");
$( "#nav-panel-devicecommands" ).trigger( "updatelayout" );
}
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="pageDeviceCommands" class="ui-responsive-panel">
<div data-theme="a" data-role="header" data-position="fixed">
<h3>Overview</h3>
<a href="#nav-panel-devicecommands" data-icon="bars" data-iconpos="notext">Menu</a>
</div>
<div data-role="content" id="contentDeviceCommands">
empty for now
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<div data-role="navbar" data-iconpos="top">
<ul>
<li><a href="#pageDeviceCommands" data-transition="fade" data-theme="" data-icon="home"></a></li>
</ul>
</div>
</div>
<style>
.nav-search .ui-btn-up-a {
background-image:none;
background-color:#333333;
}
.nav-search .ui-btn-inner {
border-top: 1px solid #888;
border-color: rgba(255, 255, 255, .1);
}
</style>
<div data-role="panel" data-position="left" data-position-fixed="false" data-display="reveal"
id="nav-panel-devicecommands" data-theme="a">
<ul id="list_devices" data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;"
class="nav-search">
<li data-icon="delete" style="background-color:#111;">
<a href="#" data-rel="close">Close device selection</a>
</li>
<li>
<a href="#">Device 1</a>
</li>
</ul>
<a data-role="button" onclick="addEntry();">add device</a>
<!-- panel content goes here -->
</div>
<!-- /panel -->
</div>
</body>
</html>
在网络控制台中，很显然第一个条目的html代码和按钮添加的html代码是不同的.有没有一种方法可以使jquery mobile将相同的信息集应用于新添加的li项目(不是手动"添加)?
In the webconsole, it is obvious that the html code for the first entry, and the one that was added by the button is different. Is there a way to enable jquery mobile to apply the same set of information to the newly added li item (other than adding it 'by hand')?
<ul id="list_devices" data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search ui-listview">
<li data-icon="delete" style="background-color:#111;" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-first-child ui-btn-up-a"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">
<a href="#" data-rel="close" class="ui-link-inherit">Close device selection</a>
</div><span class="ui-icon ui-icon-delete ui-icon-shadow"> </span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-last-child ui-btn-up-a"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">
<a href="#" class="ui-link-inherit">Device 1</a>
</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li><a href="#">Device 2</a></li><li><a href="#">Device 2</a></li></ul>
任何帮助或提示都将受到高度赞赏.
Any help or hint is highly appreciated.
最诚挚的问候， 爱德华
Best regards, Eduard
推荐答案
向面板添加新内容后，使用
After adding new content to Panel, use
$('[data-role=page]').trigger('pagecreate');
Demo
注释:
-
使用
.listview("refresh")和.listview().listview("refresh")不能正确增强列表视图，因为它将与其父div合并，而不是将其呈现为附加了div的子级.
Using
.listview("refresh")and.listview().listview("refresh")won't enhance list-view correctly as it will merge it with its parent div instead of render it as a child of the div where it's appended.
updatelayout.
在jQuery Mobile 1.3.1中使用jQuery 1.9.1
Use jQuery 1.9.1 with jQuery Mobile 1.3.1
相关: 查看全文
