Блог

Главная - Вопросы по программированию - Преобразованный контент, созданный с помощью jQuery mobile и плагина Transform не в мобильном стиле

Преобразованный контент, созданный с помощью jQuery mobile и плагина Transform не в мобильном стиле

#jquery #mobile #transform

#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 framework и что преобразование произошло слишком поздно в цепочке событий. Я видел рекомендации по обновлению элемента управления или родительского контейнера с использованием различных методов (.page(), .selectmenu(‘обновить’)), но ни один из них не работает.

Любая помощь здесь будет оценена. Рендеринг динамически создаваемого контента является обязательным условием для того, чтобы эта библиотека считалась готовой к прайм-тайм.

Обратите внимание, что плагин Transform находится на:

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

Ответ №1:

Я это исправил. Я вытащил сам элемент управления select из 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);

});