Menu a discesa personalizzato Trigger w/jQuery

Question

In definitiva, desidero attivare o disattivare un menu a discesa quando si fa clic su un'immagine. Voglio utilizzare la funzione "apri/chiudi", che è definita nella libreria jQuery personalizzata, ma non riesco a capire come accedere alla funzione "apri".

Domanda: Come accedere alla funzione "aperta" o "chiusa" definita in una libreria jQuery personalizzata? (Altri dettagli di seguito - si prega di notare , Io ho zero esperienza utilizzando jQuery Prototipi, che è una grande parte di questo problema -. Io non sono nemmeno sicuro se posso accedere all'oggetto correttamente)

Qualsiasi aiuto/suggerimenti o linee guida è apprezzato

---

sto usando l'articolo Codrops Simple Effects for Dropdowns di riferimento.

In particolare, sto facendo riferimento a Demo #4 nel mio esempio/domanda.

---

L'esempio utilizza una libreria jQuery personalizzato per lo styling/menù a discesa che animano:

• Questa è la code repo (SimpleDropDownEffects)
• Ecco la raw code (jquery.dropdown.js)

---

E 'abbastanza semplice:

1. Per prima cosa è lay out il codice HTML "select" (discesa) 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. (Dopo aver incluso tutti i file di progetto necessari) È possibile chiamare la funzione plug

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

3. La funzione quindi trasforma il nostro markup "select" nella seguente struttura

   <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. Poi la funzione risponde all'evento click come specificato sul loro documentazione:

Cliccando sulla prima campata, si applicherà la classe “cd-attiva” al suo genitore, la divisione con la classe "cd-dropdown". Quando si seleziona un'opzione, la relativa span verrà inserita nella prima.

---

Avanti, il jquery.dropdown.js file contiene tutte le definizioni, che è costruito utilizzando il metodo del "prototipo" - che, come ho detto prima, ho esperienza zero utilizzando. Non includerò l'intero file (poiché c'è un link) ma includerò le due funzioni a cui sto tentando di accedere e dove I THINK viene inizializzato.

The Open Funzione

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; 

    }, 

la funzione di chiusura

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; 

    } 

Calling 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; 
}; 

Impostazione della funzione - definizione iniziale

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

    }, 

Speriamo che questo ha un senso a qualcuno e che mi può aiutare.

---

Conclusione

In sintesi, voglio cliccare su un'immagine sulla pagina, che attiverà la stessa funzione/effetti che viene/vengono eseguiti quando la discesa si fa clic.

non sono sicuro se sto facendo la domanda giusta in modo Chiederò entrambi:

1. Come posso accedere all'oggetto funzione definita nel prototipo?
2. Come posso eseguire la funzione di apertura a discesa quando si fa clic su un altro elemento? (* Nota - Questo non funzionerà come un normale menu a discesa, che so è difficile, se non impossibile da forzare. Sto pensando che dovrei essere in grado di eseguire la stessa funzione che viene eseguita quando si fa clic sul menu a discesa .)

Grazie per la vostra pazienza e aiuto in questa materia.

Answer 1

dopo vari test sono arrivato fino a questo:

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

si può provare sulla console del browser direttamente sul sito del componente (DEMO 4) si è collegato in vostra domanda:

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

Il metodo del prototipo "aperto" è esteso, quando si fa clic sul menu a discesa viene visualizzato l'avviso. È possibile estendere facilmente il metodo "chiudi" allo stesso modo.

Spero che questo aiuti.

EDIT:

per innescare la discesa tramite javascript, si può semplicemente fare questo:

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