Gérer la taille des polices ... avec un curseur!
Page 1 sur 2
La mise en œuvre d'un site moderne et vous devriez être au courant non seulement des graphiques et le contenu mais aussi de «l'accessibilité.
Y at-il des directives sur le W3C, vous pouvez trouver la traduction ici .
Entre autres choses, il est également important de permettre à ceux qui nous visitent pour être capable de zoomer le texte d'une page ou un article.
Cette fonctionnalité en plus d'être apprécié par des gens ayant des problèmes visuels peuvent devenir le fleuron de notre travail si elles sont appliquées d'une manière créative.
La solution
Je pensais que cette fois-ci en utilisant le composant d'interface utilisateur jQuery curseur pour créer notre fontSize-switchers, en faisant appel aussi bien sûr quelques lignes de CSS.
Pour donner une idée du résultat final que nous voulons réaliser un coup d'oeil l'image ci-dessous:
Le nécessaire
Voici une image "d'un exemple de structure de dossiers simples:
Ui jQuery et jQuery
Nous télécharger d'abord la dernière version de jQuery d' ici (1.6.1 au moment de l'écriture)
La prochaine étape est de télécharger jQuery UI , et en particulier la composante curseur, suivant les mêmes étapes que nous avons décrit ici, pour la progression.
Le index.html
Il ya alors une structure HTML simple, que nous appelons une page index.html simplement
<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 brasserie-lechantilly.com et 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 rel="stylesheet" type="text/css" />
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 brasserie-lechantilly.com et font-size </ h3>
<div id="fontLabels">
<div id="normal"> A </ div>
<div id="big"> A </ div>
<div id="bigger"> A </ div>
<div id="biggest"> A </ div>
</ Div>
<div id="sliderCont"> <div id="slider" class="ui-widget-header"> </ div> </ div>
<div id="textcontent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque sem risus, eget CONGU eget plus digne, pharetra dans des bocaux.
En hac dictumst Habitare public.
</ Div>
</ Body>
</ Html>
La page comprend tous les fichiers nécessaires, css et js nous avons besoin. A l'intérieur de la balise du corps que nous venons de définir un div avec id = fontLabels l'intérieur avec quatre div qui va contenir les échantillon "A" avec une police de taille différente.
Juste en dessous, nous définissons un conteneur (div id = "sliderCont»), nous devons nous mettre au milieu de la page et dans un div avec id = "slider" dans lequel nous allons construire avec curseur JQuery UI lui-même.
J'ai ajouté le conteneur de texte avec id = "TextContent" sur lequel nous allons agir pour augmenter / diminuer la taille de la police.
 |
CSS (cours)
Web Design et accessibilité selon le W3C CSS et XHTML. A partir de 29 €. |
 |
HTML (Cours)
Le langage de balisage pour le Web à partir de 29 €. |
 |
Javascript (Cours)
Guide complet pour les scripts côté client. A partir de 39 €. |