Gerenciar o tamanho das fontes ... com um controle deslizante!
Página 1 de 2
Implementação de um site moderno e você deve estar ciente não apenas de gráficos e conteúdo, mas também de 'acessibilidade.
Existem algumas orientações sobre o W3C, você pode encontrar a tradução aqui .
Entre outras coisas, também é importante para permitir que aqueles que nos visitam para ser capaz de ampliar o texto de uma determinada página ou seção.
Esta característica, além de ser apreciado por pessoas com problemas visuais pode se tornar o carro-chefe do nosso trabalho se forem implementadas de uma forma criativa.
A solução
Eu pensei que dessa vez usando o componente de controle deslizante jQuery UI para criar o nosso fontSize-switchers, fazendo uso também de um curso de algumas linhas de CSS.
Para dar uma idéia do resultado final que queremos alcançar uma olhada na imagem abaixo:
Necessária
Aqui está uma imagem "de um exemplo simples de estrutura de pastas:
Ui jQuery e jQuery
Nós primeiro download a última versão do jQuery aqui (1.6.1 no momento da escrita)
O próximo passo é fazer o download jQuery UI , e em determinado componente do controle deslizante, seguindo os mesmos passos que descrevemos aqui para o progresso.
O index.html
Há então uma estrutura simples HTML, que chamamos de uma página apenas 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 charme-et-provence.com e 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 <h3> jQuery Ui charme-et-provence.com e 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, elit adipiscing consectetur.
Quisque SEM risus, eget eget CONGU mais digno, pharetra em jarros.
Em audiência hac Habitare dictumst.
</ Div>
</ BODY>
</ Html>
A página inclui todos os arquivos necessários, css e js que precisamos. Dentro da tag body nós apenas definir uma div com id = fontLabels dentro com quatro div que conterá a amostra "A" com um diferente font-size.
Logo abaixo se define um recipiente (div id = "sliderCont"), precisamos nos colocar no meio da página e dentro de uma div com id = "slider", em que vamos construir com controle deslizante jQuery UI em si.
Eu adicionei o recipiente de texto com o id = "TextContent" em que nós vamos agir para aumentar / diminuir o tamanho da fonte.
 |
CSS (Curso)
Web Design e Acessibilidade de acordo com a W3C CSS e XHTML. A partir de 29 €. |
 |
HTML (Curso)
A linguagem de marcação para a Web a partir de 29 €. |
 |
Javascript (Curso)
Completo guia para client-side scripting. A partir de 39 €. |