想在jquery中设计一个配色方案

Question

我是jquery的新手。我最近设计了一个website，我需要在其中实现一个颜色选择器。 并且客户要求他需要网站http://www.dulux.in/color_pallette_start.jsp中使用的颜色选择器 请帮助我如何使用jquery

进行设计

Answer 1

我可以使用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>
​</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;}

第二部分：主题CSS

假设我们有三个主题。浅色，深色和蓝色。相同的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;}

第三部分：现在是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。