進行状況表示バー

「プロパティー」ビューと「すべての属性」ビュー

コンポーネントの「プロパティー」ビューには、 コンポーネントに設定できる最も一般的な属性のセットが表示されます。 コンポーネントによっては、制御、アクション、 または他のコンポーネントの追加に関するオプションが 表示される場合もあります。 「プロパティー」ビューを開くには、 「ウィンドウ」 > 「ビューの表示」 > 「プロパティー」とクリックします。

「進行状況表示バー」コンポーネントの共通属性は、 「プロパティー」ビューの「hx:Progressbar」タブに表示されます。 属性の完全なリストについては、「進行状況表示バー」の属性 の テーブルを参照してください。

「すべての属性」ビューには、コンポーネントで設定できるすべての属性のテーブルが表示されます。 このテーブルには、「プロパティー」ビューからアクセスできる属性も含まれます。 「すべての属性」ビューに切り替えるには、 「プロパティー」ビューの右上隅にある「すべての属性」アイ コンをクリックします。

CSS クラス

API 呼び出し

説明

タスクが実行中であって、行うことがどの程度残っているのかを示す視覚的な合図として使用できる、 進行状況表示バーを描画します。

進行状況表示バーでは、バーの表示を制御する JavaScript がページに追加されている必要があります。 auto 属性が true に設定されている場合は、JavaScript を使用してバーの表示が開始および停止されます (バーは指定されたタイマー間隔で描画されます)。 auto 属性が false に設定されている場合は、バーに対する各更新は、バーに対する別個の JavaScript 呼び出しによって行われます。

hX.getComponentById("id").start("message");

hX.getComponentById("id").stop();

hX.getComponentById("id").upDatePercentage(value);

アクセシビリティー

このコンポーネントは「出力」コンポーネントなので、ページのタブ順序には含まれていません。このコンポーネントを読み取っているときに、スクリーン・リーダーはタイトル (存在する場合) とメッセージを報告します。規則として、スクリーン・リーダーはメッセージを一度しか読み取らないので、スクリーン・リーダーにとってはメッセージよりもバーの存否 (非表示になっているのか、それとも表示されているのか) の方が重要となります。

制限と注意

• このコンポーネントは、ブロック・レベル要素としてレンダリングされます。
• 進行状況表示バーを非表示にしても、それがリセットされるわけではありません。
• 進行状況表示バーをリセットしても、それが停止したりメッセージが変わるわけではありません。
• 進行状況表示バーが作成された後は、それが置かれているページを再ロードしない限り、auto 属性の値を変更することはできません。
• auto が true に設定されていない進行状況表示バーの start 関数を呼び出しても、効果がありません。逆に、auto が false に設定されていない進行状況表示バーの upDatePercentage 関数を呼び出しても、効果がありません。
• 進行状況モードにおいて、停止と (再) 始動の間にリセットを呼び出す必要があります。リセットを呼び出さない場合、再始動しません。

サンプル・コード

左から右へ伸び、毎秒 10% ずつサイズが大きくなる「自動」進行状況表示バーを定義します。

<hx:progressBar id="pb1" auto="true" styleClass="progressBar"
title="Progress bar" message="<b>hello</b>"
proportion="10" timeInterval="1000"/>
<input type="button" value="start" onclick="start1();"/>
<input type="button" value="stop" onclick="end1();"/>
<script>
function start1() {
    hX.getComponentById("pb1").start();
}
function end1() {
    hX.getComponentById("pb1").stop();
}
</script>

左から右へ伸びる「手動」進行状況表示バーを定義します。バーのパーセントは、JavaScript 呼び出しによって手動で設定されます。初期パーセント値は 15% です。

<hx:progressBar id="pb3" auto="false" styleClass="progressBar" message="hello" initValue="15"/>
<input type="button" value="set to 20%" onclick="move1();" />
<input type="button" value="set to 72%" onclick="move2();" />
<script>
function move1() {
    var obj = hX.getComponentById("pb3");
    obj.upDatePercentage(20);
    obj.redraw();
}

function move2() {
var obj = hX.getComponentById("pb3");
    obj.upDatePercentage(72);
    obj.upDateMessage("value is now set to 72 %");
    obj.redraw();
}
</script>