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

Χθες, όπως και κάθε άλλο «Ημέρα γουρουνιών Ground", δούλευα σε ορισμένες διαμορφώσεις CSS / tableless. Όλα πήγαιναν καλά στον IE 7, ύψους 3 και Chrome, εώς ξαφνικά, είδα κάποια σχετική επιτυχία-un περιθώρια δει μόνο στο Google Chrome. Αν και πολύ παράξενο και μεγάλο ποσοστό του πληθυσμού, ήταν κάποια νέα bug / θέμα που είχα συναντάμε, υπήρξε τελικά κάποια μπαχαρικό στο κοσμικό έργο μου. Σαντ (αλλά ωραίο) που πήρε καθοριστεί μέσα σε λίγα λεπτά του καθετήρα ...

Βασικά, αυτό έμοιαζε με το Google Chrome αγνοούνται CSS Επαναφέρει μου (περιθώριο: 0px). Είναι πραγματικά προκλήθηκε από το στυλ πράκτορα χρήστη (-webkit-padding-start: 40px). Έτσι, η λύση ήταν να επαναφέρετε αυτό το στυλ από τη padding: 0 απρεπώς τα στοιχεία.
Ένας καλός τρόπος για να αποφευχθεί αυτό το πρόβλημα από το να συμβεί σε οποιοδήποτε στοιχείο είναι η χρήση ενός παγκόσμιου Υπόλοιπο CSS ως εξής

* {Margin: 0? Padding: 0?}

Ποια είναι τα Style Sheets Πράκτορες Χρηστών (Προδιαγραφές);
Το ακόλουθο απόσπασμα έχει ληφθεί από http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , παρακάτω link για να διαβάσετε περισσότερα για τα Style Sheets User Agent

CSS 1 εισάγει την ιδέα, δηλώνοντας ότι κάθε Πράκτορα Χρήστη (UA, συχνά «πλοηγού» ή «πελάτη ίντερνετ) θα έχουν ένα φύλλο προεπιλεγμένο στυλ που παρουσιάζει έγγραφα σε ένα λογικό - αλλά αναμφισβήτητα εγκόσμια - τρόπο. CSS 2 αναφέρει ότι σύμφωνα πράκτορες χρήστη πρέπει να εφαρμόσετε ένα φύλλο στυλ προεπιλεγμένο (ή συμπεριφέρονται σαν να έκανε) και ότι η προεπιλογή φύλλο ενός πράκτορα χρήστη στυλ θα πρέπει να παρουσιάσει τα στοιχεία της γλώσσας εγγράφου με τρόπους που συνάδουν προς τις γενικές προσδοκίες παρουσίαση για τη γλώσσα του εγγράφου? CSS 3 είναι πιθανό να είναι το ίδιο μυαλό.

Δεδομένου ότι οι προδιαγραφές CSS αφεθεί στις υλοποιήσεις εάν θέλετε να χρησιμοποιήσετε ένα "πραγματικό" φύλλο στυλ για οθόνη προεπιλογή ή όχι, δεν είναι εκπληκτικό ότι δεν μπορείτε να βρείτε ένα φύλλο προεπιλεγμένο στυλ σε κάθε φάκελο εγκατάστασης του προγράμματος περιήγησης. Σε αντίθεση με τον Internet Explorer της Microsoft καθώς και Όπερα, για παράδειγμα (και όσο ξέρω), Gecko browsers όπως Firefox και Netscape Navigator (προσέξτε για "html.css"), αλλά και τον Konqueror καθιστά μάλλον απλό να κατανοήσει τους στυλ προεπιλογή.

Αυτό αυτά παλιό σχολείο, αλλά, ως συνήθως, είναι συμπλήρωμα μνήμη μου ...
Έτσι είναι απενεργοποιημένη = "αλήθεια" και απενεργοποιημένη = "ψευδή" ίδια; Ναι
... Μην πιστεύετε, καλά! thats ο τρόπος που είναι ... εδώ είναι μερικές γρήγορη εξήγηση ...
"Άτομα με ειδικές ανάγκες" είναι ένα χαρακτηριστικό της κάθε στοιχείο της φόρμας / τομέα και ως εκ τούτου μπορεί να δεχθεί οποιαδήποτε τιμή από τη φύση του.

Όσο το χαρακτηριστικό αυτό είναι παρόν, το στοιχείο θα πρέπει να απενεργοποιηθεί ανεξάρτητα από την αξία του. για παράδειγμα.
<input type="text" value="This είναι disabled" disabled>
<input type="text" value="This είναι disabled" disabled="disabled">
<input type="text" value="This είναι disabled" disabled="true">
<input type="text" value="This είναι disabled" disabled="false">

Όλα τα παραπάνω θα κάνουν το πεδίο αυτή η μορφή "απενεργοποιηθεί".

Απλά δεν παρέχουν το χαρακτηριστικό "ΑΝΑΠΗΡΙΑ" κρατά το πεδίο "Ικανότητες" ... σαν το παρακάτω

<input type="text" value="This δεν είναι disabled" />

Θυμηθείτε "Οποιαδήποτε τιμή (ή καμία αξία σε όλα) των ατόμων με αναπηρία χαρακτηριστικό, ο browser θα καταστήσει άτομα με ειδικές ανάγκες". Για να κρατήσει τα πράγματα σαφή στο μυαλό του W3C μας συνιστά να χρησιμοποιούμε απενεργοποιηθεί = "ειδικές ανάγκες" σε αυτές τις καταστάσεις.

Αυτή είναι η διαφορά αν και όταν χρησιμοποιείτε αυτό το χαρακτηριστικό σε javascript ...

document.form.element.disabled = αλήθεια? / / το στοιχείο θα πρέπει να απενεργοποιηθεί
document.form.element.disabled = false? / / το στοιχείο θα πρέπει να ενεργοποιηθεί

Τα παραπάνω επιχειρήματα ισχύουν και για αυτά τα χαρακτηριστικά και στοιχεία:

• ελέγχεται (κουμπί και το πλαίσιο ελέγχου)
• επιλεγεί (επιλογή)
• nowrap (TD)

Το Google ξεκινά μια κίνηση παρακινεί τους ανθρώπους να πετάξει ... Με τον IE6 υποκλοπών IE6 στους χρήστες με ένα popup με το φορτίο σελίδα ... δεν μπορεί να είναι μια πολύ καλή ιδέα ... αλλά είναι ένας προγραμματιστής UI, έχω να ενταχθούν σε αυτό το βαγόνι ταινία ... ένα λιγότερο browser για μένα ανησυχούν Συγνώμη ... δεν είναι εγωιστικό! αλλά έχω συμπεριλάβει αυτό το javascript ... (TRY ΣΕ ΑΥΤΗ ΤΗ ΣΕΛΙΔΑ IE6) ...
Hey! και για το φωτεινότερο σημείωση ... Δείτε αυτό είναι μια επίδειξη της δύναμης του JavaScript .... μπορεί ακόμη και να ρίξει ένα τεράστιο (ή ήταν κάποτε)

ΕΤΣΙ ... Βοήθεια απαλλάξουν τον κόσμο από τον IE6 με μια γραμμή javascript!

http://code.google.com/p/sevenup/

Με άλλο πρόγραμμα περιήγησης για να φροντίσει από αύριο! (IE8 βγαίνει από βήτα αύριο του κράτους) ... πραγματικά υψηλή IE6 χρόνο του δίνεται Long Λόγω θανάτου του Ελέους ... Ηνωμένες στεκόμαστε για την πτώση του IE6

"IE6 είναι το νέο 4 Netscape. Οι αμυχές που απαιτούνται για την υποστήριξη IE6 όλο και περισσότερο ως άνω εμπορευμάτων. Όπως και το Netscape 4 το 2000, θεωρείται IE6 να κρατάει πίσω το διαδίκτυο. "

Jeff Zeldman, πρότυπα γκουρού

Και εν τω μεταξύ για όσους, όπως εγώ, που θα μπορούσε να πλημμυρίσει με τις κλήσεις των CSS σπάσιμο διατάξεις σε IE8, εδώ είναι το παλιό έργο γύρω από / διορθώσετε χρήση μετα-ετικετών (meta http-equiv = "X-UA-Συμβατό") μπορείτε να δοκιμάσετε ...

