Как показать / скрыть выпадающий контейнер выпадающего списка - PullRequest
Новая
       17

Как показать / скрыть выпадающий контейнер выпадающего списка

2 голосов
/ 05 сентября 2011

Я пытаюсь изменить dropdownchecklist , чтобы показать его отбрасываемый контейнер.Я вижу, что в исходном коде есть метод, но я не уверен, как его использовать.Я использую это внутри div, который скрыт, и это отображается при наведении курсора.Итак, я хочу, чтобы контейнер для показа показывался. 

...
// Shows and hides the drop container
_toggleDropContainer: function() {
    var self = this, dropWrapper = this.dropWrapper, controlWrapper = this.controlWrapper;
    // hides the last shown drop container
    var hide = function() {
        var instance = $.ui.dropdownchecklist.drop;
        if (null != instance) {
            instance.dropWrapper.css({
                top: "-3300px",
                left: "-3300px"
            });
            instance.controlWrapper.find(".ui-dropdownchecklist").toggleClass("ui-dropdownchecklist-active");
            instance.dropWrapper.find("input").attr("tabIndex", -1);
            instance.dropWrapper.drop = false;
            $.ui.dropdownchecklist.drop = null;
            $(document).unbind("click", hide);
            self.sourceSelect.trigger("blur");
        }
    }
    // shows the given drop container instance
    var show = function(instance) {
        if (null != $.ui.dropdownchecklist.drop) {
            hide();
        }
        instance.dropWrapper.css({
            top: instance.controlWrapper.offset().top + instance.controlWrapper.outerHeight() + "px",
            left: instance.controlWrapper.offset().left + "px"
        })
        var ancestorsZIndexes = controlWrapper.parents().map(
            function() {
                var zIndex = $(this).css("z-index");
                return isNaN(zIndex) ? 0 : zIndex}
            ).get();
        var parentZIndex = Math.max.apply(Math, ancestorsZIndexes);
        if (parentZIndex > 0) {
            instance.dropWrapper.css({
                zIndex: (parentZIndex+1)
            })
        }
        instance.controlWrapper.find(".ui-dropdownchecklist").toggleClass("ui-dropdownchecklist-active");
        instance.dropWrapper.find("input").attr("tabIndex", 0);
        instance.dropWrapper.drop = true;
        $.ui.dropdownchecklist.drop = instance;
        $(document).bind("click", hide);
        self.sourceSelect.trigger("focus");
    }
    if (dropWrapper.drop) {
        hide(self);
    } else {
        show(self);
    }
}
...

1 Ответ

2 голосов
/ 05 сентября 2011

Достаточно интересно, что автор предоставляет метод close для явного закрытия раскрывающегося списка, но не метод open.Вы можете легко расширить плагин, включив в него метод open: 

(function($) {
    $.ui.dropdownchecklist.prototype.open = function() {
        this._toggleDropContainer(true);
    }
})(jQuery);

И вы можете вызвать $('#downdrop').dropdownchecklist('open'), чтобы явно открыть раскрывающееся меню.Так, например, если вы хотите открыть его в событии mouseover / mouseenter, вы можете сделать следующее: 

$('#ddcl-downdrop').mouseenter(function() {
    $("#downdrop").dropdownchecklist('open');
});

Размеченный элемент имеет идентификатор с ddcl- передоригинального идентификатора.

Смотрите это в действии: http://jsfiddle.net/william/bq35U/1.

...