Question

我的样式表：

<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

Answer 1

我修好了。我将选择控件本身拉出xsl并将其放在html正文中：

<select id="states"></select>

然后转换负责只渲染选项标签：

<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>

最后，转换后对控制器的刷新添加了适当的移动样式：

$('#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);

});

使用jQuery mobile和Transform插件创建的转换内容不是移动设备风格的

1 个答案: