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:
- Questa è la code repo (SimpleDropDownEffects)
- Ecco la raw code (jquery.dropdown.js)
E 'abbastanza semplice:
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>
(Dopo aver incluso tutti i file di progetto necessari) È possibile chiamare la funzione plug
$('#cd-dropdown').dropdown();
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>
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:
- Come posso accedere all'oggetto funzione definita nel prototipo?
- 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.
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
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
C'è un problema nel mio codice: la funzione non è realmente estesa, viene riscritta. Sto modificando la risposta. –