Εκφράζοντας IT

Με μια ποικιλία Carousels εκεί έξω, πολλά για Mootools καθώς, ακόμα αποφάσισα να γράψω τη δική μου κατηγορία Carousel, για μερικούς καλούς λόγους
1. Ζήτηση ένα χαρακτηριστικό σελιδοποίησης (να είναι σε θέση να πηδήξει μια συγκεκριμένη διαφάνεια / βήμα στο ιπποδρόμιο).
2. Ζήτηση ελευθερία με την τοποθέτηση του αριστερά και δεξιά κουμπιά / συνδέσμους, όπου πάντα μου παρακαλώ.
3. Περισσότερος έλεγχος πέρα από τα βήματα διαφάνειας.

Κατάφερα να δημιουργήσετε ένα νέο Ιπποδρόμιο, με τα παραπάνω χαρακτηριστικά, όπως παρακάτω ... ... Μη διστάσετε να προτείνει τυχόν τροποποιήσεις που θα απαιτήσει!

Παράδειγμα μου μοιάζει με αυτό ... [ Δείτε το demo ]

Προβολή Demo | Download Mootools Carousel Με Σελιδοποίηση Έκδοση 1.0 (Κατεβασμένο 1991 φορές)

1. Carousel τηλεειδοποίησης

Μπορείτε εύκολα να προσθέσετε την σελιδοποίησης στο καρουζέλ σας, ρυθμίζοντας απλώς τη σημαία τηλεειδοποίησης, η οποία είναι η τελευταία parater πέρασε κατά τη δημιουργία του παράδειγμα του MooCarousel στην αληθινή (θέλουν τηλεειδοποίησης) ή ψευδής (donot θέλουν σελιδοποίησης).

var carousel1 = νέα MooCarousel («carousel1_wrapper», «carousel1_items_container», «carousel1_moveleft», «carousel1_moveright», c_ns, c_sss, αλήθεια)? / / ns = αριθμός των διαφανειών, sss = Το μέγεθος του βήματος διαφάνεια

Και φυσικά μπορείτε να αλλάξετε την εμφάνιση-n-feel αυτών των achors τηλεειδοποίησης, σας παρακαλώ, τροποποιώντας τους CSS.

