如何动态管理不同布局的样式表？

时间：2012-11-02 10:37:00

标签： javascript css templates dynamic

我正在努力建立一个门户，房地产经纪人可以展示他们的专业。每个用户都可以构建自己的彩色主题，但基本布局保持不变。用户只能在布局中更改背景颜色，不同块的文本颜色。管理这个的最佳方法是什么？

将所有详细信息保存在数据库中并提供css文件是否合适？我想这会延迟页面加载。还有其他选项，比如使用XML等吗？

1 个答案:

答案 0 :(得分：2)

您可以通过将一个类设置为每个用户的主body标记，从SQL数据库中获取字段，可能是theme。我早就写了一篇关于它是如何工作的教程。对你来说也一样：

Web中主题的简便方法

我们中的许多人都有这个问题。主题随处可见，但在我们自己的网站上主题呢？我们有桌面主题，wordpress主题，甚至我们的手机主题。我们不能在我们的网站上提供相同的功能吗？尽管我们已经看到许多具有主题功能的网站，但它们似乎很难！

传统网络主题

现在让我们看看网络中的传统主题是如何运作的。它们有两个以上的样式表（CSS），它们使用JavaScripts将原始样式表替换为新样式表。这是非常棘手和棘手的，因为不建议更改样式表href，旧浏览器也不支持它们！

提议轻松主题

嗯，还有另一种更好，更简单的方法，但不能替换DOM元素及其属性。由于CSS基于类和规则，因此最好将布局和表示分开，我们可以按类进行区分。好的，足够的理论。让我们去实践部分。

考虑一个网页XHTML 1.1，其中包含一些组件，即带链接的侧边栏，可以用HTML方式提供：

HTML 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title>Themed Website</title>            
    </head>
    <body>
        <div class="wrap">
            <div class="side">
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#" class="active">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                    <li><a href="#">Link 5</a></li>
                </ul>
            </div>
            <div class="main">
                <h1>Welcome</h1>
                <h2>A Paragraph</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
                </p>
                <h2>A List</h2>
                <ul>
                    <li>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    </li>
                    <li>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
                    </li>
                    <li>
                        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>

现在我们需要借助<link>标记以这种方式为文档添加一些样式：

<link rel="stylesheet" href="style.css" type="text/css" />

在style.css中，我们将首先添加样式来描述演示文稿的方式。

布局

首先是骨架CSS，对于此中的所有元素：

body {}
body .wrap {}
body .wrap .side {}
body .wrap .side ul {}
body .wrap .side ul li {}
body .wrap .side ul li a {}
body .wrap .side ul li a:hover {}
body .wrap .side ul li a.active {}
body .wrap .main {}
body .wrap .main h1 {}
body .wrap .main h2 {}
body .wrap .main p {}
body .wrap .main ul {}
body .wrap .main ul li {}
body .wrap .main ul li p {}

完全填写CSS，为我们提供：

