クイックスタート

クイックスタートでは、Web ページの作成、wijlistview ウィジェットの追加、およびウィジェットの外観と動作のカスタマイズを行います。

テキストエディタに張り付けます	コードのコピー
<!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/mobile/1.4.0/jquery.mobile-1.4.0.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/1.4.0/moonlight-mobile/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> 要素が jQuery Mobile ページを作成し、２番目の <div> 要素が JQM コンテンツ領域を作成します。<ul> タグは wijlistview ウィジェットを作成します。

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

マークアップ	コードのコピー
<div data-role="page"> <div data-role="content"> <ul data-role="listview" data-autodividers="true" data-theme="c"> <li><a href="http://wijmo.com/docs/wijmo/webframe.html#Accordion.html">Accordion</a> </li> <li><a href="http://wijmo.com/docs/wijmo/webframe.html#BarChart.html">Barchart</a> </li> <li><a href="http://wijmo.com/docs/wijmo/webframe.html#BubbleChart.html">Bubblechart</a></li> <li><a href="http://wijmo.com/docs/wijmo/webframe.html#Calendar.html">Calendar</a> </li> <li><a href="http://wijmo.com/docs/wijmo/webframe.html#Carousel.html">Carousel</a> </li> </ul> </div> </div>

リファレンスの配下、<head> タグ内次のスクリプトを追加してウィジェットを初期化したり、データを読み込んだりします。

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

関連トピック