2015-10-02 22 views
5

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".Menu a discesa personalizzato Trigger w/jQuery

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:


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.

risposta

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

Grazie, io implementare questo e provarlo. Non ho esperienza con la funzione Prototype, quindi stavo cercando come estendere la funzione open, non sapevo cosa stavo cercando, quindi questo è un grande aiuto. Dammi un po 'per implementare e provare. Riferirò con i miei risultati. – rockmandew

+0

L'estensione può essere semplicemente inserita nel mio file "site-scripts"?Non richiede alcun posizionamento speciale nella libreria perché sta usando l'oggetto, giusto? – rockmandew

+0

C'è un problema nel mio codice: la funzione non è realmente estesa, viene riscritta. Sto modificando la risposta. –