Моя таблица стилей:
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="xml" indent="yes"/>
<xsl:template match="/states">
<select id="states">
<xsl:for-each select="state">
<xsl:element name="option">
<xsl:attribute name="value">
<xsl:value-of select="@abbreviation"/>
</xsl:attribute>
<xsl:value-of select="@name"/>
</xsl:element>
</xsl:for-each>
</select>
</xsl:template>
</xsl:stylesheet>
Фрагмент из XML-документа:
<?xml version="1.0" encoding="utf-8" ?>
<states>
<state name="Alabama" abbreviation="AL" />
<state name="Alaska" abbreviation="AK" />
</states>
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
<script type="text/javascript" src="js/jquery.transform.js"></script>
<script type="text/javascript">
$().ready(function () {
$("#container").transform({ xml: "xml/states/states.xml", xsl: "xsl/states.xsl" });
});
</script>
</head>
<body>
<div id="searchPage" data-role="page" data-theme="c" >
<div data-role="content">
<div id="container"></div>
</div>
</div>
</body>
</html>
В этом примере выполняется преобразование xsl, отображается список выбора, но без мобильного стиля. Я понимаю, что стилизация уже была применена средой jQuery Mobile, и что преобразование произошло слишком поздно в цепочке событий. Я видел рекомендации по обновлению элемента управления или родительского контейнера с использованием различных методов (.page (), .selectmenu ('refresh')), но ни одна из этих работ не работает.
Любая помощь здесь будет оценена. Рендеринг динамически созданного контента является обязательным условием, чтобы эта библиотека считалась готовой к прайм-тайму.
Обратите внимание, что плагин Transform находится по адресу:
http://plugins.jquery.com/project/Transform