colorpicker ui.colorpicker

颜色选择

<div class="ui-color-pick " data-name="">
    <ul>
        <li class="cur" style="background-color: #FFFFFF;" data-color="#FFFFFF">
            <i class="font-ico"></i>
        </li>
        <li style="background-color: #ececec;" data-color="#ececec">
            <i class="font-ico"></i>
        </li>
        <li style="background-color: #f9f2cd;" data-color="#f9f2cd">
            <i class="font-ico"></i>
        </li>
        <li style="background-color: #e2effe;" data-color="#e2effe">
            <i class="font-ico"></i>
        </li>
        <li style="background-color: #ffeceb;" data-color="#ffeceb">
            <i class="font-ico"></i>
        </li>
        <li style="background-color: #ffe7d3;" data-color="#ffe7d3">
            <i class="font-ico"></i>
        </li>
        <li style="background-color: #f3e9ff;" data-color="#f3e9ff">
            <i class="font-ico"></i>
        </li>
        <li style="background-color: #76923c;" data-color="#76923c">
            <i class="font-ico"></i>
        </li>
        <li style="background-color: #953734;" data-color="#953734">
            <i class="font-ico"></i>
        </li>
        <li style="background-color: #17365d;" data-color="#17365d">
            <i class="font-ico"></i>
        </li>
    </ul>
    <input type="hidden" name="" value="">
</div>

• 使用colorpicker控件时会自动生成样式
• 所有colorpicker控件需遵循这样的一个结构

呈现样式

具体效果可参见 http://www.kuaizhan.com/ui/ui-create

创建一个colorpicker

使用接口 ui.colorpicker 可以动态地创建一个颜色选择控件

参数（以JS Object形式给出）：
    mini: 是否使用mini样式 true或者false
    theme: 是否使用全色版的colorpicker,使用则设置值为"full"，此时不需要options字段；否则去掉该字段
    options: 颜色选择列表
    [
        {
            cur: 是否当前选中 true或者false,只能有一个选项为true
            value: 颜色值
        },
        ...
    ]

• theme字段和options字段二者选其一即可

示例代码:

//color picker
var form = $("#js-form-colorpicker"),
    cp = $("#js-put-color-picker"),
    cp_mini = $("#js-put-mini-color-picker"),
    cp_full = $("#js-put-full-color-picker");

cp.replaceWith(ui.colorpicker.create({
    "mini": false,
    "options": [
        {
            "cur": true,
            "value": "#FFFFFF"
        },
        {
            "value": "#ececec"
        },
        {
            "value": "#f9f2cd"
        },
        {
            "value": "#e2effe"
        },
        {
            "value": "#ffeceb"
        },
        {
            "value": "#ffe7d3"
        },
        {
            "value": "#f3e9ff"
        },
        {
            "value": "#76923c"
        },
        {
            "value": "#953734"
        },
        {
            "value": "#17365d"
        }
    ]
}));

cp_mini.replaceWith(ui.colorpicker.create({
    "mini": true,
    "options": [
        {
            "cur": true,
            "value": "#FFFFFF"
        },
        {
            "value": "#ececec"
        },
        {
            "value": "#f9f2cd"
        },
        {
            "value": "#e2effe"
        },
        {
            "value": "#ffeceb"
        },
        {
            "value": "#ffe7d3"
        },
        {
            "value": "#f3e9ff"
        },
        {
            "value": "#76923c"
        },
        {
            "value": "#953734"
        },
        {
            "value": "#17365d"
        }
    ]
}));

cp_full.replaceWith(ui.colorpicker.create({
    "mini": true,
    "theme": "full"
}));

ui.colorpicker.init(form);