0

私は初めてjqueryです。最近website、カラー セレクターを実装する必要がある を設計しました。顧客は、Web サイトhttp://www.dulux.in/color_pallette_start.jspで使用されているカラー セレクターが必要であることを要求してい ます。jquery

4

1 に答える 1

0

jQuery を使用して、簡単なテーマ セレクターをご案内します。完了する前に、いくつかの手順があります。

  1. まず、テーマ化可能な要素を特定します。
  2. それらの要素だけに個別のスタイルを作成します。
  3. jQuery を使用してクラスを切り替えます。

パート 1: コンテンツ。

このようにサンプルコンテンツを用意しましょう:

<ul class="links">
    <li><a href="#">Link One</a></li>
    <li><a href="#">Link Two</a></li>
    <li><a href="#">Link Three</a></li>
</ul>
<div class="content">
<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
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<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
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
​&lt;/div>
<div class="clear">Copyright</div>

このためのレイアウト CSS を定義します。

.links {float: left; width: 25%; margin: 0; padding: 0;}
.links li a {display: block; padding: 5px; text-decoration: none;}
.content {float: left; width: 75%;}
.clear {clear: both; padding: 10px; text-align: center;}

パート II: テーマ CSS

3 つのテーマがあるとします。ライト、ダーク、ブルー。同じCSS：

.light {background: #fff;}
.light .links li a {color: #09f;}
.light .content p {color: #333;}

.dark {background: #000;}
.dark .links li a {color: #00f;}
.dark .content p {color: #ccc;}

.blue {background: #00f;}
.blue .links li a {color: #f00;}
.blue .content p {color: #0ff;}

パート III: 今度は JavaScript / jQuery スイッチャー。

クラスを追加または削除するだけです。テーマの名前はわかっているので、すべてのクラスを削除して正しいクラスを追加します。

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

このハンドラーをリンクに追加しました。ここで、リンクをテーマの名前で更新する必要があります。

<ul class="links">
    <li><a href="dark">Dark Theme</a></li>
    <li><a href="light">Light Theme</a></li>
    <li><a href="blue">Blue Theme</a></li>
</ul>

それぞれのテーマをクリックすると、ドキュメントのテーマが変更されます。

フィドル: http://jsfiddle.net/QSZ3R/

理解していただければ幸いです。簡単です。:)

カラー パレットについては、Color Picker - jQuery Pluginの使用が考えられます。

于 2012-09-06T06:07:46.440 に答える