Comment afficher/masquer la liste déroulante de la liste de contrôle de la liste déroulante

Question

J'essaie de modifier dropdownchecklist pour afficher son conteneur de dépôt. Je vois qu'il y a une méthode dans le code source mais je ne suis pas sûr de savoir comment l'utiliser. Je l'utilise dans un div qui est caché et il est montré au passage de la souris. Donc, je veux montrer le conteneur de baisse pendant ce temps.

... 
// 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); 
    } 
} 
... 

Answer 1

Assez intéressant, l'auteur propose une méthode close pour fermer explicitement la liste déroulante, mais pas une méthode open. Vous pouvez facilement étendre le plug-in pour inclure la méthode open:

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

Et vous pouvez appeler $('#downdrop').dropdownchecklist('open') pour ouvrir explicitement le menu déroulant. Donc, pour exmaple, si vous voulez l'ouvrir sur l'événement mouseover/mouseenter, vous pouvez effectuer les opérations suivantes:

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

L'élément balisé a une carte d'identité avec ddcl- devant l'ID d'origine. Voir à l'action: http://jsfiddle.net/william/bq35U/1