Top

jDrawer, slidebar in jQuery

jDrawer è un interessante slidebar realizzata in jQuery, che mertette di dare un effetto molto bello al passaggio del mouse sulla barra. E’ disponibile sia in orrizontale che in verticale.

Per chi non conosce jQuery, si tratta di una libreria Ajax opensource molto leggera e contenente diversi plugin tra cui il presente jDrawer.

Dichiarazione del plugin

Come potete vedere nel codice riportato sotto, per utlizzare il plugin bisogna includere due file js e specificare come si deve comportare la funzione. Tutti i file sono disponibili in un pacchetto nel sito dedicato.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jDrawer.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function($)
	{
	$("#jDrawer-1").jDrawer({event: "click"});
	$("#jDrawer-2").jDrawer({speed: 500, sticky: false});
	$("#jDrawer-3").jDrawer({direction: "left", sticky: false});
	$("#jDrawer-4").jDrawer({direction: "left", event: "click"});
	$("#jDrawer-5").jDrawer();
	$("#jDrawer-6").jDrawer({callback:
                                function() { alert("hover"); } });
	});
</script>

Nel codice sono presenti sei modi diversi di utilizzo, le variabili possibili sono circa una decina, di seguito vi presento alcune delle variabili principali.

Variabili utilizzabili

  • direction (v1.0), definisce la direzione della sidebar. Es: “top” o “left”. Di default è: “top”.
  • layout (v0.9), definisce la direzione dlla sidebar. Es: “vertical” o “horizontal”. Di default è: “vertical”.
  • speed, Tempo di apertura dell’animazione. Es: 250 o 666. Di default è: 300.
  • delay,tempo in millisecondi prima che parta l’animazione. Es: 200 o 1000. Di default è: 0.
  • color, colore di sfondo. Es: “#000” o “#CDCDCD”. Di default è: “#FFF”.
  • sticky,Visualizzare o no a passaggio del mouse. Se False, necessita di click. Possibili true o false. Di default è: true.
  • zindex,Distanza style  di z-index. Es: 5 o 100. Di default è: 0.
  • event, eventi all’apertura :”click” or “mouseover”. default: “hover”.
  • callback, Definizione di particolari funzioni. Es: function() { alert(“hello world”); }. default: undefined.

Dimostrazione di jDrawer

Home page del plugin

email
Related Posts Plugin for WordPress, Blogger...

Non perdere l'opportunità di ricevere il meglio di Ziogeek!


Commenti


Fatal error: Uncaught Exception: 12: REST API is deprecated for versions v2.1 and higher (12) thrown in /home/ziogeek/public_html/wp-content/plugins/seo-facebook-comments/facebook/base_facebook.php on line 1273