Transformed content created using jQuery mobile and Transform plugin not mobile-styled
My stylesheet:
<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>
An fragment from the xml document:
<?xml version="1.0" encoding="utf-8" ?>
<states>
<state name="Alabama" abbreviation="AL" />
<state name="Alaska" abbreviation="AK" />
</states>
The 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="c开发者_运维技巧ontainer"></div>
</div>
</div>
</body>
</html>
In this example the xsl transformation occurs, the select list renders, but without the mobile styling. I understand that styling has already been applied by the jQuery Mobile framework, and that the transformation happened too late in the event chain. I've seen the recommendations to refresh the control or parent container using a variety of techniques (.page(), .selectmenu('refresh')), but none of these work.
Any help here would be appreciated. Rendering dynamically-created content is a must for this library to be considered ready for prime time.
Note that the Transform plugin is at:
http://plugins.jquery.com/project/Transform
I fixed it. I pulled the select control itself out of the xsl and placed it in the html body:
<select id="states"></select>
The transformation then is responsible for rendering just the option tags:
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="xml" indent="yes"/>
<xsl:template match="/states">
<option data-placeholder="true">Select your state</option>
<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>
</xsl:template>
</xsl:stylesheet>
Finally, a refresh on the contol after the transformation added the appropriate mobile styling:
$('#searchPage').live('pageinit', function (event) {
// Get the states select options.
var options = $.transform({ async: false, xml: "xml/states/states.xml", xsl: "xsl/states.xsl" });
$("#states").html(options).selectmenu('refresh', true);
});
加载中,请稍侯......
精彩评论