フォントサイズを変更するボタン/コンテンツ表示/SolidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

テキストjquery.ui.js

SAMPLE
CODE
DownLoad

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Slider</title>
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.js"></script>
<script type="text/javascript" src="scripts/cookie.js"></script>
<script type="text/javascript" src="scripts/TextSizeSlider.js"></script>
<style type="text/css" media="screen">
body {
	text-align: center;
	margin: 0px;
}
#text {
	font-family: Helvetica, Arial, sans-serif;
	width: 620px;
	background: #333;
	padding: 20px 20px 20px 25px;
	position: relative;
}
#text p {
	font-size: 12px;
	text-align: left;
	color: black;
}
#text h1 {
	text-align: left;
	color:#FFF;
}

#text p{
  font-family: Arial, Helvetica, sans-serif;
  color: #CCC;
}

.minus {
	background: url(images/minus-trans.png) no-repeat;
	height: 9px;
	width: 25px;
	overflow: hidden;
	position: absolute;
	top: 17px;
	right:38px;
	cursor: pointer;
}
.add {
	background: url(images/add-trans.png) no-repeat;
	height: 25px;
	width: 23px;
	position: absolute;
	top: 10px;
	right:10px;
	cursor: pointer;
}
#font_indicator{
position: absolute;
right: 10px;
top: 50px;
font-size: 10px;
color: #CCC;
display: none;
}
</style>
</head>
<body>
<div id="text">
  <h1>Text Size Slider</h1>
  <div class="minus"></div> 
  <div class="add"></div>
  <div id="font_indicator">フォントサイズ: <b></b> </div>
  
  <p> Yoga is a science. That is the second thing to grasp. Yoga is a science, and not a vague, dreamy drifting or imagining. It is an applied science, a systematized collection of laws applied to bring about a definite end. It takes up the laws of psychology, applicable to the unfolding of the whole consciousness of man on every plane, in every world, and applies those rationally in a particular case. This rational application of the laws of unfolding consciousness acts exactly on the same principles that you see applied around you every day in other departments of science.</p>
</div>
</body>
</html>

	Use the jQuery UI to Control the Size of Your Text - Nettuts+

フォントサイズを変更できるボタンを作成することが出来ます。
よくあるCSS切り替えによるものでなく、サイズを加えていくように連続して変更することが可能です。
フォントサイズの表示もできますが、デフォルトで表示されるスライダーを操作してもサイズは変更されないので、取り除いて使用したほうが良いかもしれません。

セッティング

１．ダウンロード/セッティング

サイトへ行き「Souce」をクリックし Text Slider Demo.zip をダウンロードします。
解凍したら index.html を開き、１４～１１０行目のスクリプトをコピーし新たに TextSizeSlider.js と名づけてjsファイルを作成します。
保存場所はscriptフォルダでOKです。
ファイルを作成したら、imagesフォルダ、scriptフォルダをまとめてアップロードしてください。