Διαδραστικό σχεδιασμό

Πώς να στυλ "Επιλογές χρησιμοποιώντας DropKick

Όταν πρόκειται για το styling ιστοσελίδες, τίποτα δεν είναι τόσο δύσκολο όσο οι μορφές. Και όταν πρόκειται για μορφές μορφοποίησης - σχεδόν - τίποτα δεν είναι τόσο δύσκολο όσο το με το CSS, αλλά υπάρχουν μεγάλοι περιορισμοί στο πόσο μπορούμε να επιτύχουμε μόνο με το CSS. Συχνά, η μόνη βιώσιμη επιλογή είναι το styling μέσω JavaScript, και ως μορφή προοδευτικής βελτίωσης δεν είναι κάτι που πρέπει να αποφεύγουμε.

Σε αυτό το άρθρο θα χρησιμοποιήσουμε DropKick για να δημιουργήσετε το dropdown. Αυτό που κάνει το dropkick είναι να μεταμορφώσει το

Το πρώτο πράγμα που πρέπει να κάνουμε είναι να δημιουργήσουμε ένα

Κλήση DropKick

Μόλις δημιουργήσουμε το δικό μας σε κάτι που μπορούμε να είμαστε σίγουροι για το styling με το CSS. Επιπλέον, οι τιμές μας έχουν εισαχθεί στα νέα χαρακτηριστικά HTML5 (με την ονομασία data-dk-dropdown-value).

Μπορούμε τώρα να στυλ μας dropdown με CSS, ή να χρησιμοποιήσετε ένα από τα θέματα DropKick εάν προτιμούμε? κατά τη στιγμή της γραφής υπάρχουν τρία θέματα διαθέσιμα, η προεπιλογή, η σκοτεινή γυαλάδα και η ελαφριά γυαλάδα. Αλλά οι περισσότεροι άνθρωποι θα θελήσουν να χρησιμοποιήσουν τα δικά τους στυλ που ταιριάζουν με τις ανάγκες του έργου τους.

Επέκταση του DropKick

Η επέκταση του DropKick είναι μια απλή διαδικασία. Για παράδειγμα, αν θέλαμε να εντοπίσουμε πότε θα γίνει μια αλλαγή στο αναπτυσσόμενο μενού, μπορούμε να προσθέσουμε το χειριστήριο συμβάντων αλλαγής, όπως έτσι: 

$('select').dropkick({change: function (value) {console.log('Option selected: ' + value);}});

Τελικές σκέψεις

Είμαι βέβαιος ότι υπάρχουν χιλιάδες τρόποι να στυλ ένα μενού επιλογής χωρίς τη χρήση του jQuery, αλλά αυτά που χρησιμοποιούν μόνο CSS αγωνίζονται μια χαμένη μάχη ενάντια στις προεπιλογές του προγράμματος περιήγησης. Η απλότητα αυτού του plugin και η τεράστια ευελιξία που προσφέρει και η προοδευτική προσέγγιση βελτίωσης που παίρνει σημαίνει ότι το DropKick είναι μια εξαιρετική λύση.

Έχετε χρησιμοποιήσει το DropKick σε ένα έργο; Έχετε μια προτιμώμενη μέθοδο στυλ