Create jquery widget with multiple selectors

Question

I have created a simple background blocking widget that will create a shaded div to block everything except the required element. I create an instance from another widget like this:

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

This will add a "background blocking div" and by altering the z indexes I keep this.element on the top. This works fine but I now need to keep two elements on the top. Is it possible to create a single instance of a widget with multiple elements? I could add additional elements using an add function or as an option but don't know if there is a better way.

This fiddle shows how it currently works. I want to reference #unblocked2 as well. (I know the rest of the code won't handle multiple elements yet)

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

Kroltan · Accepted Answer · 2014-04-19 17:17:58Z

1

EDIT

Since I misread my own code, that would instantiate a blocker for every element being blocked, I present another solution, which accepts a selector as a option and thus allows the widget to be created once, and bring forward the elements that are matched by the selector. Based on the above Fiddle, there are only changes to the JS part: 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);

You can see that the widget now has a options object, whose properties can be overrided as a object passed to the first argument when creating the widget.

OLD ANSWER

You need to use a class for the widgets you want to allow to be visible, and use the according selector. See this Fiddle: http://jsfiddle.net/EQsA7/ Notice how the desired elements have class="unblocked" on them, and look at the modified button click handler.

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

edited Apr 19, 2014 at 17:17

answered Apr 19, 2014 at 11:29

Kroltan

5,1565 gold badges40 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Goose Over a year ago

I understand what you've done but that has applied 'blocker' to each element so that there are now two blocker divs. I'm looking to have one blocker which has references to more than one element so that each element is not blocked.

Kroltan Over a year ago

Oh, I see. Then you should use the whole containing element as the selector for the widget (or possibly, the whole document), and pass all other elements as a argument to your widget. I'll edit my answer

Kroltan Over a year ago

@Goose Done, see the answer again. Now only one widget is created for the whole group of elements.

Goose Over a year ago

I was thinking about something like that but the way you have implemented it is perfect. Thank you.

Collectives™ on Stack Overflow

Create jquery widget with multiple selectors

1 Answer 1

EDIT

OLD ANSWER

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

EDIT

OLD ANSWER

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related