yahoo ui library 「スライダー」をテスト

スライダーを使ってテキストサイズを変更するサンプルを作りました。
使用ライブラリはver0.12。
サンプルを見る
yahoo uiの公式サイトには文章の行数をスライダーで増減させるサンプルがリンクされています。【該当ページ

ソース
[html]

スライダーのサンプル

var slider;
var Dom = YAHOO.util.Dom;
slider = YAHOO.widget.Slider.getHorizSlider(“sliderbg”, “sliderthumb”, 0, 200);
//つまみの初期値
slider.setValue(100,true);
//つまみの値が変わるごとにfunctionを実行
slider.subscribe(“change”,
function(offsetFromStart) {
// offsetFromStartが100なので0.12をかけて12にしている。
var actualValue = parseInt(offsetFromStart * 0.12 , 10);
// domでid名printtxtにピクセルサイズを出力
Dom.get(“printtxt”).innerHTML= “bodyのフォントサイズ:”+actualValue +”px”;
//bodyのフォントサイズをactualValueで設定
document.body.style.fontSize = actualValue+”px”;
}
);

body{
margin:0px;
padding:0px;
}
/*スライダの背景*/
#sliderbg{
width:220px;
height:20px;
position:relative;
left:10px;
top:10px;
background:url(images/sliderbk.png) no-repeat;
}
/*スライダのつまみ*/
#sliderthumb {
position:absolute;
width:20px;
height:20px;
cursor:default
}
/*可変サイズテキスト部分*/
#vertVal{
position:relative;
left:10px;
top:20px;
width:450px;
color:#666666;
}
/*現在のフォントサイズ表示エリア*/
#printtxt{
position:relative;
left:10px;
top:5px;
font-size:12px;
font-weight:bold;
color:#ff3366;
}

Slider構成要素は、ユーザーは1、2の軸に沿った有限範囲の価値を調節することができるUI支配です。一般的に、Sliderの統制が、入力として数をとる入力ボックスの豊かな、視覚の代用として、ウェブアプリケーションで使われます。Sliderの統制は第2の局面を簡単に収めることもできます。そして、x,y出力を長方形の地域から選ばれる選択点に提供します。

[/html]

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中