「jQuery」と「jQuery UI」で HTML に彩りを添えよう…第６回「Progressbar」動きのあるカラフルな区切り線として使用

「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」を使ってみて下さいな…

お疲れ様でした…

Prev 1 2 3 4 5 6 7 8 9 Extra Next

Design jQuery / Extra JavaScript Current-Label : jQuery