Как я могу установить параметры для виджета JQuery - PullRequest
0 голосов
/ 05 февраля 2012

Я пытаюсь установить параметры для почти не видного флажка виджета от Wijmo. Вот код для виджета:

(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));

Может ли кто-нибудь помочь мне, рассказав, как настроить параметры для виджета, созданного фабрикой виджетов. Я не могу найти там ничего, что давало бы мне советы.

Обновление:

Я разместил полный код. Область комментариев - мои комментарии.

1 Ответ

5 голосов
/ 05 февраля 2012

Глядя на исходный код плагина (виджета), кажется, что у вас есть только один настраиваемый параметр option. Он называется disabled, и вы могли бы использовать его вот так ...

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

Это, вероятно, не упомянуто в документации, потому что плагин автоматически устанавливает "true", если свойство элемента disabled уже установлено в другом месте.

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

РЕДАКТИРОВАТЬ на основе комментариев ОП к исходному сообщению:

"... Я проверил код и вижу 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 - это переменная, представляющая параметры или параметры для плагина.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...