1

ウィジェットで標準の数字 ColorPaletteを使用しています。シンプルなツールで、うまく機能します。

しかし、透明または無色で展開する必要があります。いくつかの方法で対処できます。

  1. パレットの近くにボタンを追加して、色をクリアします
  2. からすべてのコードをコピーdijit/ColorPaletteして、モジュールでカスタム パレットを作成します
  3. dijit/ColorPaletteモジュール内の を 1none色だけ拡張します(望ましい方法)

単純な拡張が不可能な場合は、拡張dijit/ColorPalette方法またはアクションを実装する別の方法を教えてください。<set_none_color>

私は Dojo の初心者であり、正しい方法で対処したいと考えています。

4

3 に答える 3

2

一般に、道場 dijit を拡張する方法は次のようなものです。

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

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

dijit/ColorPaletteとをざっと見た後、透明色を含む新しいパレット配列を拡張して作成するか、使用してdijit/_PaletteMixinいる7x10 または 3x4 パレットを拡張することができます。また、おそらく、色なしで個別の値を返すことができるクラスで属性をオーバーライドする必要があります。dijit/ColorPalette_palettesdyeClass

ただし、これを行う場合、オプション1のようなものを使用します.

于 2013-09-11T22:22:40.267 に答える
1

dijit/ColorPalette (make subclass)を拡張することで問題を解決しました。欲しい基本機能を追加しました。一般的に、私は次のことを行いました：

  1. テンプレートをオーバーライドして、新しい要素のホルダーを追加します
  2. アルファ成分を制御するスライダーを追加
  3. 色とアルファonChangeチャンネルをブレンドし、色の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;   });
于 2013-09-13T12:06:01.423 に答える