Λανθασμένη συμπεριφορά IE8: θραύσεις διάταξης CSS (Στόχευση μια έκδοση του προγράμματος περιήγησης χρησιμοποιώντας ετικέτες Meta στην IE8)

Εδώ είναι ένα άλλο μικρό κομματιού της πονηριάς Javascript ότι έπρεπε να σκάψει γύρω επειδή η κατάσταση είναι commaned. Σε μία από τις ιστοσελίδες μου, είχα αυτή την κατάσταση όπου έπρεπε να εφαρμόσει "windows.onload" δύο φορές. Το πρώτο πράγμα που θα ήρθαν στο μυαλό ενός άπειρου σαν το δικό μου (έχω να πω με ειλικρίνεια ότι, δεδομένου ότι έχουν χρησιμοποιήσει το javascript Πλαίσια και βιβλιοθήκες, έχω να κάνω forgotton απλά πράγματα για τη δική μου ... θλιβερή αλλά αληθινή), είναι η ακόλουθη μέθοδος ...

 window.onload = onloadfn1?
 window.onload = onloadfn2?
 window.onload = onloadfn3?
 κλπ. ..

Λυπάμαι να πω όμως, αυτό δεν θα λειτουργήσει ... δεν θέλουν να συζητηθεί η επιστήμη εκτέλεση της Javascript πολύ ... αλλά σύμφωνα με την πρόσφατη εμπειρία μου, μόνο η τελευταία λειτουργία (onloadfn3) θα πάρει πραγματικά κακή εκτέλεση.

Σε φυσιολογικές συνθήκες, σε αντίθεση με το ορυχείο (το οποίο θα μιλήσω για λίγο αργότερα) ... θα μπορούσατε να κάνετε ένα από τα παρακάτω για να εκτελέσει λειτουργίες mutliple onload ....

Ή κάτι τέτοιο

 doOnLoad λειτουργία () {
         onloadfn1 ()?
         onloadfn2 ()?
         onloadfn3 ()?
 }
 window.onload = doOnLoad?

Για σημερινή κατάσταση μου, δεν μπορώ να χρησιμοποιήσω κάποια από τα παραπάνω ...
Γιατί πρέπει να καλέσετε windows.onload δύο φορές, αλλά μάλλον ότι ζητά δύο λειτουργίες σε ένα ενιαίο λειτουργία onload; Εδώ είναι γρήγορη ματιά σε δήλωση το πρόβλημά μου ...

"Οι σελίδες του site μου δομημένο σαν το WordPress θέμα .... δηλαδή υπάρχει μια κοινή Header.php Footer.php και το οποίο συμπεριλαμβάνεται σε όλες τις σελίδες του site. Υπάρχει μια λειτουργία implementaion onload στα Footer.php να κάνουμε κάποιες κοινές λειτουργίες onload. Και υπάρχουν μερικές σελίδες που πρέπει να κάτι δικό OnLoad τους, εκτός από εκείνες που διενεργήθηκαν από την κοινή λειτουργία onload. Αν μπορώ να ορίσω τη λειτουργία επανάκλησης απευθείας για τον μεταφορέα window.onload, θα κατισχύει προηγουμένως ανατεθεί στα callbacks Footer.php "

.... Είναι κατανοητό το πρόβλημά μου ;

Καλά! υπάρχουν μερικές λύσεις που βρήκα. Όλοι τους είναι πολύ παρόμοια και κυρίως implementions ενός λύση που δόθηκε από τον Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Λύση:

Απλώς προσθέστε αυτόν τον κώδικα JavaScript στην ιστοσελίδα ...

 addLoadEvent λειτουργία (λειτουργία) {
     var oldonload = window.onload?
     αν (typeof window.onload! = 'λειτουργία') {
        window.onload = λειτουργία
     } Else {
        window.onload = λειτουργία () {
            αν (oldonload) {
                   oldonload ()
           }
           λειτουργία ()
        }
    }
 }

Και το αποκαλούν αντί για το συνηθισμένο "windows.onload"

 addLoadEvent (FunctionToRunOnPageLoad)?
 addLoadEvent (λειτουργία () {
 / * Περισσότερο κώδικα για να λειτουργεί με φορτίο σελίδα *
 })? 

Τα πλεονεκτήματα αυτού του αποσπάσματος κώδικα ...
1. Πρώτιστα, αυτό σας επιτρέπει να έχετε πολλαπλές εκδηλώσεις windows.onload, που ονομάζεται ανεξάρτητη από τα μέρη του κώδικα σας, χωρίς την προηγούμενη overridding ορισμό
2. Είναι πραγματικά διακριτικές. Μπορεί να τοποθετηθεί σε ένα αρχείο με άλλα σενάρια σας ή σε ένα ξεχωριστό αρχείο.
3. Λειτουργεί ακόμα και αν window.onload έχει ήδη καθοριστεί.

Ένας άλλος γρήγορος Tut. Εδώ είναι κάτι απλό και ωραίο χρησιμοποιώντας τη δύναμη των CSS ... αλλά ήταν δύσκολο φανταζόμαστε (και σίγουρα δεν ήμουν εγώ) να αρχίσει με. Προσθέτοντας Dropshadow, μπορεί να είναι ενός κομματιού του κέικ για πολλούς από εμάς, χρησιμοποιώντας κάποια εργαλεία επεξεργασίας εικόνας όπως το Photoshop ANF Πυροτεχνήματα κλπ.
Ο λόγος για τον οποίο, επέλεξα για σκίαση χρησιμοποιώντας CSS είναι ότι, συνήθως, δημιουργώντας παράλληλα ένα σχέδιο σελίδα / html της αίτησης, οι απαιτήσεις κρατήσει επανάληψη. Αυτό που εννοώ είναι, σε μια υπάρχουσα ιστοσελίδα με πολλές εικόνες, όπως αυτές που εμφανίζουν freinds λίστα ή μια γκαλερί εικόνων, θα είναι δύσκολο να επανεπεξεργάζονται ολόκληρο το φορτίο των εικόνων που είχαν ήδη εκφορτωθεί για να προσθέσετε ή να αφαιρέσετε τις σκιές, για να θέμα.
Έτσι, εάν έχετε κάνει λίγο προς τα εμπρός σκέψης, δημιουργώντας παράλληλα τις HTMLs να προσθέσετε τα επιπλέον τμήματα ή συνήθως η κατάσταση είναι ότι έχετε μια λογική βρόχος παράγει αυτά τα εικονίδια / μικρογραφίες σε XSL, PHP. JAVA ή οποιοδήποτε άλλο προγραμματισμού / scripting γλώσσα, μπορείτε να προσθέσετε ανά πάσα στιγμή, τότε είναι ακριβώς το θέμα της εμφάνισης και της απόκρυψης αυτών των σκιών χρησιμοποιώντας την ιδιότητα Εμφάνιση CSS, σύμφωνα με τους πελάτες συνεχώς μεταβαλλόμενες απαιτήσεις μου ... Δεν εχετε κάνει αυτό το είδος της σκέψης προς τα εμπρός πριν από αυτή ... αλλά ahev ξεκίνησε τώρα!

