wijprogressbar ウィジェットでは、プログレスバーの進行方向を変更できます。 オプションには、east（左から右方向）、west（右から左方向）、north（下から上方向）、および south（上から下方向）があります。 この機能を利用するには、単に fillDirection オプションを設定します。 Web サイト（http://demo.componentone.com/ASPNET/MVCExplorer/progressbar/Direction）にアクセスし、MVC コントロールエクスプローラの ProgressBar > Direction サンプルのライブデモをご覧ください。
- ASP.NET MVC 4 Wijmo アプリケーション を作成します。
- ソリューションエクスプローラで、Views | Shared フォルダを展開し、_Layout.cshtml をダブルクリックしてファイルを開きます。
- 以下のマークアップをページの <body> タグ内に追加します。
ソースビュー コードのコピー<div id="progressbar1"> </div> - 前の手順で追加した </div> 終了タグの後に、以下の jQuery スクリプトを入力し、 wijprogressbar ウィジェットを初期化して fillDirection オプションを設定します。
ソースビュー コードのコピー<script type="text/javascript"> $(document).ready(function () { $("#progressbar1").wijprogressbar({ value: 75, fillDirection: "north" }); }); </script> - アプリケーションを実行すると、プログレスバーが下から上方向に進行します。 オプションを east または west に設定すると、バーは水平になります。
関連トピック