クイックスタート

全て展開

すべて折りたたむ

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

メモ帳で、新しい HTML ページを作成するには、次のコードを追加し、.html 拡張子を付けてドキュメントを保存します。
ドロップダウンからリファレンスをコピーして、Notepad に貼り付けます
Notepadに貼り付けます
コードのコピー

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

Notepadに貼り付けます	コードのコピー
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

CDN から最新の依存ファイルを参照するには、wijmo cdn を確認してください。これらを HTML ページの <head> タグ内でメタタグの上または下に追加します。たとえば、次のようになります。

ドロップダウンからリファレンスをコピーして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> タグ内に、次のようにマークアップを追加します。

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

body タグ内に貼り付けます	コードのコピー
<div data-role="page" data-theme="b"> <div data-role="wijappview"> <div data-role="appviewpage"> <div data-role="header"> <h2>Appview</h2> </div> <div data-role="content"> Default content, not displayed on a small screen. </div> </div> <div data-role="menu" class="ui-body-a"> <ul data-role="listview" data-theme="a"> <li><a href="blippity.html">Blippity</a></li> <li><a href="fling.html">Fling</a></li> <li><a href="flang.html">Flang</a></li> </ul> </div> </div> </div>

ドロップダウンからマークアップをコピーして body タグ内に貼り付けます最初の <div> 要素はページを作成し、２番目の要素は wijappview ウィジェットを作成します。３番目の要素は、４番目と５番目の <div> タグを含むヘッダーとデフォルトコンテンツを追加する appviewpage を作成します。最後の <div> タグのセットは、各リスト項目内のメニュー項目へのリンクを含む順序付けられていないリストを埋め込むメニューを作成します。

メモ帳で、以下の名前とコンテンツを持つ３つの新しい HTML ページを作成します。

blippity.html

新規の HTML ページを作成する	コードのコピー
<div data-role="appviewpage" data-title="Blippity"> <div data-role="content"> <p>Dobba bam flobble blab. Yip floppity quabble flub quabble roo rizzle. Troy McClure ho Timmy boo do-da shnuzzle-tongle.</p> <p>Flabbity nizzle crangle! Smithers ha razz ho flooble do-da fleezungle. Twaddle tingle ongle zip wow blung razzle bam wobble.</p> <p>Blippity Fling-Flang compliments of <a href="http://bff.orangehairedboy.com/">orange haired boy</a>.</p> </div> </div>

fling.html

新規の HTML ページを作成する	コードのコピー
<div data-role="appviewpage" data-title="Fling"> <div data-role="content"> <p>Kanoodle fling dabba hum cringle nizzle zangle zap flooble. Blobbing quabbleblong. JINGLE LING RAZZLESHNIZZLE, "ZOOM DUH DEE GOBLIN," BAM BOBA FETT WOGGLE INGLE NIP SHNAZZLE-WOW...QUIBBLE DUH HUM! Duh izzle shnoz nizzle BLEE loo whack. "Bam shnizzle boo?" hizzle Cartman.</p> <p>Blippity Fling-Flang compliments of <a href="http://bff.orangehairedboy.com/">orange haired boy</a>.</p> </div> </div>

flang.html

HTML ファイルを保存し、お気に入りの Web サーバーでホストし、ブラウザでメインファイルを開きます。wijappview ウィジェットは、次のように表示されます。

関連トピック