jQuery UI και ThemeRoller

• Ενδέχεται 16, 2024

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

Ας κάνουμε μια βόλτα μέσα από το site. Κάτω από τη σύνδεση Demos και Docs θα βρείτε μια λίστα με τα διαδραστικά plugins της jQuery όπως drag and drop, tabs και transition. Για κάθε plugin υπάρχει δοκιμαστικός κώδικας demo, τεκμηρίωσης και δείγματος για δοκιμή.

Εάν θέλετε να αρπάξετε τα αρχεία με τα κλειδιά, κάντε κλικ στο σύνδεσμο Θέματα για το jQuery ThemeRoller. Το προεπιλεγμένο css είναι ένα άσπρο και γκρίζο θέμα γυμνού οστού. Μπορείτε να κάνετε κλικ στο κουμπί λήψης και να χρησιμοποιήσετε όπως είναι, αλλά υπάρχει επίσης μια συλλογή από πολύχρωμα θέματα για να ξεκινήσετε. Στην περιοχή της Γκαλερί υπάρχουν μερικές μικρογραφίες θεμάτων. Απλά κάντε κλικ σε αυτό που σας αρέσει. Μπορείτε να κάνετε λήψη αυτού του θέματος ως έχει κάνοντας κλικ στην καρτέλα Roll Your Own και στη συνέχεια στο κουμπί Download Theme. Αλλά η διασκέδαση ξεκινά όταν αρχίζετε να τιτλοποιείτε το θέμα με τον κινητήρα ThemeRoller. Υπάρχουν 11 επιλογές που μπορείτε να προσαρμόσετε. Οι περισσότερες επιλογές θα σας επιτρέψουν να αλλάξετε την υφή φόντου και το χρώμα, το χρώμα των συνόρων και τα χρώματα κειμένου και εικονιδίων.

Έχετε αρκετές επιλογές για το tweeting του θέματος.

• Ρυθμίσεις γραμματοσειράς: Μπορείτε να αλλάξετε την οικογένεια γραμματοσειρών, το βάρος και το μέγεθος.
  
  
• Ακτίνα γωνίας: Μπορείτε να αλλάξετε την ακτίνα γωνίας. Κάθε θέμα έχει προεπιλεγμένο στυλ στρογγυλής καρτέλας, αλλά εδώ μπορείτε να αλλάξετε το μέγεθος της γωνίας ή να το ορίσετε στο μηδέν για μια τετράγωνη καρτέλα. (Οι καρτέλες είναι ενσωματωμένες στο CSS3, το οποίο δεν υποστηρίζεται από την IE αυτή τη στιγμή.)
  
  
• Κεφαλίδα / Γραμμή εργαλείων: Μπορείτε να ορίσετε τις τιμές χρώματος για την περιοχή πίσω από τις καρτέλες και τις περιοχές κεφαλίδας, όπως για την προσθήκη ημερολογίου.
  
  
• Περιεχόμενο: Εδώ μπορείτε να ορίσετε τα χρώματα για την κύρια περιοχή περιεχομένου. Μπορείτε να πάρετε ένα πολύ διαφορετικό σχέδιο ανάλογα με την επιλογή των συνόρων σας ή χωρίς σύνορα.
  
  
• Clickable Default State: Αυτό ελέγχει την προεπιλεγμένη (ανενεργή) εμφάνιση των καρτελών και κουμπιών.
  
  
• Κατάσταση με δυνατότητα κλικ: Αυτά τα στοιχεία ελέγχου είναι για την εμφάνιση των καρτελών και των κουμπιών στην κατάσταση του hover.
  
  
• Clickable Active State: Ελέγχει την εμφάνιση της καρτέλας και του κουμπιού για την ενεργή σελίδα.
  
  
• Επισήμανση: Τα χρώματα φόντου, συνόρων, κειμένου και εικονιδίων για επισημασμένες περιοχές.
  
  
• Σφάλμα: Χρώματα φόντου, περιγράμματος, κειμένου και εικονιδίων για μηνύματα σφάλματος.
  
  
• Οθόνη modal για επικαλύψεις: Ελέγχει το χρώμα φόντου και την υφή.
  
  
• Drop Shadows: Έλεγχοι για την αδιαφάνεια της σκιάς, το πάχος, την μετατόπιση και τις γωνίες για ένα σκιασμένο αποτέλεσμα.
  
  

Όταν κάνετε λήψη του jquery-ui-x.x.xx.custom.zip και αναβαθμίσετε το πακέτο, θα δείτε τρεις φακέλους (css, development-bundle και js) και ένα αρχείο index.html. Το αρχείο index.html είναι μια επίδειξη για τα plugins που έχουν σχεδιαστεί με το θέμα σας. Θα θελήσετε να τοποθετήσετε τους φακέλους css και js στον κύριο κατάλογό σας και να αντιγράψετε / επικολλήσετε τον κώδικα από το αρχείο index.html στον κώδικα για τον ιστότοπό σας στη θέση όπου θέλετε να εμφανίζονται τα πρόσθετα.

//jqueryui.com
//jqueryui.com/demos/
//jqueryui.com/themeroller/

Οδηγίες Βίντεο: Making the Case for jQuery in a Browser Utopia - TJ VanToll (Ενδέχεται 2024).