Wijmo UI for the Web
クイックスタート
| Wijmo ユーザーガイド > ウィジェット > Gallery > クイックスタート |
このクイックスタートでは、HTML マークアップおよび jQuery スクリプトを使用して、HTML プロジェクトに Gallery ウィジェットを追加する方法について学びます。
ドロップダウンしてマークアップをコピーします
| テキストエディタに張り付けます |
コードのコピー |
|---|---|
<!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="gallery1" class=""> <ul class=""> <li class=""><a href="Images/sports1.png"> <img alt="1" src="Images/sports1.png" title="Word Caption 1" /> </a></li> <li class=""><a href="Images/sports2.png"> <img alt="2" src="Images/sports2.png" title="Word Caption 2" /> </a></li> <li class=""><a href="Images/sports3.png"> <img alt="3" src="Images/sports3.png" title="Word Caption 3" /> </a></li> <li class=""><a href="Images/sports4.png"> <img alt="4" src="Images/sports4.png" title="Word Caption 4" /> </a></li> <li class=""><a href="Images/sports5.png"> <img alt="5" src="Images/sports5.png" title="Word Caption 5" /> </a></li> <li class=""><a href="Images/sports6.png"> <img alt="6" src="Images/sports6.png" title="Word Caption 6" /> </a></li> <li class=""><a href="Images/sports7.png"> <img alt="7" src="Images/sports7.png" title="Word Caption 7" /> </a></li> <li class=""><a href="Images/sports8.png"> <img alt="8" src="Images/sports8.png" title="Word Caption 8" /> </a></li> <li class=""><a href="Images/sports9.png"> <img alt="9" src="Images/sports9.png" title="Word Caption 9" /> </a></li> </ul> </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.wijgallery"], function () { $(document).ready(function () { $("#gallery1").wijgallery({ showControlsOnHover: false, thumbsDisplay: 4, thumbsLength: 150 }); }); }); </script> | |
ドロップダウンからマークアップをコピーして head タグ内に貼り付けます
| スタイル |
コードのコピー |
|---|---|
<style type="text/css"> #gallery1 { width: 650px; } </style> | |
全て展開
すべて折りたたむ