Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Create Simple jQuery Mobile Website Example

May 5, 2013
Introduction

Here I will explain how to create simple
jQuery mobile website with example.

Description:
  
In previous posts I explained
jQuery Allow only numbers in textbox, jQuery Accordion Menu Example, jQuery lightbox slideshow, jQuery Create Rounded Corners Textbox and many articles relating to JQuery, Asp.net. Now I will explain how to create simple JQuery mobile website with example.

To create simple jQuery mobile website we need to write the code like as show below


<html>
<head>
<title>Creating Simple jQuery Mobile Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-role="header" data-theme="a">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#page1" data-transition="fade" data-theme="" data-icon="home">
Home
</a>
</li>
<li>
<a href="#page1" data-transition="fade" data-theme="" data-icon="info">
About
</a>
</li>
<li>
<a href="#page1" data-transition="fade" data-theme="" data-icon="star">
Services
</a>
</li>
<li>
<a href="#page1" data-transition="fade" data-theme="" data-icon="check">
Contact
</a>
</li>
</ul>
</div>
</div>
<div data-role="content">
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-theme="c">
<a href="#page1" data-transition="slide">
Register Now
</a>
</li>
<li data-theme="c">
<a href="#page1" data-transition="slide">
Sign In
</a>
</li>
<li data-theme="c">
<a href="#page1" data-transition="slide">
Track Info
</a>
</li>
<li data-theme="c">
<a href="#page1" data-transition="slide">
Feedback
</a>
</li>
</ul>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h2> <a href="#" style="color:White; font-size:small">Aspdotnet-Suresh.com</a></h2>
</div>
</div>
</body>
</html>
If you observe in header section I added meta tag like as shown below
<meta name="viewport" content="width=device-width, initial-scale=1">
This meta viewport tag will sets the screen width to the pixel width of the devices and references to jQuery.

In header section I added some of script & css files we need to add those files if we want to implement jQuery mobile site.

In body section, we defined a div with a data-role property by using that property we can mention a page (data-role="page"), header (data-role="header") and content region (data-role="content") to create a basic page. These data- attributes are HTML5 attributes are used throughout jQuery Mobile to transform basic markup into an enhanced and styled widget.

Demo



If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

11 comments :

Unknown said...

very good

Vikram Reddy said...

sample site http://m.studentboxoffice.in/

Unknown said...

Hello Suresh,Thank you very much for your useful post.
i would request you that can you plz suggest how can i show table/grid data in place of above resister now/sign in etc button...
plz revert me

Thanks in advance

Regards,
Rajesh K

Anonymous said...

script
alert('Hi');
/script

Anonymous said...

i want to disable browser back button and browser back button not relode

masthan said...

hello Boss..
thank u for information. in this case our post-back event r not working.

Kailash said...

Hi Suresh, It's working. But when i use this from master page,url displays two times like this,

"http://localhost:2725/Sample_Mob_Interface/Web_Pages/Index.aspx#/Sample_Mob_Interface/Web_Pages/JS_Login.aspx"

Is there any alternative for this??

Anonymous said...

@kailash,

This is not double URL, Actually you have used relative url in wrong way. Try to check url and it will work.

venkatesh said...

sir how we can use asp.net server side control for(like reg form, login form, grid view)with this type of website.

Unknown said...

@Vikram Reddy
Hello Vikram,
Can you please provide sample code of your mobile web application ?
Thanks

Unknown said...

thank u

nice.....

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.