zblogPHP主题自定义颜色和调色板

zblogPHP主题自定义颜色和调色板

 2015-01-13 20:27    家居设计   标签：Z-BlogPHP 代码   1445    1

在主题HomeD1审核过程中，博士要求将主题配置中，涉及到颜色的部分，全部用调色板来实现，这对于我来说还比较陌生。

在我刚出来的这个主题中，我所有的颜色全部是让用户自定义的，就像这样：

<tr>
<td scope="row">左侧栏颜色*</td>
<td><input name="LeftColor" type="text" style="width:20%" value="<?php echo $zbp->Config('HomeD1')->LeftColor; ?>" /></input><span style="width:30px;height:auto;padding:0 10px;margin-left:10px;background-color:<?php echo $zbp->Config('HomeD1')->LeftColor; ?>"></span></td>
<td>留空为默认色<span style="width:30px;height:auto;padding:0 10px;margin-left:10px;background-color:#09bfd5"></span>：#09bfd5</td>
</tr>

这个方法比较简单，通过对输入值的提取和应用，很简单的实现了颜色的调用配置。但这个问题也十分明显，就是用户在乱填写颜色代码的时候，这个方法就无法发现相应问题了。

zblogPHP主题审核者对收费主题审核都比较严格，我第二个收费主题HomeD1在后台配置方面也运用了颜色设置，他们让我改善其使用方法。于是，我在网上搜索了相应的JQ调色板，套用在后台配置中。

调色板很简单，在相应位置上插入了JS和CSS文件。然后通过ID=""的方式进行调用。整个式样有点想photoshop里面的调色板。

用法：

下载该插件和 colpick.js 和 colpick.css 添加到您的文档的头：

<script src="js/colpick.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/colpick.css" type="text/css"/>

现在你可能会在任何 jQuery 对象来创建一个颜色选取器上调用colpick方法。默认情况下您获取下拉列表颜色选择器：

<button id="picker">Show Color Picker</button>
<script type="text/javascript">
    $('#picker').colpick();
</script>

选项：

传递给 colpick 函数作为对象的几个选项允许您自定义颜色选择器。例如，传递flat:true使颜色选取器总是可见的如下面的示例。

<div id="picker"></div>
<script type="text/javascript">
$('#picker').colpick({
    flat:true,
    layout:'hex',
    submit:0
});
</script>

• 查看演示：演示地址

• 代码下载：点击下载

• 文章代码来自：http://www.jq22.com/jquery-info367