Question

我在我的小部件中使用标准数字ColorPalette 。它是一个简单的工具，它工作正常。

但我需要使用透明或 none 颜色展开它。我可以用几种方式处理它：

在调色板附近添加一个按钮以清除颜色
从dijit/ColorPalette复制所有代码以在我的模块中制作自定义调色板
仅在我的模块中dijit/ColorPalette扩展一个none颜色（首选方式）

如果简单扩展是不可行的，请指出如何扩展dijit/ColorPalette或其他方式来实施<set_none_color>行动。

我是Dojo的新手，我想以正确的方式处理它。

Answer 1

一般来说，扩展dojo dijit的方法如下：

define([
    'dojo/_base/declare',
    'dijit/ColorPalette'
], function(declare, ColorPalette) {

return declare([ColorPalette], {
    // add additonal functionality here
});});

快速查看dijit/ColorPalette和dijit/_PaletteMixin后，您可以扩展dijit/ColorPalette并在_palettes中创建一个包含透明色的新调色板阵列或扩展7x10或者你正在使用的3x4调色板。您还可能必须使用可以返回无颜色的不同值的类来覆盖dyeClass属性。

但是，如果我这样做，我会选择类似你的选项1。

Answer 2

如果您不想继承dijit/ColorPalette（如Thomas Upton的答案），可以使用dojo/_base/lang::extend向dojo/_base_lang::mixin添加功能和属性{1}}＆＃34; class。＆＃34;

ColorPalette

执行此操作将为require(["dojo/_base/lang", "dijit/ColorPalette"], function(lang, ColorPalette) { /* Extends the ColorPalette prototype */ lang.extend(ColorPalette, { newProperty: newValue }); });属性dijit/ColorPalette提供所有的未来实例newProperty。如果您只想将其应用于单个实例，请使用{{3}}实例。

require(["dojo/_base/lang", "dijit/ColorPalette"], function(lang, ColorPalette) {

    var cp = new ColorPalette({ /* properties */ });

    /* Mixes the second object __into__ the first object. */
    lang.mixin(cp, { 
        newProperty: newValue;
    });
}

Answer 3

我通过扩展dijit/ColorPalette （制作子类）解决了这个问题。我添加了我想要的基本功能。总的来说，我做了以下事情：

覆盖模板以添加新元素的持有者
添加控制alpha分量的滑块
覆盖onChange以混合颜色＆amp; alpha 频道并返回颜色的CSS值，还要添加onChangeCss来监控模块中的更改。

代码非常简单有效（这是可以改进的基本示例）

define([ "dojo/_base/declare", "dijit/ColorPalette", "dijit/form/HorizontalSlider",
     "dojo/_base/Color" ], function(declare,
    ColorPalette, HorizontalSlider, Color) {
return declare([ ColorPalette ], {
    //add some fields
    valueCss:'none',
    valueRgb:null,
    valueA:0,
    //override template
    templateString:'<div class="dijitInline dijitColorPalette" role="grid">'+
                        '<table><tr><td><span>Alpha</span></td>'+
                            ' <td><div data-dojo-attach-point="aSlider">  </div></td></tr></table>'+
                        '<table dojoAttachPoint="paletteTableNode" class="dijitPaletteTable" cellSpacing="0" cellPadding="0" role="presentation">'+
                            '<tbody data-dojo-attach-point="gridNode"> '+
                            '</tbody></table>'+
                    '</div>',

    postCreate: function(){
        //closure this
        var obj = this;
        this.value='#000000';
        //add slider
        this.alpha = new HorizontalSlider({
            name: "alpha",
            value: 0,
            minimum: 0,
            maximum: 5,
            discreteValues:6,
            intermediateChanges: true,
            style: "width:150px;",
            onChange: function(value){
                obj.valueA = this.value / this.maximum;
                obj.onChange(null);
            }
        }).placeAt(this.aSlider);

    },
    //override onChange to blend color & alpha and return CSS value 
    onChange: function(value){
        this.valueRgb = Color.fromHex(this.value);
        this.valueCss = Color.fromArray([this.valueRgb.r,this.valueRgb.g,this.valueRgb.b,this.valueA]).toCss(true);
        this.onChangeCss(this.valueA ? this.valueCss : 'transparent');
    },
    //use this method instead of onChange to trace color changing 
    onChangeCss: function(value){
    }
});

return ColorPalette;   });

如何使用自定义颜色扩展dijit / ColorPalette（特别是透明）

3 个答案: