Question

我正在尝试从Wijmo设置几乎UNDOCUMENTED复选框小部件的选项。这是小部件的代码：

(function ($) {
    "use strict";
    var checkboxId = 0;
    $.widget("wijmo.wijcheckbox", {
        _csspre: "wijmo-checkbox",
        _init: function () {
            var self = this,
                ele = self.element,
                o = self.options,
                checkboxElement, label, targetLabel, boxElement, iconElement;
            if (ele.is(":checkbox")) {
                if (!ele.attr("id")) {
                    ele.attr("id", self._csspre + checkboxId);
                    checkboxId += 1;
                }
                if (ele.parent().is("label")) {
                    checkboxElement = ele.parent()
                    .wrap("<div class='" + self._csspre + "-inputwrapper'></div>")
                    .parent()
                    .wrap("<div></div>").parent().addClass(self._csspre + " ui-widget");
                    label = ele.parent();
                    label.attr("for", ele.attr("id"));
                    checkboxElement.find("." + self._csspre + "-inputwrapper")
                    .append(ele);
                    checkboxElement.append(label);
                }
                else {
                    checkboxElement = ele
                    .wrap("<div class='" + self._csspre + "-inputwrapper'></div>")
                    .parent().wrap("<div></div>").parent()
                    .addClass(self._csspre + " ui-widget");
                }
                targetLabel = $("label[for='" + ele.attr("id") + "']");
//              if (targetLabel.length > 0) {
//                  checkboxElement.append(targetLabel);
//                  targetLabel.attr("labelsign", "C1");
//              }
                if (ele.is(":disabled")) {
                    self._setOption("disabled", true);
                }
                boxElement = $("<div class='" + self._csspre +
                "-box ui-widget ui-state-" +
                (o.disabled ? "disabled" : "default") +
                " ui-corner-all'><span class='" +
                self._csspre + "-icon'></span></div>");
                iconElement = boxElement.children("." + self._csspre + "-icon");
                checkboxElement.append(boxElement);
                ele.data("iconElement", iconElement);
                ele.data("boxElement", boxElement);

                boxElement.removeClass(self._csspre + "-relative")
                .attr("role", "checkbox")
                .bind("mouseover", function () {
                    ele.mouseover();
                }).bind("mouseout", function () {
                    ele.mouseout();
                });
                if (targetLabel.length === 0 || targetLabel.html() === "") {
                    boxElement.addClass(self._csspre + "-relative");
                }
                ele.bind("click.checkbox", function (e) {
                    self.refresh(e);
                }).bind("focus.checkbox", function () {
                    if (o.disabled) {
                        return;
                    }
                    boxElement.removeClass("ui-state-default").addClass("ui-state-focus");
                }).bind("blur.checkbox", function () {
                    if (o.disabled) {
                        return;
                    }
                    boxElement.removeClass("ui-state-focus").not(".ui-state-hover")
                    .addClass("ui-state-default");
                }).bind("keydown.checkbox", function (e) {
                    if (e.keyCode === 32) {
                        if (o.disabled) {
                            return;
                        }
                        self.refresh();
                    }
                });

                boxElement.bind("click.checkbox", function (e) {
                    ele.get(0).checked = !ele.get(0).checked;
                    ele.change();
                    ele.focus();
                    self.refresh(e);
                });

                self.refresh();
                checkboxElement.bind("mouseover.checkbox", function (e) {
                    if (o.disabled) {
                        return;
                    }
                    boxElement.removeClass("ui-state-default").addClass("ui-state-hover");

                }).bind("mouseout.checkbox", function (e) {
                    if (o.disabled) {
                        return;
                    }
                    boxElement.removeClass("ui-state-hover").not(".ui-state-focus")
                    .addClass("ui-state-default");
                });
            }
        },

        refresh: function (e) {
            var self = this;
            self.element.data("iconElement")
            .toggleClass("ui-icon ui-icon-check", self.element.get(0).checked);
            self.element.data("boxElement")
            .toggleClass("ui-state-active", self.element.get(0).checked)
            .attr("aria-checked", self.element.get(0).checked);
            if (e) {
                e.stopPropagation();
            }
        },

        destroy: function () {
            var self = this, boxelement = self.element.parent().parent();
            boxelement.children("div." + self._csspre + "-box").remove();
            self.element.unwrap();
            self.element.unwrap();
            $.Widget.prototype.destroy.apply(self);
        }
    });
} (jQuery));

有人可以通过告诉我如何在小工具工厂创建的小部件上设置选项来帮助我。我找不到任何能给我建议的东西。

更新：

我发布了完整的代码。评论区域是我的评论。

Answer 1

查看插件（小部件）的源代码，看起来您只有一个可配置的选项参数。它被称为disabled，你可以像这样使用它......

$(document).ready(function () {
    $(":input[type='checkbox']").wijcheckbox({
        disabled: true
    });
});

文档中可能没有提到，因为如果元素的disabled属性已经设置在别处，插件会自动将其设置为“true”。

if (ele.is(":disabled")) {
    self._setOption("disabled", true);
}

基于OP对原始帖子的评论编辑：

“...我检查了代码，我看到o = self.options, checkboxElement, label, targetLabel, boxElement, iconElement;如果我知道如何设置这些我就没事了......”

逗号后面的项目列表不是o，self.options或任何用户可配置选项或参数的任何部分。它们只是插件内部的附加变量声明。

换句话说，这......

var self = this,
    ele = self.element,
    o = self.options,
    checkboxElement, label, targetLabel, boxElement, iconElement;

只是简写（和更有效的代码）...

var self = this;
var ele = self.element;
var o = self.options;
var checkboxElement;
var label;
var targetLabel;
var boxElement;
var iconElement;

o是表示插件的选项或参数的变量。

如何在jQuery小部件上设置选项

1 个答案: