Introduction:
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.
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.
|
<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
|
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 Email
|
|||
11 comments :
very good
sample site http://m.studentboxoffice.in/
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
script
alert('Hi');
/script
i want to disable browser back button and browser back button not relode
hello Boss..
thank u for information. in this case our post-back event r not working.
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??
@kailash,
This is not double URL, Actually you have used relative url in wrong way. Try to check url and it will work.
sir how we can use asp.net server side control for(like reg form, login form, grid view)with this type of website.
@Vikram Reddy
Hello Vikram,
Can you please provide sample code of your mobile web application ?
Thanks
thank u
nice.....
Note: Only a member of this blog may post a comment.