..


スポンサーリンク

フォントのサイズを管理... スライダー付き！

リカルドブランビラによって書かれた記事
ページ1の2

近代的なサイトとあなたの実装だけでなく、グラフィックスおよびコンテンツのでなく、 アクセシビリティ"に注意する必要があります。

W3Cについてのガイドラインが存在すると、翻訳を見つけることができますここで 。

とりわけ、私たちを訪れる人は、特定のページまたはセクションのテキストをズームすることができるようにすることも重要です。

創造的な方法で実装されていれば視覚的な問題を持つ人々が享受しているに加えて、この機能は、我々の仕事の主力になることができます。

のソリューション

私はもちろん、CSSの数行を活用して、私たちのfontSize -スイッチャーを作成するためにjQueryのUIのスライダーのコンポーネントを使用してこの時間を考えた。

我々は見て下の画像を達成したい最終結果のアイデアを与えるには：

私たちのスライダー

必要な

ここで、単純なフォルダ構造の例の"イメージは、次のとおりです。

フォルダ構造

jQueryとjQuery UIの

私たちは、から第一のjQueryの最新バージョンをダウンロードここに （執筆の時点で1.6.1）

次のステップは、ダウンロードすることがありますjQueryのUIを我々が説明した同じ手順に従って、特にスライダーのコンポーネント 、 ここで プログレスバーのために。

index.htmlを

我々はページだけでindex.htmlを呼び出す単純なHTML構造は、次にあります 






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









 <HTML>







 <HEAD>



  



スライダー<TITLE> jQuery UIのchickpeatocook.comとfont - size </タイトル>





  



 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>



    





 </ヘッド>







 <BODY>



  



スライダー<H3> jQuery UIのchickpeatocook.comと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イプサム嘆き座るamet、consectetur adipiscing elit。

 

    



 Quisque SEM笑い、瓶のeget CONGU最も価値のあるeget、pharetra。

 

    



 HAC dictumst habitareの聴衆で。



  



 </ DIV>







 </ BODY>







 </ HTML>

ページには、我々が必要とするすべての必要なファイル、CSSやJSのファイルが含まれています。 bodyタグ内では、単に異なるフォントサイズで"A"のサンプルが含まれてする4つのdivを使用して内部ID = fontLabelsでdivを定義する。

ちょうど下の我々はページの中央に、我々は、jQuery UIのスライダー自体で構築しますではid ="スライダー"を持つdiv内に自分自身を配置する必要があります。コンテナ（ID ="sliderCont"div要素）を定義します。

私たちはフォントサイズを増加/減少させる作用となるの id ="TextContent"でテキストコンテナを追加しました。

同じカテゴリの...
E -ラーニング
CSS（コース） CSS（コース）
W3C CSSやXHTMLに応じてWebデザインとアクセシビリティ。 29€から開始。
HTML（コース） HTML（コース）
29€からWeb用のマークアップ言語。
ジャバスクリプト（コース） ジャバスクリプト（コース）
クライアントサイドスクリプトへのガイドを完了します。 39€から。
スポンサーリンク