修改

Question

我创建了一个简单的后台阻止小部件，它将创建一个阴影div来阻止除必需元素之外的所有内容。我从另一个小部件创建一个实例，如下所示：

// this.element is a jquery object
this.blocker = this.element.blocker();

这将添加一个＆＃34;后台阻止div＆＃34;通过改变z索引，我将this.element保留在顶部。这很好但我现在需要在顶部保留两个元素。是否可以使用多个元素创建窗口小部件的单个实例？我可以使用添加功能或作为选项添加其他元素，但不知道是否有更好的方法。

这个小提琴展示了它目前的运作方式。我想引用#unblocked2。（我知道剩下的代码还没有处理多个元素）

http://jsfiddle.net/cpj5y/5/

Answer 1

修改

由于我误读了我自己的代码，那将为每个被阻止的元素实例化一个阻止程序，我提出另一个解决方案，它接受一个选择器作为一个选项，从而允许创建一个小部件，并提出的元素是由选择器匹配。基于上面的小提琴，JS部分只有变化：http://jsfiddle.net/DzEFx/1/

(function ($) {
    $.widget('my.blocker', {
        options: {
            selector: null
        },
        _create: function() {
            var selector = this.options.selector || this.element;
            this.$blocker = $('<div/>', {
                css: {
                    backgroundColor: '#000000',
                    opacity: 0.4,
                    position: 'fixed',
                    top: 0,
                    bottom: 0,
                    left: 0,
                    right: 0,
                    zIndex: 99,
                }
            });

            selector.each(function(index) {
                var element = $(this); // the current element is passed as the this value
                var oldZIndex = element.css("z-index");
                element.data("old-z-index", oldZIndex);
                element.css("z-index", 1000);
            });
            this.$blocker.appendTo($('body'));
            return this._super();
        }
    });

    $('#btnBlock').click(function() {
        var anElement = $('.unblocked');
        $(document.body).blocker({selector: anElement});
    });

})(jQuery);

您可以看到窗口小部件现在有一个选项对象，其属性可以作为在创建窗口小部件时传递给第一个参数的对象进行覆盖。

OLD ANSWER

<小时/> 您需要为要允许的小部件使用类，并使用相应的选择器。请参阅此小提琴：http://jsfiddle.net/EQsA7/注意所需元素如何对其进行class="unblocked"，并查看修改后的按钮单击处理程序。

<强> HTML：

<div><input type="text" value="blocked"></div>
<div class="unblocked" id="unblocked1"><input type="text" value="unblocked"></div>
<div><input type="text" value="blocked"></div>
<div class="unblocked" id="unblocked2"><input type="text" value="unblocked"></div>
<div><input type="text" value="blocked"></div>

<input type="button" id="btnBlock" value="Block">

<强> JS：

(function ($) {
    $.widget('my.blocker', {

        _create: function() {
            this.$blocker = $('<div/>', {
                css: {
                    backgroundColor: '#000000',
                    opacity: 0.4,
                    position: 'fixed',
                    top: 0,
                    bottom: 0,
                    left: 0,
                    right: 0,
                    zIndex: 99,
                }
            });

            // this.element will refer to unblocked1
            // I want to access unblocked2 aswell

            this.originalZIndex = this.element.css('z-index');
            this.element.css('z-index', 100);
            this.$blocker.appendTo($('body'));
            return this._super();
        }
    });

    $('#btnBlock').click(function() {
        var anElement = $('.unblocked');
        anElement.blocker();
    });

})(jQuery);

使用多个选择器创建jquery小部件

1 个答案:

修改

OLD ANSWER