Возможно, мои возможности javascript не достаточны :).Добавить динамический контент на панель
Я пытаюсь улучшить список (добавить элементы через javascript) на панель jquery mobile на лету. Код ниже - это рабочий (нерабочий) пример функциональности. Полный проект будет чересчур избыточным (и для его запуска вам понадобятся некоторые последовательные подключенные устройства).
Он добавляет красиво запись в список, но не отображает ее в надлежащем стиле.
Есть ли трюки, которые мне не хватает?
<!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>
В webconsole, то очевидно, что HTML-код для первой записи, и один, который был добавлен с помощью кнопки отличается. Есть ли способ включить jquery mobile для применения одного и того же набора информации к недавно добавленному элементу li (кроме добавления его «вручную»)?
<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>
Любая помощь или подсказка высоко оценены.
С наилучшими пожеланиями, Эдуард
http://stackoverflow.com/questions/14550396/jquery-mobile-markup-enhancement-of-dynamically-added-content/14550417#14550417 – Gajotres