В первый раз играл с jQuery Mobile, но немного использовал jQuery. надеялся на быстрый совет.
Я анализирую некоторые xml в голове и записываю данные в виде списка в div с тегами
. Список отображается там, но не отформатирован с использованием стиля по умолчанию из jQuery Mobile. Я уверен, что я что-то не так делаю, но не могу понять, что мне нужно сделать, чтобы применить стиль, или, может быть, мне нужно получить данные за пределами «готовности». Вот мой код
Это должно быть что-то настолько простое, что я скучаю. Если я жестко кодирую в тегах
в HTML, он работает нормально, но если я использую .append (), он не показывает форматирование списка.
ДЕЙСТВИТЕЛЬНО оценил бы любые ваши советы.
<!DOCTYPE html>
<html>
<head>
<title>Chart</title>
<link rel="stylesheet" href="css/jquery.mobile-1.0a2.min.css" />
<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/jquery.mobile-1.0a2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$.ajax({
type: "GET",
url: "xml/vc-data.xml",
dataType: "xml",
success: function(xml){
// build country list
var currentCountry = "";
var currentRegion = "";
$("#countries").html('<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"></ul>');
$(xml).find("charts").each(function()
{
var country = $(this).find('country').text();
var region = $(this).find('region').text();
if(currentCountry != country) {
//countryList += "<li><a href='#'>" + country + "</a></li>";
$("<li data-role='list-divider'></li>")
.html(country)
.appendTo("#countries ul");
}
if(currentRegion != region) {
$("<li></li>")
.html("<a href='#'>" + region + "</a>")
.appendTo("#countries ul");
}
currentCountry = country;
currentRegion = region;
});
}
});
});
</script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page">
<div data-role="header">
<h1>Charts</h1>
</div><!-- /header -->
<div data-role="content" id="countries" >
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Эй. Большое спасибо за этот ответ. Я думаю, что искал с неправильными ключевыми словами, потому что я просто не мог найти это где-нибудь и застрял в последние несколько дней. Я действительно оценил помощь здесь. Я как раз собирался перейти на jqTouch как вариант, но хотел бы, чтобы это работало. Я думаю, что я почти там.
Я пытался добавить это:
$("#countries > ul").page();
но это ни на что не повлияло.
тогда я добавил:
$("#countries div > ul").page();
, что повлияло на цвет ссылки, но не изменило стиль строк с интервалом и т. Д.
Затем я сделал еще несколько копаний и обнаружил это в документации, которую я пропустил:
Если вы добавите элементы в просмотр списка, вы
необходимо вызвать метод refresh ()
это обновить стили и создать любой
вложенные списки, которые добавляются. За
Например, $ ('ul'). listview ('refresh');
Поэтому я заменил page () на эту строку, и она сработала великолепно.
$("#countries div > ul").listview('refresh');