jQuery: γύρος ακμές στις εικόνες για επικάλυψη

Πέμπτη, 30 Οκτωβρίου 2008

Λόγω του διαφορετικού απόδοση μεταξύ διαφορετικό πρόγραμμα περιήγησης, που σίγουρα βλ. Microsoft Internet Explorer στο μυαλό, πρέπει πάντα να ισχύει για λύση artifizi αποτελέσματα που τώρα θα πρέπει να αποτελεί πρότυπο. Η πολυ-συζητήθηκε στρογγυλεμένες γωνίες είναι ένα κλασικό παράδειγμα της "καταστροφής" που παράγεται από την πλήρη αδυναμία να επιτύχουν ένα πρότυπο σοβαρά για σελιδοποίηση HTML / CSS. Υπάρχουν πολλές λύσεις δικτύωσης που σας επιτρέπουν να έχει "συνέπειες" (απαλλαγή των επιπτώσεων dall'HTML παρουσιάσει ως στρογγυλεμένες άκρες, σκιά ενέργειες, σκέψεις, κτλ ...) με έμπλαστρα στα φύλλα του στυλ, ειδικά τεχνάσματα που χρησιμοποιούν div μπολιασμένα, βιβλιοθήκες Javascript, χρήση του canvas κτλ ...
Για καθαρά εκπαιδευτικούς θα εξηγήσει περαιτέρω τεχνικούς (cross-browser), να εφαρμόσει στην στρογγυλεμένες γωνίες των εικόνων:

Demos και πηγές

Συνεχίστε να το διαβάσετε ... "

Σχετικές Post

WordPress: βήμα προς βήμα τον τρόπο δημιουργίας ενός login

Παρασκευή 24 Οκτωβρίου, 2008

Σε αυτό το tutorial θα δούμε πώς να δημιουργήσετε μια προσωπική σύνδεσής διαδικασία, χρησιμοποιώντας Αίας λειτουργικότητα μέσω jQuery. Υπάρχουν διάφοροι τρόποι για να προσαρμόσετε τη σύνδεσή του WordPress, για παράδειγμα μέσω της χρήσης των αρπαγών add_action() φίλτρα add_action() add_filter() Χρησιμοποιούμε ένα πιο χαμηλό επίπεδο, παρόλο που εξακολουθούμε να διεπαφές με τον πυρήνα WordPress. Επίσης πρέπει να φροντίζετε για την επικύρωση ενός χρήστη μέσω της διπλής email / password.

Γιατί να δημιουργήσει μια σύνδεση;

  • Σε ορισμένες περιπτώσεις μπορούν να επιστρέψουν uitle έχουν την πιο έλεγχο στην σελίδα σύνδεσης, να προτείνει μια προσαρμοσμένη διάταξη για να μας εγγεγραμμένους χρήστες. Μπορείτε επίσης να εμπλουτίσει την σελίδα με πληροφορίες, ένα λογότυπο από το κλασικό "Κωδικός Ξεχάσατε;"
  • Για να καταστεί δυνατή η πρόσβαση μέσω του ηλεκτρονικού ταχυδρομείου (όπως φαίνεται εδώ Συνθήκης) αντί user_login πρότυπο WordPress
  • Για να είναι σε θέση να εισέλθει σε μια ομάδα login στο sidebar μας Blog
  • Και, τέλος, να έχουμε ένα σκελετό - και μια ιδέα - για ένα καλό Προσθήκη : D

Περιβάλλον

Στο παράδειγμά μας / φροντιστήριο εργασίες για την ρίζα του WordPress μέσα σε φάκελο mylogin Θα δημιουργήσει δύο php αρχεία μέσα σε αυτό το φάκελο: index.php και logon.php Το πρώτο περιέχει τη διασύνδεση της σύνδεσής μας, με όλες τις λειτουργίες Javascript / jQuery το οποίο μπορούμε να σερβίρουμε. Το δεύτερο αρχείο, logon.php θα περιέχει ο κώδικας για την επικύρωση του χρήστη. Στη συνέχεια θα δημιουργήσουμε ένα φάκελο css και μέσα σε αυτό το αρχείο layout.css και ένα φάκελο images Μέσα από το φάκελο εικόνες περιλαμβάνει ένα κλασικό Ajax loader: δημιουργήστε το διαδίκτυο στα AjaxLoad.info. Στο τέλος θα πρέπει να έχετε:

  • mylogin
    • index.php
    • logon.php
    • CSS
      • layout.css
      • εικόνες
        • Αίας-loader.gif

Συνεχίστε να το διαβάσετε ... "

Σχετικές Post

Πολύ μικρό κόλπο: Απροσδιόριστος τιμές σε Javascript

Τετάρτη 22 Οκτωβρίου, 2008

Υπάρχει μια συντομογραφία για την ανάθεση "εν πτήσει" μια τιμή σε μια άλλη μεταβλητή εάν δεν ορίζεται (Απροσδιόριστος), χρησιμοποιώντας τη λογική ή φορέα (| |) - διπλό σωλήνα:

JavaScript:
  1. / / Πλούτωνα είναι απροσδιόριστο
  2. var PLUTO?
  3. ; var foo = PLUTO | | «5»?
  4. pippo ) ; συναγερμού (foo)?
  5. / / Αποτελεσμάτων: 5