Στο παρακάτω παράδειγμα, η αρχική εικόνα είναι ελεύθερη σκιά και οι dropshadows εφαρμόζονται, όπως απαιτείται! ΕΠΙΣΗΣ, έχω πάει μια μικρή επιπλέον, χρησιμοποιώντας τα κόλπα των προηγούμενων Τουτ μου (Well! αυτά ίσως είναι μικρότερη ποικιλία από σεμινάρια, έτσι ώστε να δικαιολογείται μόνο καλώντας τους "Τουτ" "α) για την χρήση CSS Ακινήτου κλιπ για να αναδείξουν μόνο

Αρχικό εικόνας

CSS Αποτελέσματα DropShadow

Προβολή Demo | Download sourcefiles

Γιατί θέλω να το καταλάβετε αυτό? Humm ...!

Οι περισσότεροι συγγραφείς του CSS, θα συμφωνήσουν ότι το CSS ιδιοκτησία Clip είναι πιθανώς μια από τις πιο διαδεδομένες un ιδιότητες CSS. Ήταν τόσο αληθινό για μένα πάρα πολύ και ήταν πιο ευτυχής να το παραμελούν, μέχρι που άρχισε να τροποποιεί το Mootools ΔΥΟ Κουμπί (Pin) Component Slider (με Δείκτη Range) .

Υπήρξε μια καλή πρόταση από έναν από τους χρήστες συστατικό για την τροποποίηση του στοιχείου Δρομέας χρησιμοποιώντας ψαλιδίζεται backgroud εικόνες (έναντι μεταβλητού τμήματος πλάτος) για να δείξει το εύρος ρυθμιστικό. Έτσι, ήρθε η ώρα μου να εισέλθουν στην διασκέδαση, αλλά un-ναυλωμένο (για μένα φυσικά) νερά του ακινήτου Clip CSS.

Καλά! πόσο δύσκολο μπορεί να είναι; Όχι πολύ καθόλου ... ΝΑΙ και του ΟΧΙ. Η σύνταξη να χρησιμοποιήσει το ακίνητο Κλιπ CSS είναι αρκετά όρθια θέση, αλλά η έννοια / usuage είναι λίγο croocked. Με μια μνήμη όπως η δική μου, κάθε φορά που κάθομαι να επαναλάβει στο Σενάριο Slider μου ... Έχω tokeep παραπέμποντας με τη χρήση αυτού του ακινήτου CLIP, να θυμηθώ τη λογική που έχω δημιουργήσει στο σενάριό μου .... Ως εκ τούτου! πιστεύεται ότι πένα προς τα κάτω, με την ελπίδα να θυμόμαστε ότι το μέλλον (αλλά και προς όφελος εκείνων που φαίνονται σε σύγχυση από την Ακινήτου Κλιπ CSS)

Τι CSS Κλιπ κάνει;

Clip είναι μέρος του οπτικού μονάδα εφέ του CSS 2.1. Με απλά λόγια, η δουλειά του είναι να τοποθετήσετε ένα ορατό παράθυρο πάνω από ένα αντικείμενο που ψαλιδίζεται, ως εκ τούτου, ψαλίδισμα εικόνες και δημιουργώντας μικρογραφίες χωρίς να χρειάζεται να δημιουργήσουν επιπλέον αρχεία (έχω ήδη θέσει αυτό το χαρακτηριστικό για την καλύτερη χρήση του στοιχείου Slider )

Χρησιμοποιώντας την ιδιότητα Κλιπ CSS, μπορείτε να δημιουργήσετε ένα απόκομμα με το σχήμα ορθ. Όπως και πολλές άλλες ιδιότητες CSS (όπως περιθώριο, padding κλπ), χρησιμοποιώντας RECT απαιτεί τέσσερις συντεταγμένες Επάνω, Δεξιά, Κάτω, Αριστερά (TRBL). Η croocked χαρακτήρα της ιδιοκτησίας αντικατοπτρίζει όταν ρίξετε μια πιο προσεκτική ματιά στο πώς κλιπ υπολογίζει την περιοχή αποκοπής, χρησιμοποιώντας αυτές τις τέσσερις συντεταγμένες (εγκέφαλος στέλνει σε μια κλήρωση για ένα διάστημα). Τώρα να σας μπερδέψει το κάτω μέρος ξεκινά από την κορυφή, και το δικαίωμα ξεκινά από την αριστερή. . Βλέπετε τι είπα; .... Ως εκ τούτου, αυτό το post ...

Αυτή η μικρή σύγχυση μπορεί εύκολα να εξαφανιστεί, με αυτή την οπτική επεξήγηση του CSS Κλιπ / RECT ιδιοκτησίας, όπως παρακάτω!

Απαιτήσεις CSS Κλιπ

Το έργο που έχουμε ξεκινήσει είναι να περιορίσει την ακόλουθη εικόνα μικρογραφίας σε μια τετραγωνισμένη εικόνα που αναζητούν (και επίσης μία ευρεία γωνίας της εικόνας)

Αρχικό Thumbnal / εικόνας	Απαιτήσεις για Clip Sqaure Thumbmail

CSS Αποτελέσματα Κλιπ

Προβολή Demo | Download sourcefiles

Μερικές φορές για να κρατήσει το pageweight κάτω ... έχουμε χωρίσει σενάριά μας σε κομμάτια ... Αυτά τα τμήματα JavaScript να φορτώνεται όπως και όταν απαιτείται (για μια εκδήλωση ή για πάτημα ενός κουμπιού ή συνδέσμου κλπ.).

Τοποθέτηση Javascripts είναι δυναμικά απλή και αρκετά απλή, όπως παρακάτω ...

= “text/javascript” > <Σενάριο τύπου = "text / javascript">
λειτουργία loadNewScript (πηγή) {
var s = document.createElement («σενάριο»)?
s.setAttribute («τύπος», «text / javascript")?
s.setAttribute ('src' πηγή)?
document.body.appendChild (s)?
}
</ Span>

και μπορείτε να έχετε τον παρακάτω σύνδεσμο κλήση οπουδήποτε στο σώμα, ή μπορείτε να έχετε αυτό το σενάριο "onLoad» του ίδιου του εγγράφου ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <A href = "javascript: loadNewScript (« myDynamicScript.js ')? "> Φορτίο Δυναμική Σενάριο </ a>

ή

<body onload="loadNewScript('myDynamicScript.js');">

Εάν είστε css πρόσωπο, θα ξέρετε τον πόνο να πάρει σχεδιαγράμματα εργασίας σας cross-browser. IE8 είναι ένα ακόμη κλειδί στα έργα για την ανάπτυξη μας. Anywaz! αν χτυπήσει από το θέμα αυτό, όπως έκανα και χθες, όπου εργάζονται τέλεια CSS σας σε IE7 (και νωρίτερα) και ο Firefox έχει αρχίσει ξαφνικά ρίχνουν τα ξεσπάσματα σε IE8, δοκιμάστε αυτό ... Είναι ωραία φάνηκε να διορθώνει τα προβλήματα μου, προς το παρόν ....

Χρησιμοποιώντας δήλωση Μέτα, μπορούμε να καθορίσουμε την απόδοση του κινητήρα θα θέλαμε να χρησιμοποιούν το IE8. Έτσι για να αναγκάσει τον IE8 να καταστήσει ως IE7 ... προστίθεται το ακόλουθο μετα-ετικέτας στο κεφάλι του εγγράφου σας: -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Από προεπιλογή IE Μέτα θα είναι: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
το οποίο θα καταστήσει τον IE8 απόδοση της σελίδας χρησιμοποιώντας τη νέα λειτουργία πρότυπα.

Αν χρειαστεί, αυτή η σύνταξη θα μπορούσε να χρησιμοποιηθεί για να φιλοξενήσει για άλλα προγράμματα περιήγησης, όπως παρακάτω:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

Περισσότερα DOCTYPES:

ΑΝ είστε ακόμη εξοικειωμένοι με το είδος του ζώου που ονομάζεται "DOCTYPE" ... εδώ είναι μερικές γρήγορη ανάγνωση
Τι είναι DOCTYPES; Ποιες είναι οι ιδιορρυθμίες BROWSER & ΑΝΤΙΚΕΙΜΕΝΙΚΗΣ Mode;
Ρύθμιση του DOCTYPE σε XSL

Για μια πιο εις βάθος κατανόηση για DOCTYPES, προσπαθήστε να επισκεφθείτε αυτούς τους συνδέσμους ...
A List Apart: Στερεώστε το site σας με το δεξί DOCTYPE!
A List Apart: Πέρα από DOCTYPE: Πρότυπα του Παγκοσμίου Ιστού, τη συμβατότητα και IE8

Σημείωση: Αν και πολλοί από εμάς HTML / CSS άνθρωποι έχουν να παραγνωρίζεται η σημασία της DOCTYPE decleration στα έγγραφά μας, Καθορισμός του σωστού DOCTYPE, είναι συνήθως η απάντηση στα περισσότερα ζητήματα σταυρό του προγράμματος περιήγησης.

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

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

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

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

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 (Κατεβασμένο 1954 φορές)