Trigger benutzerdefinierte Drop-Down w/jQuery

Question

Schließlich möchte ich eine Auswahl Dropdown-Menü, wenn ein Bild geklickt wird. Ich möchte die Funktion "Öffnen/Schließen" verwenden, die in der benutzerdefinierten jQuery-Bibliothek definiert ist, aber nicht herausfinden kann, wie auf die Funktion "Öffnen" zugegriffen wird.

Frage: Wie kann ich auf die in einer benutzerdefinierten jQuery-Bibliothek definierte Funktion "Öffnen" oder "Schließen" zugreifen? (Details siehe unten - bitte beachten Sie, ich habe null Erfahrung mit jQuery Prototypen, die ein großer Teil des Problems ist. - Ich bin nicht einmal sicher, ob ich richtig auf das Objekt zugreifen kann)

Jede Hilfe/Anregungen oder Anleitung sind

---

ich als Referenz der Codrops Simple Effects for Dropdowns Artikel verwendet geschätzt.

Konkret verweise ich Demo #4 in meinem Beispiel/Frage.

---

Das Beispiel verwendet eine benutzerdefinierte jQuery-Bibliothek für styling/Animieren von Dropdown-Listen:

• Dies ist die code repo (SimpleDropDownEffects)
• Hier ist die raw code (jquery.dropdown.js)

---

Es ist ziemlich einfach:

1. Zuerst legen Sie Ihre HTML "wählen Sie" (Drop-Down) Markup

   <select id="cd-dropdown" class="cd-select"> 
       <option value="-1" selected>Choose an animal</option> 
       <option value="1" class="icon-monkey">Monkey</option> 
       <option value="2" class="icon-bear">Bear</option> 
       <option value="3" class="icon-squirrel">Squirrel</option> 
       <option value="4" class="icon-elephant">Elephant</option> 
   </select> 
   

2. (Nachdem alle erforderlichen Projektdateien einschließlich) Sie Ihr Plugin Funktion

   nennen

   $('#cd-dropdown').dropdown(); 
   

3. Die Funktion wandelt dann unser "Select" Markup in die folgende Struktur um

   <div class="cd-dropdown"> 
       <span>Choose an animal</span> 
       <input type="hidden" name="cd-dropdown"> 
       <ul> 
        <li data-value="1"><span class="icon-monkey">Monkey</span></li> 
        <li data-value="2"><span class="icon-bear">Bear</span></li> 
        <li data-value="3"><span class="icon-squirrel">Squirrel</span></li> 
        <li data-value="4"><span class="icon-elephant">Elephant</span></li> 
       </ul> 
   </div> 
   

4. Dann reagiert die Funktion auf das Ereignis klicken als auf ihre Dokumentation angegeben:

Wenn auf der ersten Spanne klicken, werden wir die Klasse „CD-aktiv“ an ihre Mutter gelten, die Division mit die Klasse "cd-dropdown". Wenn Sie eine Option auswählen, wird der entsprechende Bereich in den ersten eingefügt.

---

Als nächstes werden die jquery.dropdown.js file enthält alle Definitionen, die die „Prototyp“ Methode gebaut verwendet - die wie ich schon erwähnt, ich null Erfahrung mit. Ich werde die ganze Datei nicht einschließen (da es eine link gibt), aber ich werde die zwei Funktionen einschließen, auf die ich versuche zuzugreifen, und wo ICH DENKEN es wird initialisiert.

Die Open-Funktion

open : function() { 
     var self = this; 
     this.dd.toggleClass('cd-active'); 
     this.listopts.css('height', (this.optsCount + 1) * (this.size.height + this.options.gutter)); 
     this.opts.each(function(i) { 

      $(this).css({ 
       opacity : 1, 
       top : self.options.rotated ? self.size.height + self.options.gutter : (i + 1) * (self.size.height + self.options.gutter), 
       left : self.options.random ? Math.floor(Math.random() * 11 - 5) : 0, 
       width : self.size.width, 
       marginLeft : 0, 
       transform : self.options.random ? 
        'rotate(' + Math.floor(Math.random() * 11 - 5) + 'deg)' : 
        self.options.rotated ? 
         self.options.rotated === 'right' ? 
          'rotate(-' + (i * 5) + 'deg)' : 
          'rotate(' + (i * 5) + 'deg)' 
         : 'none', 
       transitionDelay : self.options.delay && Modernizr.csstransitions ? self.options.slidingIn ? (i * self.options.delay) + 'ms' : ((self.optsCount - 1 - i) * self.options.delay) + 'ms' : 0 
      }); 

     }); 
     this.opened = true; 

    }, 

