Mobile-Web-App

Monday, February 13, 2012

jQuery: apply css style to HTML elements

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Mobile-Web-App: jQuery</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 
<style>
.italic{font-style: italic;}
.red{color: red;}
</style>

<script>
$(document).ready(
 function(){
  $(".desc").addClass("italic"); //. select by class
  $("#desc1").addClass("red"); //# select by id
 });
</script>

</head>
<body>

<p id="title">* jQuery is a new kind of JavaScript Library *</p>
<p id="desc1" class="desc">jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.</p>
<p id="desc2" class="desc">jQuery is designed to change the way that you write JavaScript.</p>

</body>
</html>

Saturday, February 11, 2012

jQuery: unload event

The unload event is sent to the window element when the user navigates away from the page; by clicking on a link to leave, or enter a new URL to leave, or any case...

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Mobile-Web-App: jQuery</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script>
$(window).unload(function ()
 { alert("Bye!");
 });
 </script>
</head>
<body>
 <a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a>

</body>
</html>

jQuery - Handle event of user clicking on a link

The jQuery html code trigger a alert whenever users click on any link in the page.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Mobile-Web-App: jQuery</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script>
   $(document).ready(function(){
     $("a").click(function(event){
       alert("Thanks!");
     });
   });
 </script>
</head>
<body>
 <a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a>

</body>
</html>

Friday, February 10, 2012

jQuery Mobile: listview with search box

To add search box in listview, simply add data-filter="true" attribute. data-filter-placeholder="Search..." specify the hints in the search box, it will disappear once user enter anything in the search box.

<!doctype html>
<html>
    
<head>
 <meta charset="utf-8"></meta>
 <meta name = "viewport" content = "width = device-width, height = device-height" />
 <title>Mobile-Web-App</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
 
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
 <h1>jQuery Mobile: listview</h1>
</div>
 
<div data-role="content">

<ul data-role="listview" data-inset="true"
 data-filter="true" data-filter-placeholder="Search...">
 <li>Monday
  <p>Eric</p>
 </li>
 <li>Tuesday
  <p>Erik</p>
 </li>
 <li>Wednesday
  <p>May</p>
 </li>
 <li>Thursday
  <p>Peter</p>
 </li>
 <li>Friday
  <p>Frankie</p>
 </li>
 <li data-role="list-divider">list-divider</li>
 <li>Saturday</li>
 <li>Sunday</li>
</ul>

</div>
 
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
 
</div>

</body>
</html>

jQuery Mobile: listview with number - ordered list

To implement listview with number, simple replace <ul> with <ol>.

Example:

<!doctype html>
<html>

<head>
 <meta charset="utf-8"></meta>
 <meta name = "viewport" content = "width = device-width, height = device-height" />
 <title>Mobile-Web-App</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
 <h1>jQuery Mobile: listview</h1>
</div>

<div data-role="content">

<ol data-role="listview" data-inset="true">
 <li>Monday</li>
 <li>Tuesday</li>
 <li>Wednesday</li>
 <li>Thursday</li>
 <li>Friday</li>
 <li data-role="list-divider">list-divider</li>
 <li>Saturday</li>
 <li>Sunday</li>
</ol>

</div>

<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>

</div>

</body>
</html>

Thursday, February 9, 2012

jQuery Mobile: listview with thumbnail and icon

Icon and Thumbnail used in this example:

original in 16x16:

original in 48x48:

<!doctype html>
<html>
    
<head>
 <meta charset="utf-8"></meta>
 <meta name = "viewport" content = "width = device-width, height = device-height" />
 <title>Mobile-Web-App</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
 
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
 <h1>jQuery Mobile: listview</h1>
</div>
 
<div data-role="content">

<ul data-role="listview" data-inset="true">
 <li data-role="list-divider">
  Q1
 </li>
 <li>January - thumbnail (48x48)
  <img src="http://goo.gl/ZTEx7"/> 
 </li>
 <li>February - thumbnail (16x16)
  <img src="http://goo.gl/N1Z44"/>
 </li>
 <li>March - icon (16x16)
  <img class="ui-li-icon" src="http://goo.gl/N1Z44"/>
 </li>
 <li data-role="list-divider">
  Q2 <p class="ui-li-aside">class="ui-li-aside"</p>
 </li>
 <li>April</li>
 <li>May</li>
 <li>June</li>
 <li data-role="list-divider">
  Q3
 </li>
 <li>July</li>
 <li>August</li>
 <li>September</li>
 <li data-role="list-divider">
  Q4
 </li>
 <li>October</li>
 <li>November</li>
 <li>December</li>
</ul>


</div>
 
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
 
</div>

</body>
</html>

jQuery Mobile: listview with dividers, data-role="list-divider"

<!doctype html>
<html>

<head>
 <meta charset="utf-8"></meta>
 <meta name = "viewport" content = "width = device-width, height = device-height" />
 <title>Mobile-Web-App</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
 <h1>jQuery Mobile: listview</h1>
</div>

<div data-role="content">

<ul data-role="listview" data-inset="true">
 <li data-role="list-divider">
  Q1
 </li>
 <li>January</li>
 <li>February</li>
 <li>March</li>
 <li data-role="list-divider">
  Q2 <p class="ui-li-aside">class="ui-li-aside"</p>
 </li>
 <li>April</li>
 <li>May</li>
 <li>June</li>
 <li data-role="list-divider">
  Q3
 </li>
 <li>July</li>
 <li>August</li>
 <li>September</li>
 <li data-role="list-divider">
  Q4
 </li>
 <li>October</li>
 <li>November</li>
 <li>December</li>
</ul>


</div>

<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>

</div>

</body>
</html>