「Progressbar」公式ページ
jQuery UI Documentation / API / 1.8 / Progressbar
「Progressbar」についての「Demos & Documentation」
jQuery UI Demos & Documentation / Progressbar
…なんですが…プログレスバーって…
そもそも普通の無料ブログ管理者には用無しでしょ
なので…動きのあるカラフルな区切り線として…
使用してみては如何でしょう…
記事と記事フッターの区切りや…
タブナビゲーションなど…
少しだけ目立たせたい場所に設置したりすると…
カラフルでアクセントになります…
しかしながら公式ページでは…
タスクの進捗状況を…
任意のページにパーセント表示するサンプルが示されていますが…
例えばアプリケーションのインストール中に表示されるような…
動きのあるプログレスバーではありません…
それでも領域一杯の「gif アニメーション」を自作すれば…
プログレスバーを動きのあるカラフルな区切り線として使用できるでしょうが…
現実的な方法ではありません…
なので…公式サイトの…
「Options」の「value」のポジションの値を「p」として…
「p」を「0」～「100」まで連続して指定しプログレスバーに動きを与える…
「move」という命令を…
クラス名が「progressbar」の時に繰り返す…という…
カスタムコードを追加します…
「Progressbar」のカスタムコード
var p=0;function move(){p+=1;if(p>100){p=0}$(".progressbar").progressbar("option","value",p)}$(function(){$(".progressbar").progressbar({value:0});setInterval(move,100)});
複数箇所ある「p」「move」や…
クラス名「progressbar」は…
ご自身の解りやすい文字列でも OK です…
上記カスタムコードを導入すると…
こんな感じの区切り線を使えるようになります…
１番目は…実装していませんが…
デフォルトの状態を解りやすくするためのサンプルです…
プログレスバーの「高さ」…
プログレスバーに割り当てられるテーマ毎の背景画像はデフォルトで…
動きのある部分の背景色は「#c0c0c0」に変更し…
お遊びで「ブタの gif アニメーション画像」を追加してあります…
上記サンプルの HTML マークアップです…
上記サンプルの HTML マークアップ
<div class="progressbar value0"></div>
<div class="progressbar value11"></div>
<div class="progressbar value12"></div>
<div class="progressbar value13"></div>
<div class="progressbar value14"></div>
<div class="progressbar value15"></div>
<div class="progressbar value16"></div>
<div class="progressbar value17"></div>
<div class="progressbar value18"></div>
<div class="progressbar value19"></div>
<div class="progressbar value20"></div>
実装では…各行間に１行の改行を入れています…
上記サンプルの CSS です…
上記サンプルの CSS
/* １番目のサンプルの CSS */
.value0 .ui-progressbar-value {background:#c0c0c0 url(ブタの gif アニメーション画像の URL)}
/* ２番目以降ののサンプルの CSS */
div.value11,div.value12,div.value13,div.value14,div.value15,div.value16,div.value17,div.value18,div.value19,div.value20{background:#555;height:2px;}
.value11 .ui-progressbar-value{background:#C0C0C0;height:2px;}
.value12 .ui-progressbar-value{background:#F15B55;height:2px;}
.value13 .ui-progressbar-value{background:#1E90FF;height:2px;}
.value14 .ui-progressbar-value{background:#7777FF;height:2px;}
.value15 .ui-progressbar-value{background:#2E8B57;height:2px;}
.value16 .ui-progressbar-value{background:#4169E1;height:2px;}
.value17 .ui-progressbar-value{background:#8AC75A;height:2px;}
.value18 .ui-progressbar-value{background:#008080;height:2px;}
.value19 .ui-progressbar-value{background:#20B2AA;height:2px;}
.value20 .ui-progressbar-value{background:#BDB76B;height:2px;}
４行目でテーマの枠線色と同色を背景色に指定し高さを「2px」に変更しています…
枠線も含めて高さは「4px」になります…
動きのある部分はデフォルトでクラス名「ui-progressbar-value」が…
割り当てられますので…５行目以降で…
クラス名「ui-progressbar-value」の各背景色を指定し…
高さを「2px」に変更しています…
これが…デフォルトに沿った設定という事になるかと思われますが…
実装では多少の事には目をつぶって…
記述量を減らすために…
真逆の設定をしています…こんな感じ…
上記サンプルの HTML マークアップです…
上記サンプルの HTML マークアップ
<div class="progressbar value1"></div>
<div class="progressbar value2"></div>
<div class="progressbar value3"></div>
<div class="progressbar value4"></div>
<div class="progressbar value5"></div>
<div class="progressbar value6"></div>
<div class="progressbar value7"></div>
<div class="progressbar value8"></div>
<div class="progressbar value9"></div>
<div class="progressbar value10"></div>
実装では…各行間に１行の改行を入れています…
上記サンプルの CSS です…
上記サンプルの CSS
div.value1{background:#C0C0C0;height:2px;}
div.value2{background:#F15B55;height:2px;}
div.value3{background:#1E90FF;height:2px;}
div.value4{background:#7777FF;height:2px;}
div.value5{background:#2E8B57;height:2px;}
div.value6{background:#4169E1;height:2px;}
div.value7{background:#8AC75A;height:2px;}
div.value8{background:#008080;height:2px;}
div.value9{background:#20B2AA;height:2px;}
div.value10{background:#BDB76B;height:2px;}
各プログレスバーの背景色を…
テーマのデフォルトの「ui-progressbar-value」で…
消して行く…ってな感じですね…
どちらの方法でも…
プログレスバーの長さは…
設置場所の領域幅に依存します…
変更するには「div」への…
「margin」「width」の「style 属性」直書きで対応して下さい…
以上ですが…既に「jQuery」と「jQuery UI」を…
導入済みの方も含め…ご自身のお好きな色で…
動きのあるカラフルな区切り線として…
「Progressbar」を使ってみて下さいな…
お疲れ様でした…
0 Comments :
View Comments :: Click!!
0 Comments :
Post a Comment :: Click!!
コメントを投稿