javascript

Question

不動産業者が自分の資産を紹介できるポータルを構築しようとしています。各ユーザーは独自のカラーテーマセットを作成できますが、基本的なレイアウトは同じままです。ユーザーは、レイアウト内の異なるブロックの背景色、テキスト色のみを変更できます。これを管理する最善の方法は何ですか?

すべての詳細をデータベースに保存して css ファイルを提供するのは良いことですか? これにより、ページの読み込みが遅くなると思います。XMLなどを使用するような他のオプションはありますか?

score 2 · Accepted Answer

各ユーザーのメインタグにクラスを設定しbody、フィールドから取得することthemeで、SQL データベースから取得できます。私はずっと前に、それがどのように機能するかについてのチュートリアルを書きました。ここでも同じです：

Web でのテーマの簡単な方法

私たちの多くはこの疑問を抱くでしょう。テーマはどこにでもありますが、私たち自身の Web サイトのテーマについてはどうでしょうか? デスクトップテーマ、ワードプレステーマ、さらには携帯電話用のテーマもあります。私たちのウェブサイトで同じ機能を提供することはできませんか? テーマ機能を備えた多くの Web サイトを見てきましたが、難しいようです。

従来の Web テーマ

次に、Web の従来のテーマがどのように機能するかを見てみましょう。2 つ以上のスタイルシート (CSS) があり、JavaScript を使用して元のスタイルシートを新しいスタイルシートに置き換えます。hrefスタイルシートを変更することはお勧めできません。また、古いブラウザーはスタイルシートをサポートしていないため、これは非常に困難で注意が必要です。

提案された簡単なテーマ

DOM 要素とその属性を置き換えずに、同じことを行う別のより良い簡単な方法があります。CSS はクラスとルールに基づいているため、レイアウトとプレゼンテーションを分けた方がよいでしょう。クラスによって区別を付けることができます。さて、十分な理論です。実用的な部分に行きましょう。

いくつかのコンポーネント (リンク付きのサイドバー) を持つWeb ページを考えてみましょう。このページ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 はコンテンツの最上位の親です。そのため、にクラスを追加し<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;}

jQueryを使用して作業を簡素化します。そのため、この<head>セクションでは、おそらくGoogle APIからの jQuery ライブラリへのリンクを追加します。

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

安定性のためにjQuery 1.7.2を使用していることに注意してください。コードを変更するには、テーマの変更を処理する 3 つのリンクまたはボタンを追加する必要があります。したがって、HTML に次の 3 つのリンクを追加します。

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属性のみを変更しています。また、タグの属性で指定されたリンクに伝播しないように、リンクの機能に a を<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で動作するデモを確認できます。

javascript - さまざまなレイアウトのスタイルシートを動的に管理するにはどうすればよいですか?

1 に答える 1

Web でのテーマの簡単な方法

従来の Web テーマ

提案された簡単なテーマ

HTML

レイアウト

テーマ

JavaScript

最終的な HTML

Related

Reference