body {font-family: segoe ui; background: #fff;}
body .wrap {width: 90%; margin: auto; overflow: hidden;}
body .wrap .side {width: 25%; float: left;}
body .wrap .side ul {margin: 0; padding: 0; list-style: none;}
body .wrap .side ul li {margin: 0; padding: 0; list-style: none;}
body .wrap .side ul li a {text-decoration: none; padding: 5px; display: block;}
body .wrap .side ul li a:hover {background: #ccc; color: #0ff;}
body .wrap .side ul li a.active {background: #0fc; color: #000;}
body .wrap .main {width: 75%; float: right; background: #0fc;}
body .wrap .main h1 {margin: 0; padding: 0 10px 10px;}
body .wrap .main h2 {margin: 0; padding: 10px;}
body .wrap .main p {margin: 0 10px 5px; text-align: justify;}
body .wrap .main ul {margin: 0 10px 10px;}

主题化

现在我们的工作将是识别可燃组件。这里，使用基本布局，我们可以仅设置无序列表的颜色和列表样式。让我们先了解这些风格。作为初学者的教程，我们只关注前景色和背景色，而不是布局。

body {color: ; background: ;}
body .wrap .side ul li a {color: ; background: ;}
body .wrap .side ul li a:hover {color: ; background: ;}
body .wrap .side ul li a.active {color: ; background: ;}
body .wrap .main {background: ;}
body .wrap .main h1 {color: ;}
body .wrap .main h2 {color: ; background: ;}
body .wrap .main p {color: ;}
body .wrap .main ul li p {color: ;}

现在有了这套规则，我们需要添加类。正文是内容中最顶级的父级。因此，我们将向<body>添加类并更改其他类的规则。

让我们将第一个类命名为.light，同样的CSS将是：

.light {color: #333; background: #f5f5f5;}
.light .wrap .side ul li a {color: #666; background: #eee;}
.light .wrap .side ul li a:hover {color: #333; background: #ddd;}
.light .wrap .side ul li a.active {color: #333; background: #0ff;}
.light .wrap .main {background: #0ff;}
.light .wrap .main h1 {color: #333;}
.light .wrap .main h2 {color: #666; background: #0fc;}
.light .wrap .main p {color: #093;}
.light .wrap .main ul li p {color: #09c;}

以上颜色是一些疯狂的组合。现在让我们创建另一个主题，让所有内容都为grayscale。所有颜色的红色，绿色和蓝色值应相同。

.grayscale {color: #333; background: #ccc;}
.grayscale .wrap .side ul li a {color: #666; background: #eee;}
.grayscale .wrap .side ul li a:hover {color: #333; background: #ddd;}
.grayscale .wrap .side ul li a.active {color: #333; background: #fff;}
.grayscale .wrap .main {background: #fff;}
.grayscale .wrap .main h1 {color: #333;}
.grayscale .wrap .main h2 {color: #fff; background: #999;}
.grayscale .wrap .main p {color: #666;}
.grayscale .wrap .main ul li p {color: #999;}

的JavaScript

我们将使用 jQuery 来简化我们的工作。因此，在<head>部分，我们将添加指向jQuery库的链接，可能来自 Google API 。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

请注意，出于稳定性目的，我们使用 jQuery 1.7.2 。现在要更改代码，我们需要添加三个链接或按钮来处理主题更改。因此，在HTML中，我们添加以下三个链接：

<强> HTML 

<div class="wrap themelinks">
    <h4>Change Themes:</h4>
    <a href="" class="theme">No Theme</a>
    <a href="light" class="theme">Light</a>
    <a href="grayscale" class="theme">Grayscale</a>
</div>

<强> CSS 

.wrap.themelinks {background: #fff; border-radius: 10px; clear: both; overflow: hidden; margin-top: 25px;}
.themelinks h4 {margin: 0; padding: 10px;}
.themelinks .theme {margin: 0 10px 10px; padding: 3px 5px; display: inline-block; background: #eee; border-radius: 5px; text-decoration: none; color: #f90}
.themelinks .theme:hover {background: #f90; color: #fff;}

<强>的jQuery 

$(document).ready(function(){
    $(".theme").click(function(){
        var theClass = $(this).attr("href");
        $("body").removeAttr("class").addClass(theClass);
        return false;
    });
});

在这里，我们只更改class标记的<body>属性，所有浏览器都支持该属性。我们还在链接的return false;函数中添加.click()，以便不传播到href标记的<a>属性中指定的链接。

最终HTML 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title>Themed Website</title>
        <style type="text/css">
            body {font-family: segoe ui; background: #fff;}
            body .wrap {width: 90%; margin: auto; overflow: hidden; border: 1px solid #ccc;}
            body .wrap .side {width: 25%; float: left;}
            body .wrap .side ul {margin: 0; padding: 0; list-style: none;}
            body .wrap .side ul li {margin: 0; padding: 0; list-style: none;}
            body .wrap .side ul li a {text-decoration: none; padding: 5px; display: block;}
            body .wrap .side ul li a:hover {background: #ccc; color: #0ff;}
            body .wrap .side ul li a.active {background: #0fc; color: #000;}
            body .wrap .main {width: 75%; float: right; background: #0fc;}
            body .wrap .main h1 {margin: 0; padding: 0 10px 10px;}
            body .wrap .main h2 {margin: 0; padding: 10px;}
            body .wrap .main p {margin: 0 10px 5px; text-align: justify;}
            body .wrap .main ul {margin: 0 10px 10px;}

            .light {color: #333; background: #f5f5f5;}
            .light .wrap .side ul li a {color: #666; background: #eee;}
            .light .wrap .side ul li a:hover {color: #333; background: #ddd;}
            .light .wrap .side ul li a.active {color: #333; background: #0ff;}
            .light .wrap .main {background: #0ff;}
            .light .wrap .main h1 {color: #333;}
            .light .wrap .main h2 {color: #666; background: #0fc;}
            .light .wrap .main p {color: #093;}
            .light .wrap .main ul li p {color: #09c;}

            .grayscale {color: #333; background: #ccc;}
            .grayscale .wrap .side ul li a {color: #666; background: #eee;}
            .grayscale .wrap .side ul li a:hover {color: #333; background: #ddd;}
            .grayscale .wrap .side ul li a.active {color: #333; background: #fff;}
            .grayscale .wrap .main {background: #fff;}
            .grayscale .wrap .main h1 {color: #333;}
            .grayscale .wrap .main h2 {color: #fff; background: #999;}
            .grayscale .wrap .main p {color: #666;}
            .grayscale .wrap .main ul li p {color: #999;}

            .wrap.themelinks {background: #fff; border-radius: 10px; clear: both; overflow: hidden; margin-top: 25px;}
            .themelinks h4 {margin: 0; padding: 10px;}
            .themelinks .theme {margin: 0 10px 10px; padding: 3px 5px; display: inline-block; background: #eee; border-radius: 5px; text-decoration: none; color: #f90}
            .themelinks .theme:hover {background: #f90; color: #fff;}
        </style>
        <script type="text/javascript">
            $(document).ready(function(){
                $(".theme").click(function(e){
                    var theClass = $(this).attr("href");
                    $("body").removeAttr("class").addClass(theClass);
                    return false;
                });
            });
        </script>
    </head>
    <body>
        <div class="wrap">
            <div class="side">
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#" class="active">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                    <li><a href="#">Link 5</a></li>
                </ul>
            </div>
            <div class="main">
                <h1>Welcome</h1>
                <h2>A Paragraph</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
                </p>
                <h2>A List</h2>
                <ul>
                    <li>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    </li>
                    <li>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
                    </li>
                    <li>
                        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="wrap themelinks">
            <h4>Change Themes:</h4>
            <a href="" class="theme">No Theme</a>
            <a href="light" class="theme">Light</a>
            <a href="grayscale" class="theme">Grayscale</a>
        </div>
    </body>
</html>

您可以查看jsBin中的工作演示。

相关问题
最新问题