WebApp Helper

Make a web app!

Open the “PageMakerHelper tool,” then use the tool to play with the example code below and at the other links provided…

I made the page you're reading now with this very same tool! With jQueryMobile and a nudge you can copy/paste all kinds of interesting and useful things together. (You'll find a better "page-maker helper tool there too, but to see how code is "wrapped" use mine and then compare left and right panels. To be more authentic learn to use a tool like DiffMerge.

Dear Beginners, "A Web app is like a ship full of Matryoshka dolls!"

Page One: Formatting & Lists
Page Two: Buttons
Page Three: Links

For best results try this page with a mobile browser, Chrome, Firefox, or Safari. Comment on my blog.

This is all part of a bigger plan:

context theory

Mobile WebApp Helper by Richard C. Fouchaux
is licensed under a Creative Commons Attribution 3.0 Unported License.
Permissions beyond the scope of this license may be available at rcfouchaux.ca.

Footer content

Home

Page One… to know

Page Maker

Basic content formatting

<h2>Things you should know…<h2>

<h3>Code for headers, paragraphs</h3>

<h4>when you're done, learn buttons.…</h4>

Page one paragraph. You will use lists and buttons

List item, unstyled list. It gets normal bullets or numbers.
<ul><li>List item</li></ul>

Unstyled list item inside list styled data-role="listview" gets bold font and its own row
<ul data-role="listview"><li>List item</li></ul>
<li><a href="#">List items inside an anchor gets an arrow and glows when you hover or click. Long text gets truncated with a ellipsis!</a></li>

Version 1.3.1 was released spring 2013, easier copy/paste

Introduction Demo Showcase

Page Two

Home

Get the code for the “all the same” buttons


		<button>button coded as button</button>
		<a>button coded as anchor</a>
		<input type="submit" value="button"></input>
		<a href="#Page03">Page 3</a>

Get the code for the “Try these” buttons


		<div data-role="controlgroup" data-type="horizontal" data-mini="true">
		<a data-ajax="false" href="buttons-icons.html" data-role="button">Icons</a>
		<a data-ajax="false" href="buttons-inline.html" data-role="button">In-line</a>
		<a data-ajax="false" href="buttons-grouped.html" data-role="button">Grouped</a>
		<a data-ajax="false" href="buttons-themes.html" data-role="button">Theming</a>
		</div>

Buttons

Anchor tags (links) <a data-role="button" href=… become buttons. Input-based buttons, links in toolbars and button elements are auto-enhanced, no data-role required. *Use it with <a> anyway ( <a data-role="button"> ) because sometimes it fails to create a button when mixed with other data- attributes.

All of these look the same:

<a href="#Page03">Page 3</a> <a>button coded as anchor</a>

Try these:

Icons In-line Grouped Theming

Version1.3.1:

Buttons Control Groups

Footer content

Back

Page 3 Links

Home