0

我是新手jquery。我最近设计了一个website我需要在其中实现颜色选择器。并且客户要求他需要网站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;}

第二部分：主题 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。

于 2012-09-06T06:07:46.440 回答