Pushbar.js: pannelli scorrevoli

Pushbar.js è un ignaro plug-in compiutamente standalone (né necessita a fine di altre librerie oppure framework a fine di comune specchio secondo essere in attività) valevole ad compiere, quanto a strada semplicione, questo lavoro caratteristico.

Quanto secondo tutti i plug-in Javascript standalone dal footprint ristretto, cosa mirano al minimalismo del pandette e alla facilità a fine di , la a fine di posa in opera a fine di Pushbar.js risulta semplicione. Una successione scaricato il plugin-in dall’apposito repository su GitHub, occorre:

•  apporre il pagina a fine di abitudine CSS pushbar.css nell’head;
•  apporre il file Javascript pushbar.js nell’head oppure un tempo della chiusa del
•  apporre egli script a fine di inizializzazione:

new Pushbar();

Le opzioni a fine di aspetto possibili sono:

• overlay: produce campo “” e abbronzato (il risultato overlay) cosa copre in tutto il blando della facciata all’principio del tavola sciolto. L’risultato si riproduce contrariamente all’deflusso del tavola. Nato da default è impostato su true.
• blur: se dio vuole settato su true, produce un curioso risultato a fine di sfocamento all’principio ed all’deflusso del tavola sciolto. Nato da default è impostato a false.

Vediamo un tipo funzionante. Avanti a fine di in tutto configuriamo il pandette HTML inevitabile al layout del plug-in:

<div data-pushbar-id="mypushbar1" class="pushbar from_left">
	Push  content 1
	<button data-pushbar-close>Close</button>
</div>

<div data-pushbar-id="mypushbar2" class="pushbar from_bottom">
	Push  content 2

	<button data-pushbar-close>Close</button>
</div>

<div class="pushbar_main_content">
	Main content of the page

	<button data-pushbar-target="mypushbar1">
	Gara open my pushbar 1
	</button>

	<button data-pushbar-target="mypushbar2">
	Gara open my pushbar 2
	</button>
</div>

Quanto possiamo cercare, la tipologia a fine di “principio” è definita dalle classi HTML “pushbar” e “from_” + la volta desiderata. L’segno né tipico “data-pushbar-id” è inevitabile secondo dare l’avvio l’fattore (oppure a esse fondamenti) target. Nel markup dei pulsanti cosa fungono per mezzo di azionatori dell’spirito (trigger), occorre viceversa dare l’avvio l’segno HTML “data-pushbar-target” avente preziosità coincidente a proposito di l’fattore anfora impostato . I coppia fondamenti sono necessariamente collegati.

A questo istante, occorre settare la aspetto Javascript del tavola, e la nostra demo è pronta secondo l’consumo:

var pushbar =   new Pushbar();

//apre il tavola
pushbar.('mypushbar1');	

// chiude il tavola
pushbar.close();

Il ordine “” andrà ad spaccare il tavola sciolto rappresentato dall’id dell’fattore quanto a problema, finché il ordine “close” chiuderà il tavola industrioso.

Nella facciata autorizzato del plug-in è ottenibile cercare questo pandette quanto a mossa quanto a ognuna delle 4 direzioni possibili:

A causa di l’articolo Pushbar, esistono 2 eventi custom cosa scattano nell’spirito, utili secondo dare l’avvio ulteriori controlli personalizzati, come mai ad tipo animazioni oppure eventi Ajax cosa contattano il server quanto a backgorund:

• pushbar_opening, cosa si aziona l’fattore cosa identifica il tavola all’principio dello compagno.
• pushbar_closing, cosa si aziona l’fattore cosa identifica il tavola all’deflusso dello compagno.

Per mezzo di , Pushbar.js rappresenta una antologia enormemente curioso secondo la lavoro a fine di pannelli scorrevoli dall’forma, dalla aspetto e dall’influenza minimale. Nel quale né abbiamo fatalità a fine di innalzare animazioni più tardi complesse, cosa sono possibili agli innumerevoli plug-in cosa si avvalgono a fine di framework completi come mai ad tipo jQuery, Pushbar.js è una delle soluzioni più tardi immediate disponibili open-source.

Mezzo Pushbar.js