Category Archives: JQuery Mobile

JQuery Mobile – Lesson 05 – Navbar – Buttons and more

Posted on by

JQuery Mobile – Lesson 05 – Navbar – Buttons and more

Lesson 01 | Lesson 02 | Lesson 03 | Lesson 04 | Lesson 05

1. At this lesson we will continue from Lesson 03.

2. Here is the HTML Code from Lesson 03 with changes marked with RED color:

A navbar will appear with two buttons.

You can also download the following content as a file from HERE.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page" id="page1" data-theme="b">
       <div data-role="header">
       <h1>Page 1 header</h1>
          <div data-role="navbar">
             <ul>
                <li><a href="#page1">Home</a></li>
                <li><a href="#page2">Contact</a></li>
             </ul>
          </div>             
       </div> 
       <div data-role="main" class="ui-content">
       <h1>Page 1 Main</h1>
       <a href="#page2" data-transition="flow">page 2</a>      
       </div>

       <div data-role="footer">
       <h1>Page 1 footer</h1>
       </div>
    </div>

    <div data-role="page" id="page2" data-theme="b">
       <div data-role="header">
       <h1>Page 2 header</h1>
          <div data-role="navbar"> 
            <ul>
               <li><a href="#page1">Home</a></li>
               <li><a href="#page2">Contact</a></li>
            </ul>
           </div>
    </div>        
    <div data-role="main" class="ui-content">
        <h1>Page 2 Main</h1>        
           <a href="#page1" data-transition="flow">page 1</a>        
    </div>        
    <div data-role="footer">        
      <h1>Page 2 footer</h1>        
   </div>     
</div> 
</body> 
</html>

3. Now let’s add icons to the navbar by adding to the following line, we will see buttons with icon of grid:

<li><a href="#page1" data-icon="grid">Home</a></li>

Click on this link for list of icons
4. At this point we can remove the following lines under data-role=”main”:

<a href=”#page1″ data-transition=”flow”>page 1</a>

5. Now let’s add the following block code under data=role=”main”:

<div data-role="collapsible">
  <h1>Click here to view what is under this button</h1>
  <p>There is nothing here</p>
</div>

Here is an example of collapsible:

6. At this point add the code mark with RED color, you code suppose to be look like the following:

Copy & Paste the following and see what is the output:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Page title</title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head> 
<body> 
<div data-role="page" id="page1" data-theme="a"> 
<div data-role="header"> 
<h1>Page 1 header</h1> 
<div data-role="navbar"> 
<ul> 
<li><a href="#page1" data-icon="action">Home</a></li> 
<li><a href="#page2" data-icon="alert">Contact</a></li> 
</ul> 
</div> 
</div> 
<div data-role="main" class="ui-content"> 
<h1>Page 1 Main</h1> 
 <div data-role="collapsible">
 <h1>Click here to view what is under this button</h1>
 <p>There is nothing here</p>
 </div>
</div> 
<div data-role="footer"> 
<h1>Page 1 footer</h1> 
</div> 
</div> 
 <div data-role="page" id="page2" data-theme="a"> 
 <div data-role="header"> 
 <h1>Page 2 header</h1> 
 <div data-role="navbar"> 
 <ul> 
 <li><a href="#page1" data-icon="grid">Home</a></li> 
 <li><a href="#page2" data-icon="grid">Contact</a></li> 
 
 </ul> 
 </div> 
 </div> 
 <div data-role="main" class="ui-content"> 
 <h1>Page 2 Main</h1> 
 <form>
 <textarea></textarea>
 <input type="range" min="0" max="10">
 <input type="submit" value="submit button">
 </form>
 </div> 
 <div data-role="footer"> 
 <h1>Page 2 footer</h1> 
 </div> 
 </div> 
</body> 
</html>

JQuery Mobile – Lesson 04 – Themes

Posted on by

JQuery Mobile – Lesson 04 – Themes

Lesson 01 | Lesson 02 | Lesson 03 | Lesson 04 | Lesson 05

1. Here We will learn about JQuery Mobile Themes.

2. Browse to http://themeroller.jquerymobile.com/

3. Select a Theme or click on Add Swatch to create new theme, looks at the rights side of the following picture:

4. Drag colors from colors plate directly to the new created swatch, theme.

5. Once finished designing the theme then click of download button, then you will see the following picture:

6. At picture at #5 copy and paste the two lines that starts with <link rel=.

7. Download the ZIP file.

8. Open the downloaded ZIP file and copy the directory THEME from there and place it next to index.html file.

9. At index.html file replace the line that starts with  <link rel=, replace it with the two lines from #6.

