クイックスタート

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

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

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

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

依存ファイルへのリンクを HTML ページの <head> タグ内に追加します。最新の依存ファイルについては、wijmo cdn にある CDN ファイルを参照してください。

ドロップダウンからリファレンスをコピーして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> <script src="http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20173.128.js" type="text/javascript"></script> <!--Knockout JS Library--> <script src="http://cdn.wijmo.com/external/knockout-3.1.0.js" type="text/javascript"></script> <!--Wijmo Knockout Integration Library--> <script src="http://cdn.wijmo.com/interop/knockout.wijmo.3.20173.128.js" type="text/javascript"></script>

<body> タグ内に、以下のマークアップを追加して、ウィジェットを作成します。最初の <div> 要素はウィジェットを作成し、jQuery でその id 属性を呼び出してウィジェットを初期化します。２番目の <div> 要素は、スクリプトで作成する popupbelow 関数を呼び出すボタンを作成します。

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

マークアップ	コードのコピー
<!-- Image that displays with wijpopup --> <div id="unicorn"> <img src="http://cdn.wijmo.com/images/unicorn.jpg" alt="Popup Unicorn!" /> </div> <!-- Button to show the image and set its relative location --> <div> <input type="button" id="showbtn" onclick="popupbelow();" value="Show Popup" /> </div>

<head> タグ内の参照の下に、以下のスクリプトを追加して、ウィジェットを初期化し、エフェクトを追加し、画像を表示する場所をポップアップに指示します。

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

HTML ファイルを保存して閉じ、それをブラウザで開きます。ウィジェットは以下に表示されます。

関連トピック

参照