jquery - 布局切换器（不仅仅是css） - Thinbug

布局切换器（不仅仅是css）

时间：2011-06-11 19:30:00

标签： jquery layout

我一直在寻找高低，但我找不到一个布局切换器，它不仅让我切换css而且还有html代码，并且还将用户选择的设置保存在cookie中。

我希望能够拥有多个网站布局和功能，让用户选择他/她喜欢的内容。无论用户设置什么布局，内容即文本都是相同的。

有没有人知道基于jquery的代码允许这个？我更喜欢jquery，但php也是可以接受的。

1 个答案:

答案 0 :(得分：1)

以您选择的格式将内容存储为xml。类似于以下内容

Page.xml

必须解析为PHP

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<?xml-stylesheet type="text/xsl" href="Layout-<?php echo $_COOKIE['layout'] ?>.xslt"?>
<page>
    <title> ... </title>
    <main-content> ... </main-content>
    <articles>
        <article>
            <title> ... </title>
            <content> ... </content>
        </article>
        <article> ... </article>
        <article> ... </article>
        <article> ... </article>
    </articles>
</page>

布局 - [名称] .xslt

<?xml version="1.0"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" encoding="utf-8" indent="yes" />
    <xsl:template match="/page">
        <xsl:text disable-output-escaping='yes'>&lt;!DOCTYPE html></xsl:text>
        <html>
            <head>
                <xsl:value-of select="title" />
            </head>
            <body>
                ...
                <!-- copy node as HTML -->
                <xsl:copy-of select="main-content/node()" />
                ...
                <xsl:apply-templates match="articles/article" />
            </body>
        </html>
    </xsl:template>
    <xsl:template match="article">
        <div>
            <h2><xsl:copy-of select="title" /></h2>

            <!-- copy node as HTML -->
            <xsl:copy-of select="content/node()" />
        </div>
    </xsl:template>
</xsl:stylesheet>

您只需将XML页面发送到客户端，他们的浏览器就会进行转换！