10. Index.html should look like the following:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title> 
<!--
1. Remove The css/.
2. Change my-custom-theme to the name that you selected at http://themeroller.jquerymobile.com/
3. Add to page div data-theme with the swatch leffter that you selected.
-->
<link rel="stylesheet" href="css/themes/my-custom-theme.css" />
 <link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page" id="page1" data-theme="d">
       <div data-role="header">
       <h1>Page 1 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 1 Main</h1>
       <a href="#page2" data-transition="flow">page 2</a>      
       </div>

       <div data-role="footer">
       <h1>Page 1 footer</h1>
       </div>
    </div>

    <div data-role="page" id="page2" data-theme="d">
       <div data-role="header">
       <h1>Page 2 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 2 Main</h1>
       <a href="#page1" data-transition="flow">page 1</a>
       </div>

       <div data-role="footer">
       <h1>Page 2 footer</h1>
       </div>
    </div>
</body>
</html>

11. At the lines that starts with <link rel.., remove “css/”, as shwon at #10.

12. Change my-custom-theme.css to a theme name that you selected at :

http://themeroller.jquerymobile.com/

13. Add data-theme to the page div as shown at #10.

JQuery Mobile – Lesson 03 – Transitions

Posted on by

JQuery Mobile – Lesson 03 – Transitions

Lesson 01 | Lesson 02 | Lesson 03 | Lesson 04 | Lesson 05

1. In continuation to Lesson 02, here you will see a demo of transitions.

2. We will use the last HTML file that has been created at the last lesson with addition of the red tags below:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page" id="page1">
       <div data-role="header">
       <h1>Page 1 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 1 Main</h1>
       <a href="#page2" data-transition="flow">page 2</a>      
       </div>

       <div data-role="footer">
       <h1>Page 1 footer</h1>
       </div>
    </div>

    <div data-role="page" id="page2">
       <div data-role="header">
       <h1>Page 2 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 2 Main</h1>
       <a href="#page1" data-transition="flow">page 1</a>
       </div>

       <div data-role="footer">
       <h1>Page 2 footer</h1>
       </div>
    </div>
</body>
</html>

3. Replace the transition with the transitions below:

fade Default. Fades to the next page
flip Flips to the next page from back to front
flow Throws the current page away and comes in with the next page
pop Goes to the next page like a popup window
slide Slides to the next page from right to left
slidefade Slides from right to left and fades in the next page
slideup Slides to the next page from bottom to top
slidedown Slides to the next page from top to bottom
turn Turns to the next page
none No transition effect

JQuery Mobile – Lesson 02 – Switching between pages

Posted on by

JQuery Mobile – Lesson 02 – Switching between pages

Lesson 01 | Lesson 02 | Lesson 03 | Lesson 04 | Lesson 05

1. In continuation to Lesson 01, We will learn how to switch between div pages.

2. Let’s give each page an different ID:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page" id="page1">
       <div data-role="header">
       <h1>Page 1 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 1 Main</h1>
       </div>

       <div data-role="footer">
       <h1>Page 1 footer</h1>
       </div>
    </div>

    <div data-role="page" id="page2">
       <div data-role="header">
       <h1>Page 2 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 2 Main</h1>
       </div>

       <div data-role="footer">
       <h1>Page 2 footer</h1>
       </div>
    </div>
</body>
</html>

3. After adding the tags (marked red) below, you should browse from one page to the other:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page" id="page1">
       <div data-role="header">
       <h1>Page 1 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 1 Main</h1>
       <a href="#page2">page 2</a>      
       </div>

       <div data-role="footer">
       <h1>Page 1 footer</h1>
       </div>
    </div>

    <div data-role="page" id="page2">
       <div data-role="header">
       <h1>Page 2 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 2 Main</h1>
       <a href="#page1">page 1</a>
       </div>

       <div data-role="footer">
       <h1>Page 2 footer</h1>
       </div>
    </div>
</body>
</html>

JQuery Mobile – Lesson 01 – Basic page Template

Posted on by

JQuery Mobile – Lesson 01 – Basic page Template

Lesson 01 | Lesson 02 | Lesson 03 | Lesson 04 | Lesson 05

1. <Optional> Download JQuery Mobile from http://jquerymobile.com/download/.

2. Or just the use the following code between <head> tags of HTML document:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

3. Use the following HTML5 template:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>Page title</title>
 </head>
 <body>
</body>
</html>

4. Add data-role div for page, header, main and footer to every page at your application according to the following template:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page">
       <div data-role="header">
       </div>

       <div data-role="main" class="ui-content">
       </div>

       <div data-role="footer">
       </div>
    </div>
</body>
</html>

5. Try the following code which is the same as #4 but with two divs of page:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page">
       <div data-role="header">
       <h1>Page 1 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 1 Main</h1>
       </div>

       <div data-role="footer">
       <h1>Page 1 footer</h1>
       </div>
    </div>

    <div data-role="page">
       <div data-role="header">
       <h1>Page 2 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 2 Main</h1>
       </div>

       <div data-role="footer">
       <h1>Page 2 footer</h1>
       </div>
    </div>
</body>
</html>

6. As you can see, div of page 2 is not visible.