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

发布于 2024-12-07 07:59:34 字数 2413 浏览 1 评论 0原文

我的样式表：

<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

原文

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="container"></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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

记忆里有你的影子 2024-12-14 07:59:34

我修好了。我将选择控件本身从 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);

});

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

});

回复收藏 0 原文

~没有更多了~