转换后的内容使用jQuery移动创建和改造插件不移动风格的

我的样式表：转换后的内容使用jQuery移动创建和改造插件不移动风格的

<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'））刷新控件或父容器的建议，但是这些都不起作用。

任何帮助在这里将不胜感激。渲染动态创建的内容是这个库在黄金时段被认为已准备就绪的必要条件。

注意，转换插件是：

http://plugins.jquery.com/project/Transform

来源

2011-10-01 Doug Wiley

我固定它。我把选择控制本身出了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); 

});

来源

2011-10-13 16:57:16

转换后的内容使用jQuery移动创建和改造插件不移动风格的

回答

相关问题