Die Close-Funktion

close : function() { 

     var self = this; 
     this.dd.toggleClass('cd-active'); 
     if(this.options.delay && Modernizr.csstransitions) { 
      this.opts.each(function(i) { 
       $(this).css({ 'transition-delay' : self.options.slidingIn ? ((self.optsCount - 1 - i) * self.options.delay) + 'ms' : (i * self.options.delay) + 'ms' }); 
      }); 
     } 
     this._positionOpts(true); 
     this.opened = false; 

    } 

it All

$.fn.dropdown = function(options) { 
    var instance = $.data(this, 'dropdown'); 
    if (typeof options === 'string') { 
     var args = Array.prototype.slice.call(arguments, 1); 
     this.each(function() { 
      instance[ options ].apply(instance, args); 
     }); 
    } 
    else { 
     this.each(function() { 
      instance ? instance._init() : instance = $.data(this, 'dropdown', new $.DropDown(options, this)); 
     }); 
    } 
    return instance; 
}; 

Aufruf

die Funktion einrichten - Anfängliche Definition

(function($, window, undefined) { 

'use strict'; 

$.DropDown = function(options, element) { 
    this.$el = $(element); 
    this._init(options); 
}; 

// the options 
$.DropDown.defaults = { 
    speed : 300, 
    easing : 'ease', 
    gutter : 0, 
    // initial stack effect 
    stack : true, 
    // delay between each option animation 
    delay : 0, 
    // random angle and positions for the options 
    random : false, 
    // rotated [right||left||false] : the options will be rotated to thr right side or left side. 
    // make sure to tune the transform origin in the stylesheet 
    rotated : false, 
    // effect to slide in the options. value is the margin to start with 
    slidingIn : false, 
    onOptionSelect : function(opt) { return false; } 
}; 

$.DropDown.prototype = { 

    _init : function(options) { 

     // options 
     this.options = $.extend(true, {}, $.DropDown.defaults, options); 
     this._layout(); 
     this._initEvents(); 

    }, 

Hoffentlich macht Sinn, jemanden und sie können mir helfen.

---

Fazit

Zusammenfassend möchte ich auf der Seite auf ein Bild klicken, die die gleiche Funktion/Effekte auslösen, wird/werden ausgeführt, wenn die Dropdown selbst angeklickt wird.

Ich bin mir nicht sicher, ob ich die richtige Frage bin zu fragen, damit ich beide fragen:

1. Wie kann ich die Funktion Objekt zugreifen im Prototyp definiert?
2. Wie kann ich die Dropdown-Funktion öffnen, wenn Sie auf ein anderes Element klicken? (* Hinweis - Dies funktioniert nicht wie ein normales Dropdown-Menü, von dem ich weiß, dass es schwierig, wenn nicht unmöglich ist, es zu erzwingen. Ich denke, ich sollte die gleiche Funktion ausführen können, die ausgeführt wird, wenn auf das Dropdown-Menü geklickt wird .)

Vielen Dank für Ihre Geduld und Hilfe bei dieser Angelegenheit.

Answer 1

nach verschiedenen Tests kam ich mit auf den Punkt:

$.extend(
    $.DropDown.prototype, { 
    open: function() { 
     // YOUR CODE HERE 
     alert('YYY'); 
    } 
    } 
); 

Sie es auf Konsole versuchen können, das Browser direkt auf der Komponente Webseite (DEMO 4) Sie in Ihrer Frage verknüpft:

http://tympanus.net/Development/SimpleDropDownEffects/index4.html

Prototyp-Methode "Öffnen" ist erweitert, wenn Sie auf das Dropdown klicken, erhalten Sie die Warnung. Sie können die Methode "close" auf die gleiche Weise erweitern.

Hoffe, das hilft.

EDIT:

das Drop-down über Javascript auszulösen, können Sie einfach tun:

$('.cd-dropdown span').mousedown();