This quick start helps you to create a Web page, add the wijappview widget, and customize the appearance and behavior of the widget.
- To create a new HTML page in your favorite text editor, add the following code and save the document with an .html extension.
Drop down and copy HTML markup to paste inside Notepad
| Paste in Notepad. |
Copy Code
|
<!DOCTYPE HTML>
<HTML>
<head>
</head>
<body>
</body>
</HTML>
|
- To reference the latest dependencies from the CDN, see wijmo cdn. Add them to your HTML page within the <head> tags. For example:
Drop down and copy references to paste inside the head tags
| References |
Copy Code
|
<!--jQuery References-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.1/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.20132.15.min.css" rel="stylesheet" type="text/css" />
<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20132.15.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20132.15.min.js" type="text/javascript"></script> |
- Within the <body> tags, add markup like the following:
Drop down and copy markup to paste inside the body tags
| Paste inside the body tags. |
Copy Code
|
<div data-role="page" data-theme="b">
<div data-role="wijappview">
<div data-role="appviewpage">
<div data-role="header" data-position="fixed">
<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>
|
The first <div> element creates the page, and the second one creates the wijappview widget. The third one creates the appviewpage where we add a header and default content with the fourth and fifth <div> tags. The last set of <div> tags create the menu, where we embed an unordered list with links to menu items in each list item.
- In Notepad, create three new HTML pages, with the following names and contents:
blippity.html
| Create a new HTML page |
Copy Code
|
<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
| Create a new HTML page |
Copy Code
|
<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
| Create a new HTML page |
Copy Code
|
<div data-role="appviewpage" data-title="Flang">
<div data-role="content">
<p>Ting doo rakity flakity shnazbizzle. SHNIZZLE blo crangely hum
wooblewiggle??? Smithers ha bananarama hum wheezer flabbity
shnizzlehizzy. "Yip noodle doo?" blop wubbleshnizzle.</p>
<p>Blippity Fling-Flang compliments of <a
href="http://bff.orangehairedboy.com/">orange haired boy</a>.</p>
</div>
</div>
|
- Save your HTML files, host them in your favorite web server, and open the main one in a browser. The wijappview widget appears like the following.
Image Title
|
See Also
Widgets
Show All
Hide All