colorPicker

最新推荐文章于 2024-08-23 20:55:13 发布

Dolores_me

最新推荐文章于 2024-08-23 20:55:13 发布

阅读量95

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Dolores_me/article/details/133383721

版权

    /**
     * Radio Color Control
     *
     */
    function RadioColorControl(radios) {
        this.holder = radios[0].parentNode
                .parentNode.parentNode;
        this.defaultRadio = radios[0];
        this.colorRadio = radios[1];
        this.colorPicker = RadioColorControl.makeColorPicker(this);
        this.colorPicker.click(this.onColorClicked.bind(this));
        this.defaultRadio.onclick =
                this.colorRadio.onclick =
                        this.onRadioChange.bind(this);
    }

    RadioColorControl.makeColorPicker = function (instance) {
        var cp = $('<div class="colorPicker"></div>');
        // console.log(instance.colorRadio);
        return cp.insertAfter(instance.colorRadio.parentNode).ColorPicker({
            color: instance.colorRadio.value || titleColor,
            onChange: function (hsb, hex, rgb) {
                instance.onColorChange('#' + hex)}
        });
    };

    RadioColorControl.prototype.getName = function () {
        return this.defaultRadio.name;
    };

    RadioColorControl.prototype.getValue = function () {
        return this.defaultRadio.checked ? '' : this.colorRadio.value;
    };

    RadioColorControl.prototype.setValue = function (v) {
        if (v){
            this.colorRadio.checked = true;
            this.colorRadio.value = v;
            this.colorPicker.ColorPickerDisable(false);
            this.colorPicker.ColorPickerSetColor(v);
        } else {
            this.defaultRadio.checked = true;
            // this.defaultRadio.setAttribute('checked', true);
            // this.colorRadio.setAttribute('checked', false);
        }
    };

    RadioColorControl.prototype.onColorClicked = function () {
        if (this.colorRadio.checked) return;
        this.colorRadio.setAttribute('checked', true);
        this.onRadioChange();
    };

    RadioColorControl.prototype.onRadioChange = function () {
        console.log(this.colorRadio.checked);
        this.colorPicker.ColorPickerDisable(!this.colorRadio.checked);
        this.colorRadio.checked && this.onColorChange(this.colorPicker.ColorPickerGetColor());
        this.group.onchange(this);
    };

    RadioColorControl.prototype.onColorChange = function (hex) {
        this.colorRadio.value = hex;
    };