Η τεχνική αυτή είναι χρήσιμη για λειτουργίες σύνταξης με παραμέτρους:

JavaScript:
  1. param ) { miaFunc λειτουργία (Param) (
  2. ; var p1 = Param | | "σημείο αναφοράς"?
  3. / / ...
  4. )

Πρέπει όμως να προσέξουμε να χρησιμοποιούν αυτή τη μορφή ως μηδέν αξίες, όπως είναι 0 false έχουν παρερμηνευθεί, λόγω της "ενοχή" του ή λογικές που χρησιμοποιούνται:

JavaScript:
  1. ; PLUTO var = 0?
  2. ; var foo = PLUTO | | «5»?
  3. pippo ) ; συναγερμού (foo)?
  4. / / Αποτελεσμάτων: 5
  5. ; PLUTO var = false?
  6. ; var foo = PLUTO | | «5»?
  7. pippo ) ; συναγερμού (foo)?
  8. / / Αποτελεσμάτων: 5
  9. ; PLUTO var = 1?
  10. ; var foo = PLUTO | | «5»?
  11. pippo ) ; συναγερμού (foo)?
  12. / / Αποτελεσμάτων: 1

Σχετικές Post

Camelize, CamelCase

Δευτέρα, 20 Οκτωβρίου 2008

Όπως είδαμε στην μετά την κωδικοποίηση και την ποικιλία της κωδικοποίησης προσεγγίσεις ότι ένας προγραμματιστής μπορεί να χρειαστεί να λύσει τα προβλήματα είναι διαφορετική και πολλά από τα ίδια γλώσσα προγραμματισμού που χρησιμοποιείται. Να πώς μερικά από τα πιο δημοφιλή Javascript πλαίσια έχουν λυθεί μια απλή λειτουργία του CamelCase:

Prototype.js

Prototype.js, έκδοση 1.6.0.3, σαφώς προτείνει μια μέθοδο camelize() camelcase για ένα string. Η προσέγγιση είναι πολύ απλό για τον συγγραφέα και τον κωδικό που είναι αυτονόητη. Σε αυτή την περίπτωση δεν υπήρχε χρήση Regular Expression!

JavaScript:
  1. camelize: λειτουργία () (
  2. . split ( '-' ) , len = parts. length ; var τμήματα = αυτό. Split ('-'), LEN = μέρη. μήκους?
  3. len == 1 ) return parts [ 0 ] ; εάν (LEN == 1) επιστροφή τμήματα [0]?
  4. . charAt ( 0 ) == '-' var = camelized αυτό. charat (0) == '-'
  5. ; ] . charAt ( 0 ) . toUpperCase ( ) + parts [ 0 ] . substring ( 1 ) τμήματα [0]. charat (0). toUpperCase () + μέρη [0]. substring (1)
  6. ] ; : Μέρη [0]?
  7. var i = 1 ; i <len; i++ ) για (var i = 1? i <len? i + +)
  8. . charAt ( 0 ) . toUpperCase ( ) + parts [ i ] . substring ( 1 ) ; camelized = + μέρη [i]. charat (0). toUpperCase () + μέρη [i]. substring (1)?
  9. camelized επιστροφή?
  10. )

Συνέχιση ανάγνωσης ... "

Σχετικές Post

jQuery: Κινούμενα backgroundColor

Τετάρτη, 15 Οκτωβρίου 2008

Δεν κατάλαβα εάν πρόκειται για ένα σφάλμα ή κάτι επιθυμητό, ωστόσο παραμένει το γεγονός ότι η μέθοδος animate() του jQuery δεν λειτουργεί με ορισμένα χαρακτηριστικά CSS, συμπεριλαμβανομένων background-color (που όπως camelize είναι backgroundColor Για παράδειγμα, το ακόλουθο κώδικα δεν παράγει κανένα αποτέλεσμα:

HTML:
  1. > <style τύπο = "text/css">
  2. div # θέση (ιστορικό-χρώμα: # EEE? πλάτος: 100px? Ύψος: 100px)
  3. </ Style>
  4. <! - .... ->
  5. > </div> <div id = "box"> </ div>

JavaScript:
  1. ) . animate ( { backgroundColor: "#f90" } ) ; $ ( 'Τμήμα # κουτί »). Κίνηση ((backgroundColor:" # F90 "))?

Για να επιλύσετε αυτό το πρόβλημα είναι να εγκαταστήσετε μια επέκταση: jQuery Color κινούμενα σχέδια. Αυτό σας επιτρέπει να εκτελέσετε "animation" sull'attributo backgroundColor και πέρα:

  • backgroundColor
  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor
  • color
  • outlineColor

Σχετικές Post

Ποικιλία από την κωδικοποίηση και την κωδικοποίηση

Τρίτη, 14 Οκτωβρίου 2008

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

Αριστερά μηδέν Pad

Ένας αριθμός, αλλά η ομιλία ισχύει επίσης για κάθε string, όπως η 123 μπορεί να πληρωθεί για την αριστερά - να - με μια σειρά μηδενικά, για παράδειγμα: 00123 Η ανάγκη αυτή παρουσιάστηκε σε αρκετές περιπτώσεις και είναι χρήσιμες για την ευθυγραμμιστεί - ή δείχνουν - μια σειρά καθαρά, εμμέσως δείχνει τη μέγιστη τιμή. Στο βίντεο, για παράδειγμα, η κλασική βαθμολογία (η βαθμολογία) είναι συχνά αναφέρεται από 001234 ότι το πολύ πρόκειται για 999999 Να πώς το πρόβλημα λύθηκε με διάφορους προγραμματιστές:

JavaScript:
  1. / **
  2. * Αριστεράς Pad string
  3. *
  4. * @ Από http://snipplr.com/view/8423/left-pad-string/
  5. * @ Συγγραφέας web-http: / / www.mechanicmatt.com/
  6. *
  7. * @ Param NUM - για την πλήρωση Striga
  8. * @ Param totalChars - Συνολικός αριθμός χαρακτήρων, συμπεριλαμβανομένου του "μηδενικά"
  9. * @ Param padWidth - χαρακτήρων που χρησιμοποιούνται για την πλήρωση, προεπιλογή "0"
  10. * /
  11. num, totalChars, padWith ) { leadingZeros λειτουργία (NUM, totalChars, padWith) (
  12. num = num + ""?
  13. ? padWith = (padWith); padWith: "0"?
  14. num. length <totalChars ) { εάν (μήκος εσωτερικό αριθμό <totalChars) (
  15. num. length <totalChars ) { ενώ (μήκος εσωτερικό αριθμό <totalChars) (
  16. padWith + NUM NUM =?
  17. )
  18. { } Else ())
  19. num. length > totalChars ) { //if padWith was a multiple character string and num was overpadded εάν (μήκος εσωτερικό αριθμό> totalChars) (/ / padWith εάν ήταν πολλαπλή και αριθμό χαρακτήρων που ήταν overpadded
  20. num. length - totalChars ) , totalChars ) ; = NUM NUM. Substring ((αριθμός μήκους - totalChars), totalChars)?
  21. { } Else ())
  22. επιστροφή num?
  23. )
  24. leadingZeros ( "asdf" , 10 , "0" ) ) ; συναγερμού (leadingZeros ( "asdf", 10, "0"))?

Η λύση αυτή είναι εξαιρετικά άρθρωση, αλλά μπορεί να προσθέσει απεριόριστο αριθμό 0 0 έως αριθμού num επίσης την επιλογή της γραμματοσειράς που χρησιμοποιείται από padWidth αντί για το προεπιλεγμένο 0
Σίγουρα πρωτότυπο, ωστόσο, αυτή η λύση:

JavaScript:
  1. / **
  2. * String_pad
  3. *
  4. * @ Από http://snipplr.com/view/700/stringpad/
  5. * @ Συγγραφέας http://d.hatena.ne.jp/brazil/20060721/1153489937
  6. *
  7. * @ Param σ. - για την πλήρωση Striga
  8. * @ Param LEN - Συνολικός αριθμός χαρακτήρων, συμπεριλαμβανομένου του "μηδενικά"
  9. * @ Param CH - χαρακτήρων που χρησιμοποιούνται για την πλήρωση
  10. * /
  11. str, len, ch ) { return new Array ( len- ( '' +str ) . length + 1 ) . join ( ch ) + str } λειτουργία επίθεμα (STR, LEN, CH) (επιστροφή νέα Array (LEN-(+''STR). μήκους + 1). ενταχθούν (CH) + σ.)
  12. pad ( 56 , 4 , '0' ) ) ; // 0056 συναγερμού (pad (56, 4,'0 '))? / / 0056

Ίδιο αποτέλεσμα, με μια εντελώς διαφορετική προσέγγιση. Και πάλι έχουμε την ευκαιρία να αποφασίσουν τον αριθμό των χαρακτήρων μέσω της επενδυτικής παράμετρο len και η γραμματοσειρά που χρησιμοποιείται από τον ch Αδυνατεί να χρησιμοποιήσετε την προεπιλογή που παρέχονται στις προηγούμενες λειτουργία.
Τι να χρησιμοποιήσω αντί ...:

JavaScript:
  1. / **
  2. * String_pad
  3. *
  4. * @ Συγγραφέας Giovambattista Fazioli
  5. * @ Web http://www.undolog.com
  6. *
  7. * @ S Παράμ - για την πλήρωση Striga
  8. * @ Param l - Μια συμβολοσειρά που δείχνει τον χαρακτήρα είναι ότι το μήκος
  9. * Όπως το "0000" χαρακτήρα = "0" μήκος 4
  10. * /
  11. s,l ) { return ( l. substr ( 0 , ( l. length -s. length ) ) +s ) ; } φουλάρ λειτουργία (s, l) (μετ 'επιστροφής (λ. substr (0, (L-s μήκος. μήκους)) + s)?)
  12. padding ( '123' , '0000' ) ) ; συναγερμού (παραγέμισμα ('123 ', «0000»))?

Αν έχετε άλλες ενδιαφέρουσες λύσεις παρακαλώ σχόλιο : D

Σχετικές Post

Α κατηγορίας στην αντίστροφη Javascript

Δευτέρα 13 Οκτωβρίου, 2008

Στη μετά με 3D Αντίστροφη FIVe3D (βλέπε Πώς το έκανα: γράψουν μια αντίστροφη μέτρηση στο Flash), ήταν μια κλάση πρόταση για τη δημιουργία ενός αντικειμένου Αντίστροφη σε Actionscript, εδώ μια έκδοση της ανάλογης Javascript:

JavaScript:
  1. / **
  2. * Αντίστροφη Τάξης
  3. *
  4. * @ Συγγραφέας Giovambattista Fazioli
  5. * @ @ Email g.fazioli undolog.com
  6. * @ Web http://www.undolog.com
  7. *
  8. * @ Param dd (string) «ημέρα μήνας, έτος"
  9. *
  10. * /
  11. dd ) { Αντίστροφη λειτουργία (ηη) (
  12. / / Init στόχο χρόνο
  13. Date ( dd ) ; var target = νέα ημερομηνία (ηη)?
  14. = target. getTime ( ) ; αυτό. targetTime = στόχο. getTime ()?
  15. / **
  16. * Refresh αντίστροφη μέτρηση
  17. * /
  18. = function ( ) { αυτό. Ανανέωση = λειτουργία () (
  19. Date ( ) ; var σήμερα = νέα ημερομηνία ()?
  20. ( ) ; var = currentTime σήμερα. getTime ()?
  21. / / Ώρα αριστερά
  22. this . targetTime - currentTime ) ; αυτό. _leftMilliseconds = (this. targetTime - currentTime)?
  23. ( this ._leftMilliseconds / 1000 ) ; αυτό. _leftSeconds = Math. όροφος (this. _leftMilliseconds / 1000)?
  24. ( this ._leftSeconds / 60 ) ; αυτό. _leftMinutes = Math. όροφος (this. _leftSeconds / 60)?
  25. ( this ._leftMinutes / 60 ) ; αυτό. _leftHours = Math. όροφος (this. _leftMinutes / 60)?
  26. / / Δεν υπάρχει ενότητα
  27. = Math. floor ( this ._leftHours / 24 ) ; αυτό. leftDays = Math. όροφος (this. _leftHours / 24)?
  28. / / Για εκτύπωση
  29. = this ._leftMilliseconds % 1000 ; αυτό. leftMilliseconds = αυτό. _leftMilliseconds% 1000?
  30. = this ._leftSeconds % 60 ; αυτό. leftSeconds = αυτό. _leftSeconds% 60?
  31. = this ._leftMinutes % 60 ; αυτό. leftMinutes = αυτό. _leftMinutes% 60?
  32. = this ._leftHours % 24 ; αυτό. leftHours = αυτό. _leftHours% 24?
  33. )
  34. ( ) ; αυτό. Refresh ()?
  35. )

Παράδειγμα

JavaScript:
  1. countDown ( '1 1, 2009' ) ; var τόσο νέα αντίστροφη = ( «1 1, 2009»)?
  2. / / Δείτε πόσες ημέρες, ώρες, λεπτά, δευτερόλεπτα και χιλιοστά του στο πρώτο Ιανουάριος 2009
  3. cd. leftDays + "," + cd. leftHours + "," + cd. leftMinutes + "," + cd. leftSeconds + "," + cd. leftMilliseconds ) ; έγγραφο. γράψει (δηλαδή leftDays + "," + CD. leftHours + "," + CD. leftMinutes + "," + CD. leftSeconds + "," + CD. leftMilliseconds)?

Σχετικές Post

WordPress: Πώς να γράψω μια απάντηση στο σχόλιο που χρησιμοποιούν jQuery

Παρασκευή 3 Οκτωβρίου, 2008

Πρόσφατα Cristiano Fino εξέδωσε Προσθήκη κέρδος για WordPress μπορεί να προσθέσει δύο δεσμών σε κάθε σχόλιο από μια θέση (που ίσως να έχετε εγκαταστήσει ένα παρόμοιο, δεδομένου ότι ο κατάλογος Wordpress.org έχω ένα ζευγάρι παραπλανάται, αλλά ως μια ιταλική λογισμικό θα την εκδήλωση για να τιμήσει τον εξαίρετο έργο που Cristiano). Αυτά τα Link (απάντηση & μετοχές), πληρούν ή / και τα λόγια του συγγραφέα του σχολιασμό από την βαρετή εκτελείτε λειτουργία να εισαγάγετε το χαρακτήρα σε (@) να δείχνει στους οποίους απευθύνεται. Σε αυτό το tutorial θα εξηγήσω - σε μεσοπρόθεσμο-έμπειρους χρήστες - πώς να προσθέσει αυτά τα δύο στοιχεία "σχετικά με το χέρι", χωρίς all'istallazione plugin. Επίσης, εκμεταλλεύονται τις δυνατότητες των jQuery στο κόμμα της Javascript. Η τεχνική αυτή που εμφανίζουν τα ίδια θα χρησιμοποιηθεί για την εισαγωγή αυτής της δυνατότητας σε αυτό το ιστολόγιο.

Σημείωση: Η χρήση ενός plug είναι η καλύτερη λύση για εκείνους που συχνά τείνουν να αλλάξουν WordPress πρότυπο ή, τουλάχιστον, έχει στην αναμονή να το κάνουν. Αυτό το φροντιστήριο θα εμφανίζεται μόνο τον τρόπο εκτέλεσης στόχευση στον κώδικα WordPress και είναι αφιερωμένη στην πιο περίεργη.

Αλλαγή του αρχείου comments.php

Η πρώτη αλλαγή να κάνω είναι να εισέλθει στο σύνδεσμο "Απάντηση" και "μονάδες" σε κάθε σχόλιο. Για να το κάνετε αυτό, επεξεργαστείτε το αρχείο comments.php που βρίσκεται στο φάκελο του theme μας. Αυτό το αρχείο περιέχει όλες τις οδηγίες που σας επιτρέπουν να δείτε τα σχόλια στο τέλος της μια θέση. Το τμήμα που μας ενδιαφέρει (το οποίο μπορεί να διαφέρουν ελαφρώς από το θέμα στο ζήτημα) είναι η δημιουργία του βρόχου διάφορα σχόλια, αναγνωρίσιμες από:

Συνέχιση ανάγνωσης ... "

Σχετικές Post

jQuery: πώς θα οικοδομήσουμε μια επέκταση Προσθήκη

Τρίτη, 23 Σεπτεμβρίου 2008

Όπως όλες οι βιβλιοθήκες αυτού του είδους, επίσης, jQuery, μπορεί να επεκτείνει τις βασικές της λειτουργίες, χρησιμοποιώντας πραγματικά plugin. Σεβασμός των κανόνων της λειτουργίας της, δηλαδή restituiendo πάντα μια αναφορά στο επιλεγμένο ή jQuery ίδια, μπορείτε να γράψετε ένα plugin με λίγες γραμμές κώδικα. Πάρτε ως παράδειγμα τον κώδικα προτείνεται στην jQuery εναντίον όλων: ένα σημείο αναφοράς με 5 browser που ήταν (μετά την διόρθωση που αναφέρθηκαν από Luca):

JavaScript:
  1. ) . css ( 'cursor' , 'pointer' ) . click ( $ ( 'H2.dropdown'). Css ( «δρομέας», «δείκτη»). Κάντε κλικ (
  2. λειτουργία () (
  3. $ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; εάν ($ (αυτό). επόμενη (). είναι ( "κρυφές")) $ (αυτό). επόμενη (). slideDown ()? άλλο $ (αυτό). επόμενη (). slideUp ()?
  4. )
  5. )?

Συνέχιση ανάγνωσης ... "

Σχετικές Post