Home » Archive

Articles in the jQuery Mobile Category

jQuery Mobile »

[2 Mar 2011 | No Comment | ]

Like an ordinary webpage the Mobile sites will have the following structure.
Mobile Jquery Page Elements:

Header
Content
Page Footer

We discussed the page structure in last section.
Mobile page structure in Mobile jQuery with an Example:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>

<title>My Mobile site</title>
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css” />

<script src=”http://code.jquery.com/jquery-1.4.3.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js”></script>

</head>

<body>
<div data-role=”page” data-theme=”b” id=”my-page”>
<div data-role=”header”>
<h1>Designscripting.com</h1>
</div>
<div data-role=”content”>

jQuery Mobile »

[1 Mar 2011 | No Comment | ]

Summary:
From this series we are going to learn what is jQuery Mobile framework and how to use it to build a mobile website with out writing a single line of JavaScript. Examples guide you how to develop a mobile website from scratch.
Introduction to jQuery Mobile:
jQuery Mobile, a user interface (UI) framework, lets you write a functional mobile web application without writing a single line of JavaScript code. The alpha release 3 of jQuery Mobile went live. As the name implies, the project is a user interface framework for mobile devices …

HTML5, Javascript, jQuery Mobile, Mobile Technology »

[10 Feb 2011 | No Comment | ]

In Jquery mobile When you load from one page to another there is back button in header, which seems odd if you have your own header and logo.
There are ways to remove the back button.
In JQUERY Mobile Alpha 3:
<div data-role=”header” data-backbtn=”false”>
<h1>Designscripting.com</h1>
</div>
In JQUERY Mobile Alpha 2:
<div data-role=”header” data-nobackbtn=”false”>
<h1>Designscripting.com</h1>
</div>
Once you remove the back button from Jquery mobile page, we can create one by:
<a href=’#’ class=’ui-btn-left ui-btn-back’ data-icon=’arrow-l’>Back</a>
Note :-
data-icon=’arrow-l’ :
Indicates left arrow, if we need next button some where on mobile webpage, just add data-icon=’arrow-r’
Next Article we see how to create …

HTML5, jQuery Mobile, Mobile Technology, Webmasters »

[10 Feb 2011 | No Comment | ]

Today I have created my First jQuery Mobile page, Creating a mobile page is very simple and easy task. I thought of sharing my experience here, to initiate the interest in you people to start developing the Mobile web pages.
Note: Open the Mobile web page below by Latest Browsers like Google Chrome, Safari, Opera or in ur Mobile Browser
Demo Page: Online
JQUERY Mobile 1.0 Alpha 3 has released. Still its in alpha version.
What is JQUERY Mobile ?
jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets
A unified user interface system across all …