Wijmo UI for the Web
クイックスタート
| Wijmo ユーザーガイド > ウィジェット > Dialog > クイックスタート |
このクイックスタートでは、HTML マークアップおよび jQuery スクリプトを使用して、HTML プロジェクトに Dialog ウィジェットを追加する方法について学びます。
ドロップダウンしてマークアップをコピーします
| テキストエディタに張り付けます |
コードのコピー |
|---|---|
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML> | |
ドロップダウンから参照コードをコピーして head タグ内に貼り付けます
| 参照 |
コードのコピー |
|---|---|
<!--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" /> <!--RequireJs--> <script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script> | |
ドロップダウンからマークアップをコピーして body タグ内に貼り付けます
| マークアップ |
コードのコピー |
|---|---|
<div id="dialog" title="Basic dialog"> </div> | |
ドロップダウンからスクリプトをコピーして head タグ内に貼り付けます
| スクリプト |
コードのコピー |
|---|---|
<script type="text/javascript"> requirejs.config({ baseUrl: "http://cdn.wijmo.com/amd-js/3.20173.128", paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min" } }); </script> <script id="scriptInit" type="text/javascript"> require(["wijmo.wijdialog"], function () { $(document).ready(function () { $('#dialog').wijdialog({ autoOpen: true, captionButtons: { refresh: { visible: false} } }); }); }); </script> | |
全て展開
すべて折りたたむ