jQuery ContentHover Plugin

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
greekbytes
WebDev Moderator
Δημοσιεύσεις: 2438
Εγγραφή: 15 Νοέμ 2002 15:42
Τοποθεσία: Αθήνα
Επικοινωνία:

jQuery ContentHover Plugin

Δημοσίευση από greekbytes » 15 Δεκ 2011 14:53

Εικόνα

Έφτιαξα ένα μικρό jQuery plugin που εμφανίζει html περιεχόμενο πάνω από κάποιο element στο hover. Προς το παρόν έχει 3 εφέ διαθέσιμα, το απλό "show", "fade" και "slide".

Download και documentation: jQuery ContentHover Plugin

Παραδείγματα: Examples & Usage



Χρήση του plugin

Η χρήση του plugin είναι απλή. Πρέπει να έχουμε φορτώσει την jquery και το plugin...

Κώδικας: Επιλογή όλων

<script src="http&#58;//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.contenthover.js"></script>
Αν για παράδειγμα θέλουμε όταν κάνουμε hover πάνω από μια εικόνα να εμφανίσουμε ένα κείμενο, προσθέτουμε ένα div με class="contenthover" αμέσως μετά την εικόνα:

Κώδικας: Επιλογή όλων

<img class="myimage" src="image.jpg" width="300" height="240" />
<div class="contenthover" style="padding&#58;20px">Αυτό θα εμφανιστεί πάνω από την εικόνα στο hover!</div>
Μετά τρέχουμε το plugin:

Κώδικας: Επιλογή όλων

<script>
$&#40;function&#40;&#41;&#123;
    $&#40;'.myimage'&#41;.contenthover&#40;&#41;;
&#125;&#41;;
</script>
Η λογική είναι αυτή. Δεν είναι απαραίτητο να χρησιμοποιηθεί πάνω σε εικόνα, μπορεί να τρέξει πάνω σε οποιοδήποτε block element.

Χρειάζεται ορισμένο width/height, αν δεν υπάρχει στο element με css ή τα attributes width="xx" height="xx" θα πρέπει να το δηλώσουμε στα options (width/height).


Διαθέσιμα options με τις default τιμές τους

Κώδικας: Επιλογή όλων

data_selector&#58; '.contenthover', // The selector for the element that will be the content of the overlay element to show on hover
width&#58; 0,                       // Set to 0 to let the plugin figure it out
height&#58; 0,                      // Set to 0 to let the plugin figure it out
overlay_width&#58; 0,               // The overlay element's width. Set to 0 to use the same as 'width'
overlay_height&#58; 0,              // The overlay element's height. Set to 0 to use the same as 'height'
overlay_x_position&#58; 'center',   // &#91;center, left, right&#93; The position of the overlay horizontally &#40;if overlay_width is different from width&#41;
overlay_y_position&#58; 'bottom',   // &#91;center, top, bottom&#93; The position of the overlay vertically &#40;if overlay_width is different from width&#41;
overlay_background&#58; '',         // The css background of the overlay element
overlay_opacity&#58; 1,             // &#91;0-1&#93; The opacity of the overlay element
effect&#58; 'fade',                 // &#91;fade, slide, show&#93; The effect to use
fade_speed&#58; 400,                // Effect ducation for the 'fade' effect only
slide_speed&#58; 400,               // Effect ducation for the 'slide' effect only
slide_direction&#58; 'bottom',      // &#91;top, bottom, right, left&#93; From which direction should the overlay apear, for the slide effect only
zindex&#58; 2,                      // The base z-index value
wrapper_class&#58; 'ch_wrapper',    // CSS class to add to the wrapper
normal_class&#58; 'ch_normal',      // CSS class to add to the 'normal' element
hover_class&#58; 'ch_hover',        // CSS class to add to the 'hover' element
onshow&#58; function&#40;&#41;&#123;&#125;,           // Callback function when the 'hover' element is shown
onhide&#58; function&#40;&#41;&#123;&#125;            // Callback function when the 'hover' element is hidden
Σχόλια / bug reports ευπρόσδεκτα :)

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

jQuery ContentHover Plugin

Δημοσίευση από korgr » 15 Δεκ 2011 19:52

Ωραίος!
Thanks for sharing :)

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

jQuery ContentHover Plugin

Δημοσίευση από apsuh0s » 16 Δεκ 2011 10:55

Μπράβο!
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
greekbytes
WebDev Moderator
Δημοσιεύσεις: 2438
Εγγραφή: 15 Νοέμ 2002 15:42
Τοποθεσία: Αθήνα
Επικοινωνία:

jQuery ContentHover Plugin

Δημοσίευση από greekbytes » 17 Δεκ 2011 19:44

Thanks guys!

Άβαταρ μέλους
xmavidis
Honorary Member
Δημοσιεύσεις: 1217
Εγγραφή: 02 Δεκ 2003 19:59
Τοποθεσία: Ηράκλειο

jQuery ContentHover Plugin

Δημοσίευση από xmavidis » 20 Δεκ 2011 14:36

Πολύ ωραίο! Thanks!
I want to know God’s thoughts; the rest are details.
Albert Einstein

WSPNH
Δημοσιεύσεις: 97
Εγγραφή: 10 Μαρ 2006 12:52
Επικοινωνία:

jQuery ContentHover Plugin

Δημοσίευση από WSPNH » 26 Δεκ 2011 23:48

Αδερφέ είναι πολύ ωραίο και δεν έχει να ζηλεύψει τίποτα από άλλα αντίστοιχα όπως (jQuery Captify)

Πριν προχωρήσω θέλω να σου ζητήσω συγνώμη για τα κάτωθι γραφόμενα.

Μου άρεσε τόσο πολύ το plugin σου που έκατσα και το βελτίωσα - αναβάθμισα.

Πρόσθεσα:
  • Νέα sliding effects. (Πλέον το overlay μπορεί να εμφανιστεί από οποιαδήποτε γωνία (topLeft, bottomRight, e.t.c.))

    Δυνατότητα διαφορετικού slide effect κατά το hover out (ναι καλά διάβασες μπορεί π.χ. να εμφανίζεται από τα αριστερά και να εξαφανίζεται στα δεξιά)

    Δυνατότητα να υπάρχει ένα offset. Δηλαδή κατά την αρχή να φαίνεται ένα κομμάτι του overlay και με το hover να γεμίζει κανονικά και με το hover out να ξαναεμφανίζεται αυτό το κομμάτι. Π.χ. Έστω ότι σε μια εικόνα θέλουμε να εμφανίζεται ο τίτλος στο κάτω της μέρος.

    Δυνατότητα του χρήστη να χρησιμοποιήσει το επιπρόσθετα effect τα οποία βρίσκονται στο jQuery Easing Plugin.
Σου ζήτησα συγνώμη για τι δεν ξέρω αν έχεις υλοποιήσει τα παραπάνω και απλώς θέλεις να τα προσθέσεις αργότερα σε άλλη έκδοση και στην χάλασα.

Μπορείς να δεις μερικά demos www.jbaron.gr/jquery/contenthover

Δες τον κώδικα της σελίδας των demos για να κατεβάσεις το jquery.contenthover.js ή κατεβασέ το από http://jbaron.gr/jquery/contenthover/jq ... nthover.js

Το δοκίμασα σε Opera, Chrome, Firefox, τελευταίες εκδόσεις αλλά και σε Internet Explorer 8 και δουλεύει μια χαρά.
Το δοκίμασα με jQuery 1.6.1 αλλά και με 1.7.1 και δουλεύει μια χαρά.

Επιπροσθέτως έχω σκεφτεί να γίνετε και fadeIn όταν το overlay εμφανίζεται μαζί με το slide effect αλλά και fadeout όταν αυτό εξαφανίζεται.
Δεν το έχω υλοποιήσει ακόμα. Θέλω πρώτα την γνώμη σου...

Υ.Γ. Πιστεύω ότι μπορεί να γίνει πολύ γνωστό παγκοσμίως. :-)
Πάντα στα πλαίσια της jQuery και του web Development
Τελευταία επεξεργασία από το μέλος WSPNH την 27 Δεκ 2011 01:20, έχει επεξεργασθεί 2 φορές συνολικά.
http://xesemesa.gr ή http://arxwn.eu όπως και να έχει http://jbaron.gr

Άβαταρ μέλους
greekbytes
WebDev Moderator
Δημοσιεύσεις: 2438
Εγγραφή: 15 Νοέμ 2002 15:42
Τοποθεσία: Αθήνα
Επικοινωνία:

jQuery ContentHover Plugin

Δημοσίευση από greekbytes » 27 Δεκ 2011 00:23

Σ' ευχαριστώ πολύ για το ενδιαφέρον, θα εκτιμούσα να μου είχες στείλει νωρίτερα ένα μήνυμα με τις προτάσεις σου. ;)

Την προσθήκη easing και τα άλλα directions τα είχω στα "to-do", θα τα προσθέσω σε κάποια φάση. Τα υπόλοιπα θα τα τσεκάρω :)

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες