JavaScript

Διδακτική

Λήψη

Σύνδεσμοι διαφημιζόμενων

Διαχειριστείτε το μέγεθος των γραμματοσειρών ... με ένα ρυθμιστικό!

Αρχική Σελίδα > JavaScript > Άρθρα > Διευθύνων το μέγεθος της γραμματοσειράς ... με ένα ρυθμιστικό!

Το άρθρο γράφτηκε από τον Riccardo Brambilla
Σελίδα 1 από 2

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

Υπάρχουν οδηγίες σχετικά με το W3C εκεί, μπορείτε να βρείτε τη μετάφραση εδώ .

Μεταξύ άλλων, είναι επίσης σημαντικό να επιτρέψει σε εκείνους που μας επισκέπτονται για να είναι σε θέση να μεγεθύνετε το κείμενο μια συγκεκριμένη σελίδα ή ενότητα.

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

Η λύση

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

Για να δώσουμε μια ιδέα για το τελικό αποτέλεσμα που θέλουμε να επιτύχουμε μια ματιά στην παρακάτω εικόνα:

Η απαιτούμενη

Εδώ είναι μια «εικόνα της ένα απλό παράδειγμα δομή φακέλου:

jQuery και jQuery UI

Έχουμε για πρώτη φορά λήψη την τελευταία έκδοση του jQuery από εδώ (1.6.1 κατά το χρόνο της γραφής)

Το επόμενο βήμα είναι να κατεβάσετε jQuery UI , και ιδίως το στοιχείο ρυθμιστικό, ακολουθώντας τα ίδια βήματα που περιγράφονται εδώ για την progressbar.

Η index.html

Υπάρχει τότε μια απλή HTML δομή, την οποία ονομάζουμε μια σελίδα απλά index.html






 <DOCTYPE html PUBLIC! "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">









 <html>







 <head>



  



 Sliders <title> jQuery UI corinne-fleurs-gironde.com και font-size </ title>





  



 href = "css / style.css" <link rel="stylesheet" type="text/css" />



  



 href = "css/ui-lightness/jquery-ui-1.8.13.custom.css" <link type="text/css" rel="stylesheet" />



  



 src = "js/jquery.1.6.1.js" <script type="text/javascript"> </ script>



  



 src = "js/jquery-ui-1.8.13.custom.min.js" <script type="text/javascript"> </ script>



  



 src = "js / index.js" <script type="text/javascript"> </ script>



    





 </ Head>







 <body>



  



 Sliders jQuery <h3> Ui corinne-fleurs-gironde.com και font-size </ h3>



  

  



 <div id="fontLabels">



    



 <div id="normal"> A </ p>



    



 <div id="big"> A </ p>



    



 <div id="bigger"> A </ p>



    



 <div id="biggest"> A </ p>



  



 </ P>



  

  



 <div id="sliderCont"> <div id="slider" class="ui-widget-header"> </ div> </ p>



  



 <div id="textcontent">



    



 Lorem ipsum dolor Sit Amet, consectetur adipiscing Elit.

 

    



 Quisque SEM risus, EGET CONGU πιο άξιους EGET, pharetra σε βάζα.

 

    



 Στο HAC dictumst ακροατήριο habitare.



  



 </ P>







 </ Body>







 </ Html>

Η σελίδα περιλαμβάνει όλα τα απαραίτητα αρχεία, css και js αρχεία που χρειαζόμαστε. Μέσα από το tag body ορίζουμε απλά μια div με id = fontLabels μέσα με τέσσερις div που θα περιέχει το "A" δείγμα με διαφορετικό font-size.

Ακριβώς κάτω ορίζουμε ένα εμπορευματοκιβώτιο (div id = "sliderCont") θα πρέπει να βρεθούμε στη μέση της σελίδας και μέσα σε ένα div με id = "slider" στην οποία θα χτίσουμε με jQuery UI ρυθμιστικό ίδια.

Πρόσθεσα το δοχείο κείμενο με id = "TextContent" στην οποία θα δράσουμε για να αυξήσετε / μειώσετε το μέγεθος της γραμματοσειράς.

Στην ίδια κατηγορία ...

E-Learning

	CSS (Μάθημα) Σχεδίαση και Προσβασιμότητα, σύμφωνα με το W3C CSS και XHTML. Ξεκινώντας από 29 €.
	HTML (Μάθημα) Η γλώσσα σήμανσης για τον Παγκόσμιο Ιστό από 29 €.
	Javascript (Μάθημα) Πλήρης οδηγός για δέσμες ενεργειών στην πλευρά του πελάτη. Από 39 €.

Σύνδεσμοι διαφημιζόμενων