. Carousel_paging {text-align: right? Περιθώριο: 5px 10px 0 0?}
. Carousel_paging ρεύμα, carousel_paging σελίδα {περίγραμμα: κανένας? Πλάτος:... 15px? Ύψος: 15px? Γραμμή-ύψος: 15px? Text-align: center? Display: block? Float: αριστερά? Υπόβαθρο: # D8D8EB? Περιθώριο: 0 1px 0 0? κείμενο-διακόσμηση: κανένας?}

. Carousel_paging ένα: φτερουγίζω, carousel_paging τρέχουσα {background: # 4D4D9B? Χρώμα: # ffffff?}..

Καλά! υπάρχει ένα μικρό πρόβλημα όμως, οι άγκυρες σελιδοποίησης αν σετ, τότε θα πάρει δημιουργούνται πάντα μετά το Carousel συνιστώσα. Ήθελα να κάνει δυναμική καθώς, στη συνέχεια, αλλά μόνο για να κρατήσει το σενάριο για να εκραγεί των αναλογιών, αποφάσισα να το παρακάμψετε.
Αλλά ξέρετε λίγο Javascript, μπορείτε εύκολα να αλλάξουμε τον κωδικό σελιδοποίησης γενιά στην κατηγορία MooCarousel να ευχαριστήσει τις ανάγκες σας.

2. Προσαρμογή τα αριστερά και δεξιά Εικόνες

Μπορείτε να αλλάξετε τη θέση, εικόνες ή οποιοδήποτε displat ιδιοκτησία των κουμπιά αριστερού και δεξιού απλά παίζοντας γύρω με το CSS. να είναι σε θέση να αλλάξετε τις τοποθετήσεις της Αριστεράς και της Δεξιάς buttoms ήταν ο πραγματικός λόγος για μένα προς τα δεξιά μας Carousel κατηγορίας μου.
Δεδομένου ότι αυτή η κατηγορία MooCarousel, δέχεται το id είναι από αυτά τα κουμπιά, μπορείτε να τοποθετήσετε στην πραγματικότητα αυτά τα κουμπιά οπουδήποτε στη σελίδα, αν θέλετε ... δεν πρέπει να είναι στην ιεραρχία στοιχείο, όπως στο παράδειγμά μου.

var carousel1 = νέα MooCarousel («carousel1_wrapper», «carousel1_items_container», «carousel1_moveleft», «carousel1_moveright», c_ns, c_sss, αλήθεια)?

CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0? Θέση: σχετική? Πλάτος: 23px? Ύψος: 20px? Float: αριστερά? Δρομέα: ο δείκτης?}

. Carousel_container_r {υπόβαθρο-θέση: 0-38px?}

. Carousel_container_l {υπόβαθρο-θέση: 0-58px?}

3. Προσαρμογή Βήματα διαφανειών

Τι εννοώ Προσαρμογή ΒΗΜΑΤΑ διαφανειών μου;
Οι περισσότεροι Carousels σύρετε με το πλήρες του ορατού παραθύρου. Έτσι λένε ότι είχε τέσσερα στοιχεία (όπως στο δείγμα μου πάνω), θα σύρετε τα τέσσερα στοιχεία. Με αυτό το Carousel Component, Περνάτε τον αριθμό των διαφανειών και το μέγεθος του βήματος της επιλογής σας.

var carousel1 = νέα MooCarousel («carousel1_wrapper», «carousel1_items_container», «carousel1_moveleft», «carousel1_moveright», c_ns, c_sss, αλήθεια)?
c_ns = αριθμός των διαφανειών, c_sss = Το μέγεθος του βήματος διαφάνεια

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

/ * Για ξεφάντωμα 1 * /

var c1_w = 92? / / Πλάτος ξεφάντωμα Θέση

var c1_n = 10? / / Ο συνολικός αριθμός ειδών ξεφάντωμα Comparision

var c1_pp = 4 / / Αριθμός αντικειμένων ξεφάντωμα Comparision perpage

var c1_marginFactor = 51?

var c1_sss = c1_w * c1_pp? / / sss = Το μέγεθος του βήματος διαφάνεια

var c1_ns parseInt = (((* c1_w c1_n) / c1_sss) + 0,5)? / / ns = αριθμός των διαφανειών

c1_sss + = c1_marginFactor? / / sss διαφάνεια = Το μέγεθος του βήματος, 51 για τα περιθώρια

Απαιτήσεις: 1,2 Mootools

Προβολή Demo | Download Mootools Carousel Με Σελιδοποίηση Έκδοση 1.0 (Κατεβασμένο 1991 φορές)

MooRating είναι ένα απλό (πρόγραμμα περιήγησης στο σταυρό, φυσικά με αυτό που χρησιμοποιεί τη δύναμη της βιβλιοθήκης Mootools), ελαφρύ και εξαιρετικά Mootools βασίζεται λύση βαθμολογία. Δεν έχει ονομαστεί ως "Αστέρων", απλά επειδή η εικόνα βαθμολογία θα μπορούσε να είναι όπως εσείς επιλέξετε (έχω δώσει Stars, Μπαρ και καρδιές με το download, αλλά μπορείτε να δημιουργήσετε τη δική σας ποικιλία και απλά να πέσει μέσα).

Πώς μοιάζει με:

	Mootools Βαθμολογία με διαφορετικές εικόνες Προβολή Demo
	Mootools Βαθμολογία με τιμές Ποσοστό Προβολή Demo
	Mootools Βαθμολογία με κλασματικές τιμές Προβολή Demo

Λήψη Mootols Αστέρων Σενάριο (Κατεβασμένο 718 φορές)

Δεδομένων Βαθμολογία: Ακέραιος αριθμός, Δεκαδικός ή Ποσοστό
Σήμερα το σενάριο έχει σχεδιαστεί για να δείξει τα στοιχεία που αναγράφονται ως σύνολο αξιών (1,2,3,4,5), σε δεκαδικά (1,24, 3,45 κ.λ.π.) ή σε ποσοστά (12%, 55% κλπ). Η επιλογή να εμφανίζουν δεδομένα σε οποιαδήποτε από τις μορφές που αναφέρονται μπορεί να οριστεί απλά αλλάζοντας κάποιες αξίες σημαία εντός της javascript (moorating.js)
Βασικά υπάρχουν δύο ε δύο σημαίες για να παίξει με, για την εμφάνιση τιμών με τη μορφή της επιλογής σας ...

var inpercent = false? / / Ορίστε αυτήν τη σημαία αλήθεια, αν χρειάζεστε ποσοστιαίες τιμές να εμφανίζονται
var isFractional = false / / Ορίστε αυτή την αλήθεια, αν θέλετε, όπως κλασματικές τιμές 1,24, 1,25, 4,56 και όχι 1,2 ... 5

Και δεν νομίζω ότι υπάρχει εξήγηση γι 'αυτό απαιτείται. Επιπλέον. Το σενάριο είναι πολύ απλό. Εάν γνωρίζετε λίγο javascripting, μπορείτε να τροποποιήσετε το script για να πάρετε οποιοδήποτε είδος της εμφανιζόμενης τιμής. Για παράδειγμα, αν θέλετε τρία δεκαδικά ψηφία να εμφανίζονται ... τσίμπημα ακριβώς το σενάριο, όπως παρακάτω ...

αν (isFractional) {if (x <= 5 | | x> = 0) moostartval [i] = innerHTML FormatNumber (x, 3)?.} / / 2 έχει αλλάξει έως 3
else {moostartval [i] = innerHTML Math.round (x).?

Ενημέρωση Αξία Βαθμολογία:
Εγώ έχω ενοχληθεί εγγράφως τυχόν σενάρια AJAX για την επικαιροποίηση της αξίας Βαθμολογίες, διότι γνωρίζω από την εμπειρία μου ότι ΠΑΝΤΑ ΔΕΝ προτίθεται να ενημερώσετε τη βαθμολογία μόλις τα ποσοστά των χρηστών κάτι. Είστε ελεύθεροι να κάνετε ότι θέλετε με την ονομαστική αξία, Ενημέρωση χρησιμοποιώντας AJAX, ή να υποβάλει ή να ορίσετε μια κρυμμένη αξία πεδίο φόρμας, πρέπει να υποβάλλονται με τη μορφή ολόκληρο κλπ.

λειτουργία updateRating (id, βαθμολογία) {
/ / Προειδοποίησης (id + "," + βαθμολογία)?
/ / Κάνει ό, τι με τη βαθμολογία
}

Υπάρχει η λειτουργία του javascript που ονομάζεται "updateRating". Αυτή η λειτουργία έχει περάσει το ID της Div της αξιολόγησης, ώστε να προσδιορίσει ως προς τα οποία αξιολογήσεις (αν υπάρχουν περισσότερες από μία αξιολογήσεις στη σελίδα) ενημερώθηκε και η αξία της διαβάθμισης [updateRating (id, βαθμολογία)]. Μπορείτε να επιλέξετε να κάνετε ότι θέλετε με τις τιμές αυτές, όπως ανέφερα νωρίτερα.

Εικόνα Βαθμολογία: Ηθοποιοί, καρδιές, Μπαρ ή οτιδήποτε σας παρακαλώ
Η αλλαγή της αξιολόγησης σε οποιαδήποτε από τις παραπάνω κατηγορίες (αστέρια, καρδιές κλπ) είναι πολύ απλή. Απλά δημιουργήστε μια εικόνα παρόμοια με την προϋπόθεση ενός και ρίχνετε μέσα το θυμάστε, αν αλλάξετε το όνομα της εικόνας, δεν κάνει τις απαραίτητες αλλαγές στο αρχείο CSS, δείτε παρακάτω.

. Moostar {margin: 0px? Padding: 0px? Υπερχείλιση: κρυμμένο? Πλάτος: 84px? Ύψος: 20px? Float: αριστερά? Υπόβαθρο: url ("stars.gif») επαναλαμβάνω-x?}
. Moostar διάρκεια {float: αριστερά? Περιθώριο: 0px? Padding: 0px? Display: block? Πλάτος: 84px? Ύψος: 20px? Κείμενο-διακόσμηση: κανένας? Text-indent:-9000px? Z-index: 20?}
.. Moostar curr {background: url ("stars.gif») άφησε 25px?}

Οι περισσότερες μικροσυσκευές χρησιμοποιούν αξιολογήσεις αστέρων και μισή αστέρι εικόνες με το ποντίκι πάνω από τα γεγονότα σε κάθε αστέρι. Moo Βαθμολογίες χρησιμοποιεί ένα απλό ξωτικό εικόνα ως εικόνα φόντου για την επίτευξη των απαιτούμενων οπτικά εφέ με πολύ χαμηλή επιβάρυνση.

Απαιτήσεις: 1,2 Mootools
Λήψη Mootols Αστέρων Σενάριο (Κατεβασμένο 718 φορές)

Έψαχνα για ένα καρφιτσωμένο διπλή μπάρα (slider κινητό με δύο κουμπιά, ελάχιστη και μέγιστη) που χρησιμοποιούν Mootools. Αν και, βρήκα μερικά καλά κάνει διπλό ρυθμιστικό καρφώθηκε στο φόρουμ Mootools, Το μόνο πρόβλημα ήταν ότι όλα αυτά έχουν βαθούλωμα ρυθμιστικά την επιλεγμένη σειρά δείκτη. Τέλος! Αποφάσισα να δημιουργήσω το δικό μου. Καλά! Έκανα να χρησιμοποιήσετε το αρχικό κώδικα και να τροποποιήσετε το να έχουν ένα υπόβαθρο slider που αναφέρεται η περιοχή επιλεγμένη οπτικά, όπως στο παράδειγμά μου παρακάτω. Οι μπλε περιοχές δείχνει το εύρος της τιμής που θα επιλεγεί.

Δείτε Έκδοση 2.2 Demo | Download Mootools Δίκλινο καρφιτσωμένων Έκδοση 2.2 Δρομέας (Κατεβασμένο 11752 φορές)

Μπορείτε πολύ εύκολα να αλλάξετε την εμφάνιση και την αίσθηση του εύρους του δείκτη (με μπλε χρώμα στο παραπάνω παράδειγμα), ρυθμιστικό διακόπτη, στην πίστα ρυθμιστικό τροποποιώντας το slider.css όπως απαιτείται.

Αποφύγετε την πτώση μου ένα σχόλιο αν σας φανεί χρήσιμο.