Dutchomepage header logo

Intro

Welcome at Dutchhompage

This was the smaller version of homepage website. Since my website became more or less responsive (responding on different sizes of devices), there was no need to maintain this jquery version.

You'll find my website at http://www.dutchhomepage.nl, about photography, website models and tips about expositions for free times!

Menu Top

Dutchomepage header logo

Website

Build a mobile website with jquery

small man

Bored in the train or on the backseat? Stunning and with some HTML, CSS and jQuery knowledge: The mobile website developped by jQuery. All content in 1 file, the CSS and special jQuery in another file. Et voila!

In a very plain example I show you how to start. Let's have a look at the the menu:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>[Website name] mobile</title>

<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
</head>

<body>
<div data-role="page" id="menu_example">
<div data-role="header" data-position="fixed">
<h2>Your header</h2>
</div>

<div data-role="content" data-theme="c">
<ul data-role="listview" data-inset="true" data-filter="false" data-transition="slidefade" data-theme="c">
<li><a href="#no1">Fist item</a></li>
<li><a href="#no2">Second item</a></li>
<li><a href="#no3">Third item</a></li>
</ul>
</div><!-- /content -->

<div data-role="footer" data-id="foo1" data-position="fixed">
<p>Your footer text here</p>
</div><!-- /footer -->

</div><!-- /menu -->

</body>
</html>

This will result in something like this:

Your header

Your footer here

What should be in this? The jquery and jquery mobile javascript file and the mobile jquery file CSS. Don't forget the metatag for mobile devices.

You could set the data-filter on true, then you can search in a long menu. I choosed standard data theme c for the example (standard a until e), but you can also make your own theme at jquery mobile.

Next are the 3 pages in the same html file. The 3 pages are identical:

<!-- Start of: #First page-->
<div data-role="page" id="no1" data-theme="c">
<div data-role="header" data-position="fixed">
<h2>Your header</h2>
</div>

<div data-role="content" data-theme="c">
<h3>Subheader page 1</h3>
<p>Some content</p>
<a href="#webs" data-rel="back" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-l" data-iconpos="left">Menu</a>
</div><!-- /content -->

<div data-role="footer" data-id="foo1" data-position="fixed">
<p>Your footer text here</p>
</div><!-- /footer -->

</div><!-- /first page -->

<!-- Start of: #Second page-->
<div data-role="page" id="no2" data-theme="c">
<div data-role="header" data-position="fixed">
<h2>Your header</h2>
</div>

<div data-role="content" data-theme="c">
<h3>Subheader page 2</h3>
<p>Some content</p>
<a href="#webs" data-rel="back" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-l" data-iconpos="left">Menu</a>
</div><!-- /content -->

<div data-role="footer" data-id="foo1" data-position="fixed">
<p>Your footer text here</p>
</div><!-- /footer -->

</div><!-- /second page -->

<!-- Start of: #Third page-->
<div data-role="page" id="no3" data-theme="c">
<div data-role="header" data-position="fixed">
<h2>Your header</h2>
</div>

<div data-role="content" data-theme="c">
<h3>Subheader page 3</h3>
<p>Some content</p>
<a href="#webs" data-rel="back" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-l" data-iconpos="left">Menu</a>
</div><!-- /content -->

<div data-role="footer" data-id="foo1" data-position="fixed">
<p>Your footer text here</p>
</div><!-- /footer -->

</div><!-- /third page -->

It's not too difficult to make these pages. Always close a page correctly with the end div! Click on the buttons in the example above to see the result.

Want a model like this? Advanced settings? Look at jQuery mobile website

You also might have a look at the Source how simple this is by rihgt click and choose source. jQuery mobile rocks!

Download jQuery mobile Watch plain example Menu Top

Your header

Subheader page 1

Some content

Menu

Your footer text here

Your header

Subheader page 2

Some content

Menu

Your footer text here

Your header

Subheader page 3

Some content

Menu

Your footer text here

Dutchomepage header logo

Disclaimer

Usage criterion for this website

Common usage

Access to and usage of the website of Dutchhomepage at http://home.casema.nl/ jwnieuwerth (after this "Website") is submissive to written below conditions. Usage of the website means the full acceptance of and consent with these conditions.

Purpose

All data and information on the Website will be exclusively only for informative purposes available to the user. Although there has been taken extremely care to construction and content of the Website, the Website can't guarantee the nature and content of the information are accurate.

Legal responsibility

The Website has not any legal responsibility for possible dammage, direct nor indirect, which the visitor or user of the Website and/or third parties suffer as consequence of the usage of information, material and/or services of the Website and/or as consequence for the usage of information, material and/or services of websites connected to the Website.

Intellectual property right

The Website is property of the webmaster of Dutchhomepage at http//members.casema.nl/ jwnieuwerth. All copyright and other rights of intellectual property right on the Website's content, including text, design, pictures, logos and sounds belong to the administrator of the Website. Without preliminary written permission of the Website the content of the Website is not allowed to duplicate, to modify and/or be published, in what appearance or on which demeanour available or been stored in an authorized data file, with exception of pure private usage on your own private computer or photo album and with exception by the storage space available by Casema (Ziggo, the Website webspace provider). Linkage of pictures from my website is only allowed with direct links to the storage space from my website at Ziggo and with the announcement: Source picture: http://members.casema.nl/ jwnieuwerth.

Linkage to websites of third parties

The Website takes no responsibility to the content of websites which are linkes to the Website, nor for information, software, products and services which are on or available at these websites. A link to a website is only mentioned for the convenience of the user. The webmaster of the Website doesn't accept with this any obligation or responsibility. The offer of automatic linkages to the Website of Duthhomepage are in first pinciple allowed. Framing is forbidden with exception of written permission of the webmaster of Dutchhomepage.

Applicable law

These terms, also disputes or debtors which come from or have connection to the terms, are in control by Dutch law.

Adjustments to above mentioned terms

The webmaster of the Website maintains himself the right the terms in which this website has been offered to change without further notice. These adjustments will apply direct after sending of them on the Website.

The above mentioned is an attempt to translate the original Dutch disclaimer, all above mentioned terms and conditions are connected to the Dutch original terms and conditions, which can be found at http://members.casema.nl/ jwnieuwerth/ disclaimer.htm

© Dutchhomepage 2012 - Valid HTML 5 W3C

End text disclaimer

Menu Top

Settings

Transparency:
Off On
Background menu:
Off On
Reverse text/background:
Black White
Direct default Screen

Explanation

Transparency

The menu, the footer and the header show transparency. Put them on of off with this button.

(Putting off not possible in photo view mode)

Background (image) menu

The menu at home has a background image. You can switch this on and off.

Reverse text/background

Final adjustment, when wished you can make black text on white background (black on white) or white text on black background (white on black).

(Yellow) direct default

This button takes you to the mobile home and sets the items to default.

jQuery

For web developpers: Look in the source of the HTML and find the mob.js file in the root of my website (knowledge of some basic Javascirpt needed).

Screen Top

End settings

JQM Calculator