Блог

Главная - Вопросы по программированию - Стилизация XML-данных на основе размещения содержимого на странице HTML

Стилизация XML-данных на основе размещения содержимого на странице HTML

#javascript #html #css #xml

#javascript #HTML #css #xml

Вопрос:

Я создаю список меню из XML-файла, XML-файл используется для создания как горизонтального, так и вертикального списка меню. Сам список стилизуется [по горизонтали / вертикали] в зависимости от того, где размещается содержимое.

Я смог успешно сделать это с помощью JavaScript и CSS. Я также предоставляю запасной вариант, если JavaScript отключен, путем встраивания XML-файла в тег объекта. К XML-файлу прилагается XSL-лист, чтобы позаботиться о форматировании.

Проблема, с которой я столкнулся, заключается в том, что я не могу стилизовать список так, как я могу с помощью JavaScript. Я не уверен, правильно ли я это реализую, но если есть способы обойти это, пожалуйста, дайте мне знать.

CSS

 #horMenu ul li{//rules to display it horizontally}
#verMenu ul li{//rules to display it vertically}

HTML

     <div id=horMenu>
    //build a ul list using js,append it and the menu is diplayed horizontally

    <noscript>
     <div> 
      <object data="menu/menu.xml" type="all"></object>
     </div> 
    </noscript>

    </div>

    <div id=verMenu>
    //build a ul list using js,append it and the menu is diplayed vertically

   <noscript>
    <div> 
      <object data="menu/menu.xml" type="all"></object>
     </div> 
    </noscript>

    </div>

XML

 <?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="menu.xsl"?>
<menuList>
    <menu loc="menu1.htm">menu 1</menu>
    <menu loc="menu2.htm">menu 2</menu> 
    <menu loc="menu3.htm">menu 3</menu> 
    <menu loc="menu4.htm">menu 4</menu> 
    <menu loc="menu5.htm">menu 5</menu> 
</menuList>

XSL

 <?xml version="1.0" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
        <html>
            <head>
                <link href="../css/Style.css" rel="stylesheet" type="text/css" />   
            </head>
            <body>
                <ul>
                    <xsl:for-each select="menuList/menu">
                        <li>
                            <a>
                                <xsl:attribute name="href">
                                    <xsl:value-of select="@loc"/>
                                </xsl:attribute>
                                <xsl:value-of select="."/>
                            </a>
                        </li>
                    </xsl:for-each>
                </ul>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

Я могу добавить список UL, который я создал с помощью JavaScript, к разделам horMenu и verMenu. И на основе правил CSS, которые я получил для ULS в horMenu и verMenu, список UL отображается по горизонтали и вертикали соответственно.
Когда я встраиваю XML-файл с помощью тега oject, он не может применить тот же CSS к ULS в XSLT.
ЖЕЛАЕМЫЙ РЕЗУЛЬТАТ

Комментарии:

1. Пожалуйста, укажите в своем вопросе желаемый результат и что не так с выводом, который вы получаете в данный момент.

2. @DimitreNovatchev Я могу добавить список UL, который я создал с помощью javscript, к разделам horMenu и verMenu. И на основе правил CSS, которые я получил для ULS в horMenu и verMenu, список UL отображается по горизонтали и вертикали соответственно. Когда я встраиваю XML-файл с помощью тега oject, он не может применить тот же CSS к UL, которые создаются с использованием XSLT. Надеюсь, я понимаю.

3. Нет, это не ясно. Ваша проблема в том, что вы не можете применить преобразование XSLT (в результате преобразования не получается никаких результатов)? Или что-то еще?

4. @DimitreNovatchev Я понимаю, что в результате преобразования не возникает никаких повторных запросов. У меня возник вопрос: как я могу применить правила CSS, которые я применил для UL в HTML, к UL, который я получил в файле XSL. Возможно ли это? UL получает свой стиль, основанный на том, какой DIV он размещен, он отображается горизонтально, если он находится в DIV horMenu, и вертикально, если он находится в DIV verMenu.

5. @_manraj82: Разумно, что xml-stylesheet PI теряет свое значение, когда упоминается только XML-документ. Вместо этого вам нужно вручную написать некоторый код Javascript для вызова преобразования, а затем поместить его результат куда-нибудь. Что касается CSS-части вашего вопроса, я почти ничего не знаю о CSS. Если ваш вопрос имеет мало или вообще ничего общего с XSLT, пожалуйста, отредактируйте теги и удалите тег xslt.