Rating:
* * * * 0
Building a jQtouch website – The Basics
Learn the basics to using jQtouch. More inside.
In this tutorial we will be covering the basics to building a jQtouch website.
Please ensure you have a basic understanding of javascript before reading this article as it can be confusing for novice programmers, we have an excellent series of javascript beginner tutorials found in the basics section of this website.
Please note that the framework animation will only work with Safari, you can build the website in Google Chrome or Firefox, but the animation will not work because it is only built for Apple browsers such as mobile Safari or desktop Safari.
This is mainly because the javascript framework takes advantage of the webkit which is used in all IOS devices and android devices. It works with Safari because the application used the same technologies as the IOS version
The framework will require the use of jQuery which can be downloaded at jQuery.com or add this in to a javascript import tab: “http://code.jquery.com/jquery-1.7.1.min.js”.
The Structure
The majority of the web is held together using hyperlinks, this links enable websites to exist by connecting multiple webpages together.
Unlike normal websites, jQtouch websites are linked together with anchor links, all the pages are on the same index file and are represented by a hash symbol such as #homepage instead of http://website.com/homepage.
This may sound a bit confusing so below is an example page to try and clear some of this up.
<html>
<head>
<meta charset="UTF-8" />
<title>jQT.Floaty</title>
<style type="text/css" media="screen">@import "../../jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "../../themes/jqt/theme.min.css";</style>
<script src="../../jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
<script src="../../extensions/jqt.autotitles.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({
icon: 'jqtouch.png',
addGlossToIcon: false,
startupScreen: 'jqt_startup.png',
statusBar: 'black'
});
</script>
</head>
<body>
<div id="page1">
<div>
<h1>Auto Titles</h1>
</div>
<ul>
<li><a href="#page2">Oranges</a></li>
<li><a href="#page2">Bananas</a></li>
<li><a href="#page2">Apples</a></li>
</ul>
</div>
<div id="page2">
<div>
<a href="#">back</a>
<h1>[Fruit Name]</h1>
</div>
<div>
The title for this page was automatically set from it’s referring link, no extra scripts required. Just include the extension and this happens.
</div>
</div>
</body>
</html>
If you understand Html you will see that the source code above is very simple.
There are four pages in the above source code. Notice the # symbols which represent the anchor links. jQtouch will recognize these as different pages as I have already mentioned above.
Don’t worry about the @import where the css is, this is an alternative way to import css into a document. Instead notice the file called jqt.autotitles.js, this tells us the jQtouch has its own set of plugins.
@import is used only in cascading style sheets to import external css files into the file.
If you go to the jQtouch website and download the package, all the plugins and example websites are included.
You may need to have some knowledge of basic programming, the above website will present the fruit name on the selected page.
Look at the javascript, eg.
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({
icon: 'jqtouch.png',
addGlossToIcon: false,
startupScreen: 'jqt_startup.png',
statusBar: 'black'
});
This is used to set the basics for the website, eg. icon, addGlossToIcon or startupScreen.
The above options are very basic to understand what they do.
So lets start building our website.
Step one
First create index.html.
Add in a js folder containing jQuery and jQtouch.
Also add the themes folder which can be found in the jQtouch folder which can be downloaded here.
Open up the index.html file and import all the files.
In the index.html add:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>My jQtouch website</title>
<style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "themes/jqt/theme.min.css";</style>
<script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({
icon: 'jqtouch.png',
addGlossToIcon: false,
startupScreen: 'jqt_startup.png',
statusBar: 'black'
});
</script>
</head>
<body>
This is the starting point for this website.
Step two
Next we will create the first page.
This page will link to three other pages.
Below is the source code and an image to give you an idea of what it looks like.
In the image you will notice that the elements are stretched across the screen, the iPhone resizes these elements.
And here is the source code.
<div id="page1">
<div class="toolbar">
<h1>This the my title</h1>
</div>
<ul class="edgetoedge">
<li><a href="#page2">Page one</a></li>
<li><a href="#page3">Page two</a></li>
<li><a href="#page2">Page three</a></li>
</ul>
</div>
So as you can see above, building a jQtouch website is very simple, the id=”page1″ represents page one, notice the class edgetoedge, this tells the script which type of navigation the developer wants to use.
Now that we have covered the hardest part of this website, I will add the rest of the source code.
The code is very straight forward and very easy to understand,
I will go through on page just to fill in some gaps or things you may not understand.
Below is page2.
<div id="page2">
<div class="toolbar">
<a href="#" class="back">back</a>
<h1>Hello this is page two</h1>
</div>
<div class="info">
This is some information
</div>
</div>
As you can see above the class toolbar represents the top bar, notice the link back with the class back, this will change into the iPhone standard back button.
Below is the entire website source code.
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>My jQtouch website</title>
<style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "themes/jqt/theme.min.css";</style>
<script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({
icon: 'jqtouch.png',
addGlossToIcon: false,
startupScreen: 'jqt_startup.png',
statusBar: 'black'
});
</script>
</head>
<body>
<div id="page1">
<div class="toolbar">
<h1>This the my title</h1>
</div>
<ul class="edgetoedge">
<li><a href="#page2">Page one</a></li>
<li><a href="#page3">Page two</a></li>
<li><a href="#page2">Page three</a></li>
</ul>
</div>
<div id="page2">
<div class="toolbar">
<a href="#" class="back">back</a>
<h1>This is page one</h1>
</div>
<div class="info">
Hello this is page one
</div>
</div>
<div id="page3">
<div class="toolbar">
<a href="#" class="back">back</a>
<h1>This is page two</h1>
</div>
<div class="info">
Hello this is page two
</div>
</div>
<div id="page4">
<div class="toolbar">
<a href="#" class="back">back</a>
<h1>This is page three</h1>
</div>
<div class="info">
Hello this is page three
</div>
</div>
</body>
</html>
That is all, the above tutorial should be enough to get you started.
If you have any recommendations or questions feel free to ask them below, thank you.
-
Vali
-
Tutorialmode Webmaster
