korinthorama logo

ODYSSEY CMS

jQuery Plugins | Hidden Panel Bar

Τι είναι

Το jOpanel είναι ένα jQuery plugin που αναλαμβάνει να εμφανίσει στο πάνω μέρος της σελίδας μας μια μπάρα την οποία μπορούμε να σύρουμε προς τα κάτω και να μας εμφανίσει είτε το κρυφό περιεχόμενο του σχετικού DIV, είτε να μας αποκαλύψει τα περιεχόμενα ενός IFRAME.

Προσοχή! Το plugin για να λειτουργήσει σωστά, χρειάζεται και την βιβλιοθήκη jQuery UI

Demo

Δείτε εδώ ένα demo του jOpanel plugin

Οδηγίες χρήσης

Αφού το συμπεριλάβουμε στη σελίδα μας με

<script type='text/javascript' src='jOpanel.js'></script>

το εφαρμόζουμε στο DIV που επιθυμούμε με

$('#myDIV').jOpanel();

Παράμετροι

To plugin δέχεται τις ακόλουθες παραμέτρους:

  • closeEvent (αρ­χι­κή τιμή "click")
    Το mouse event με το οποίο θα κλείσει το panel (επαναφορά)
  • bgcolor (αρ­χι­κή τιμή "white")
    Το χρώμα φόντου του περιεχομένου σε περίπτωση που το ύψος του περιοεχομένου είναι μικρότερο από το ύψος του παραθύρου
  • width (αρ­χι­κή τιμή "100%")
    Το πλάτος του panel
  • openmsg (αρ­χι­κή τιμή "Drag to open...")
    Το εμφανιζόμενο κείμενο στη μπάρα πριν ανοίξουμε το panel
  • closemsg (αρ­χι­κή τιμή "Click to close the panel")
    Το εμφανιζόμενο κείμενο στη μπάρα όταν το panel είναι ανοικτό
  • textcolor (αρ­χι­κή τιμή "grey")
    Το χρώμα των openmsg & closemsg κειμένων
  • src (αρ­χι­κή τιμή false)
    Η διεύθυνση που θα χρησιμοποιηθεί ως src στο IFRAME του panel
  • duration (αρ­χι­κή τιμή 500)
    Η χρονική διάρκεια σε miliseconds για να ολοκληρωθεί το animation όταν ανοίγει ή κλείνει το panel
  • maxfollow (αρ­χι­κή τιμή 50)
    Η απόσταση σε pixels κατά την οποία η μπάρα ακολουθεί το ποντίκι μας, περιμένοντας να την πιάσουμε και να την σύρουμε (αυτόματη έλξη)
  • openmsg (αρ­χι­κή τιμή "Drag to open...")
    Το εμφανιζόμενο κείμενο στη μπάρα πριν ανοίξουμε το panel

 

Μέθοδοι

To plugin παρέχει τις ακόλουθες μεθόδους:

  • open
    Ανοίγει το panel
  • close
    Κλείνει το panel
  • destroy
    Καταργεί το panel

Παράδειγμα σύνταξης παραμέτρων

jQuery().ready(function(){
$('selector').jOpanel({
closeEvent: "click",
bgcolor:"white",
textcolor: "grey",
width:"100%",
openmsg: "drag to open...",
closemsg: "click to close the panel",
src: false,
duration: 500,
maxfollow: 50
});
});