クイックスタート

このクイックスタートでは、HTML マークアップと jQuery スクリプトを使用して、HTML プロジェクトに ProgressBar ウィジェットを追加する方法を学びます。

テキストエディタで新規の HTML ページを作成するには、下記コードを追加して文章を .html の拡張子で保存します。
ドロップダウンしてマークアップをコピーします
テキストエディタに張り付けます
コードのコピー

<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

テキストエディタに張り付けます	コードのコピー
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

CDN から最新の依存ファイルを参照するには、wijmo cdn を確認してください。そしてこれらを HTML ページの <head> タグ内に追加します。

ドロップダウンからリファレンスをコピーしてhead タグ内に貼り付けます

リファレンス	コードのコピー
<!--jQuery References--> <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20173.128.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.js" type="text/javascript"></script>

次のマークアップを <body> タグ内に追加して、ウィジェットを作成します。<div> 要素はウィジェットを作成します。id オプションは、'progressbar' に設定します。これを jQuery から呼び出して、ウィジェットを初期化します。このマークアップで 50×300 ピクセルの上に見出し、下にテキストが表示されるプログレスバーが追加されます。'ui-helper-clearfix' クラスを呼び出す <div> 要素は、ウィジェットの後にスペースを作り、テキストがプログレスバーの横ではなく下に表示されるようにします。

ドロップダウンからマークアップをコピーしてbody タグ内に貼り付けます

マークアップ	コードのコピー
<h3>Fund Raising Goal: $1,000,000</h3> <div class="ui-helper-clearfix"> <div id="progressbar" style="width:50px;height:300px"></div> </div> <p>Funds collected to date: $750,000. <br>Won't you help us to reach our goal?</p>

<head> タグ内の参照の下に、次のスクリプトを追加して、jQuery ウィジェットを初期化して、いくつかのウィジェットオプションを設定します。

進行量は 75 パーセントです。
プログレスバーのアニメーションは下から上に（北向き）に進みます。
アニメーションの持続時間は 1000 ミリ秒に設定します。
進行量のインジケータ画像は単色ではなく、ロケットテーマの斜線に設定します。

ドロップダウンからスクリプトをコピーしてhead タグ内に貼り付けます

HTML ファイルを保存し、ブラウザで開きます。次のような wijprogressbar ウィジェットが表示されます。

関連トピック

参照