`ColorTextBox.js`

Question

我正在考虑创建一个颜色选择器，以便从我的一个小部件中调用。用户可以单击按钮调出颜色选择器并单击颜色，然后将其返回到调用窗口小部件。

我在想我需要创建一个延迟对象，它会以某种方式等待延迟解析。然后我可以将该颜色设置为调用小部件中的变量。但是我无法绕过它。

我的调用小部件有一个这样的方法：

pickColor: function (e) {
    Event.stop(e);
    var colorPicker = new ColorWidget();
    colorPicker.getColor().then(function (value) {
        console.log(value);
    });
}

我的ColorWidget将是创建延迟对象的那个，对吗？

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dojo/text!./templates/ColorWidget.html",
    "dojo/Deferred",
    "dojo/_base/Color",
    "dojo/dom-construct",
    "dojo/domReady!"],

function (declare, _WidgetBase, _TemplatedMixin, template, Deferred, Color, domConstruct) {

    return declare("ColorWidget", [_WidgetBase, _TemplatedMixin], {
        templateString: template,
        deferred: {},
        color: {},

        constructor: function () {
            this.deferred = new Deferred();
        },
        postCreate: function () {
            domConstruct.place(this.domNode, "color-picker-holder", "last");
        },
        pick: function (evt) {
            this.color = new Color(evt.srcElement.id);
            domConstruct.destroy(this.domNode);
            this.deferred.resolve(this.color);
        },
        getColor: function () {
            return this.deferred;
        }
    });
});

这只是我头脑中的一个想法，但它是如何设计的？我可能会对登录对话框使用相同的想法，该对话框将停止初始化页面，直到成功进行身份验证。这是对的吗？

编辑：我实际上正在进行中。这很有效。

Answer 1

虽然你说你已经回答了自己的问题，但我会回答一个更好的解决方案，因为我认为其他用户也可能会尝试使用延迟（这可能是完全错误的）。

你想要做的是......

1）创建颜色选择器，使其成为表单元素。您只需要扩展一个有效的dojo表单元素。（我选择为我的颜色选择器扩展ValidationTextBox）。

2）创建一个接受回调函数的自定义小部件。您可以覆盖onChange，也可以使用自定义_callback方法。只要值发生变化（您可以使用观察者方法.watch（）），您就可以调用回调。

3）您只需正常连接到onChange事件。

我创建了一个自定义Dojo小部件..看起来像这样：

拾色器

enter image description here

当您单击颜色选择器或文本框获得“焦点”时，DropDown将打开，其中包含颜色选择器。颜色选择器一旦更改，就会更新父窗口小部件（即文本区域）。

您可以在下面看到相关的课程。它被分成几个文件......

ColorTextBox.js（扩展ValidationTextBox）

_ColorPickerDropDown.js（只是一个创建颜色选择器的简单小部件）

守则

`ColorTextBox.js`

define([
    "dijit/form/ValidationTextBox",
    "dojo/_base/declare",
    "dojox/widget/ColorPicker",
    "dojo/text!./ColorTextBox.html",
    "dijit/_HasDropDown",
    "my/diskit/form/_ColorPickerDropDown",
    "dojo/_base/lang",
    "dojo/dom-style"

    ], function(ValidationTextBox, declare, ColorPicker, template,
        _HasDropDown, _ColorPickerDropDown, lang, domStyle ){
    return declare([ ValidationTextBox , _HasDropDown ], {
        templateString : template,
        regExp: "(?:[0-9a-fA-F]{3}){1,2}",

        baseClass: "diskitColorTextBox",
        postCreate : function(){

            this.connect(this.focusNode, "onclick", "openDropDown");
            this.watch( "value", lang.hitch( this, function(attr, oldVal, newVal){

                if(newVal === ""){
                    domStyle.set(this._buttonNode, "background", "transparent" );
                } else {
                    domStyle.set(this._buttonNode, "background", "#" + newVal );
                }
            }) );
            this.inherited( arguments );
        },
        openDropDown: function(/*Function*/ callback){

            if( this.dropDown ){
                this.dropDown.destroyRecursive();
            }
            var _changeMethod = function(){
                var hex = this.picker.get('value');
                if (hex.substring(0, 1) === '#') {
                    hex = hex.substring(1);
                    this.parent.set('value', hex);
                }
            };

            var lastHex = this.get('value');

            this.dropDown = new _ColorPickerDropDown({
                parent : this,
                value : "#" + lastHex,
                onCancel : lang.hitch( this.dropDown, function(){
                     this.parent.set('value', lastHex );
                }),
                onChange :lang.hitch( this.dropDown, _changeMethod ),
                onExecute : lang.hitch( this.dropDown, _changeMethod )
            });

            this.inherited(arguments);
        },
        closeDropDown: function() {
            this.inherited(arguments);
            if (this.dropDown) {
                this.dropDown.destroy();
                this.dropDown = null;
            }
        }



    });

});

`Template String`

<div class="itemCheckWrapper colorPicker">
    <fieldset>
        <div ><label>${label}</label></div>
        <div data-dojo-attach-point="_buttonNode" class="colorPreview"></div>
        <div class="dijitTextBox small dijit dijitReset dijitInline dijitLeft" id="widget_${id}" role="presentation">
            <div class="diskitInputPrefix" data-dojo-attach-point="verifiedNumberPrefixNode" >
                    #
            </div>
            <div class='dijitReset dijitValidationContainer'>
                <input class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner" value="&#935; " type="text" tabIndex="-1" readonly="readonly" role="presentation"        />
            </div>
            <div class="dijitReset dijitInputField dijitInputContainer">
                <input maxlength="6" class="dijitReset dijitInputInner" data-dojo-attach-point='_aroundNode,textbox,focusNode' autocomplete="off" ${!nameAttrSetting} type='${type}'/>
            </div>
        </div>
    </fieldset>

</div>

然后这就是ColorPicker，它只是扩展了dojox / widget / ColorPicker ......

`ColorPickerDropDown.js`

define([
    "dojo/_base/declare",
    "dojox/widget/ColorPicker",
    "dojo/text!./_ColorPickerDropDown.html",
    "my/diskit/_base/_DiskitMixin",
    "dojo/_base/lang"
    ], function( declare, ColorPicker, template, _DiskitMixin, lang ){
    return declare([ _DiskitMixin ], {
        templateString : template,
        baseClass: "diskitColorPickerDropDown",
        postCreate : function(){


            this.picker = new ColorPicker({
                animatePoint:false,
                showHsv: false,
                showRgb: false,
                webSafe:false,
                onChange :  lang.hitch( this, this.onChange )
            }, this._colorPickerNode);
            if(this.value.length === 7){
                this.picker.setColor( this.value.trim() );
            }
            this.inherited( arguments );
        },
        onCancel : function(){

        },
        onExecute : function(){

        }
    });

});

Template String

<div >
<div data-dojo-attach-point="_colorPickerNode"></div>
<div class='toolbar'>
    <a data-dojo-attach-event="onclick:onCancel" class='pull-right'>Cancel</a>
    <a data-dojo-attach-event="onclick:onExecute" class='btn btn-sm btn-default pull-right'>Select</a>
</div>
</div>

创建一个延迟的dojo以等待用户输入

1 个答案:

拾色器

守则

`ColorTextBox.js`

`Template String`

`ColorPickerDropDown.js`