Your SlideShare is downloading. ×
0
jQuery Mobile2   Inbal Geffen
data-role="button"●      Add a button to anywhere in our page<a href="#" data-role="button" data-icon="star" data-theme="a...
data-filter="true"<div data-role="content">             <ul data-role="listview" data-inset="true" data-filter="true">    ...
jQuery + jQuery mobile<div data-role="page">        <div data-role="header" id="header">              <h1>What is your nam...
jQuery + jQuery mobile<script>       $(document).ready(function() {     $("#freetext").focusout(function() {        var st...
data-rel="dialog"<!DOCTYPE html><html>  <head>  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery....
Links version 1 - different pagesIndex.html<!--Each page will start with a data-role="page"--><div data-role="page" id="ho...
Transitions   <li><a href="page2.html" data-transition="slidedown"><h3>Page 2</h3></a></li>   <li><a href="page3.html" dat...
Links version 2 - multipageIndex.html● We create all our "pages" in this single file● Each page will start with a data-rol...
Links version 2 - multipageIndex.html<div id="one" data-role="page">    <div class="choice_list">    <h1> Multi-page ONE! ...
Upcoming SlideShare
Loading in...5
×

Jquery mobile2

162

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
162
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Jquery mobile2"

  1. 1. jQuery Mobile2 Inbal Geffen
  2. 2. data-role="button"● Add a button to anywhere in our page<a href="#" data-role="button" data-icon="star" data-theme="a" id="button1">Button</a>● We can add this button to the header to create a header buttonWhat can we change? ● data-icon(http://jquerymobile.com/test/docs/buttons/buttons-icons.html)● data-iconpos● data-mini● data-inline Inbal Geffen
  3. 3. data-filter="true"<div data-role="content"> <ul data-role="listview" data-inset="true" data-filter="true"> <li><a href="#">Moran</a></li> <li><a href="#">Bella</a></li> <li><a href="#">Gila</a></li> <li><a href="#">Ronit</a></li> <li><a href="#">Michal</a></li> </ul></div>Automatically adds a search view to our listInbal Geffen
  4. 4. jQuery + jQuery mobile<div data-role="page"> <div data-role="header" id="header"> <h1>What is your name?</h1> <a href="#" data-role="button" data-icon="delete" data-theme="a" id="clear">Clear</a> </div><!-- /header --> <div data-role="content"> <ul data-role="listview" data-inset="true" data-filter="true"> <li><a href="#">Moran</a></li> <li><a href="#">Bella</a></li> <li><a href="#">Gila</a></li> <li><a href="#">Ronit</a></li> <li><a href="#">Michal</a></li> </ul> </div><!-- /content --> <div> <label for="basic" >Different Name:</label> <input type="text" name="name" id="freetext" value="" data-mini="true" /> </div></div><!-- /page -->Inbal Geffen
  5. 5. jQuery + jQuery mobile<script> $(document).ready(function() { $("#freetext").focusout(function() { var str = hello +$("#freetext").val(); $("#header h1").text(str); }); $("li a").click(function() { var str = hello +$(this).text(); $("#header h1").text(str); }); $("#header a").click(function() { $("#header h1").text(What is your name?); }); }); </script>Inbal Geffen
  6. 6. data-rel="dialog"<!DOCTYPE html><html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script></head><body><div data-role="page"> <div data-role="header"> <h1>Sample</h1> </div> <div data-role="content"> <p></p> <p><a href="dialog.html" data-rel="dialog" data-role="button">Is this a question?</a></p> </div></div><div data-role="page" data-url="dialog.html"> <div data-role="header"> <h1>Dialog</h1> </div> <div data-role="content"> <p>Is this an answer?</p> </div></div></body> Ex:</html>Inbal Geffen
  7. 7. Links version 1 - different pagesIndex.html<!--Each page will start with a data-role="page"--><div data-role="page" id="home" data-theme="c"><!--All the content in the page will be in the div with data-role="content"--> <div data-role="content"> <div class="choice_list"> <h1> This is page1 </h1> <ul data-role="listview" data-inset="true" > <li><a href="page2.html"><h3>Page 2</h3></a></li> <li><a href="page3.html"><h3>Page 3</h3></a></li> <li><a href="page4.html"><h3>Page 4</h3></a></li> </ul> </div> </div></div> Inbal Geffen
  8. 8. Transitions <li><a href="page2.html" data-transition="slidedown"><h3>Page 2</h3></a></li> <li><a href="page3.html" data-transition="slide"><h3>Page 3</h3></a></li> <li><a href="page4.html" data-transition="fade"><h3>Page 4</h3></a></li> More transitions: http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-transitions. htmlInbal Geffen
  9. 9. Links version 2 - multipageIndex.html● We create all our "pages" in this single file● Each page will start with a data-role="page" - Like before● Single page will include several divs with data-role "page"● So if we want 3 pages we will have 3 divs like this one, each with different id!!<div data-role="page" id="one" data-theme="c">.....</div><div data-role="page" id="two" data-theme="c">.....</div><div data-role="page" id="three" data-theme="c">.....</div> Inbal Geffen
  10. 10. Links version 2 - multipageIndex.html<div id="one" data-role="page"> <div class="choice_list"> <h1> Multi-page ONE! </h1> <ul data-role="listview" data-inset="true" > <li><a href="#two" data-transition="slide">Two</a></li> <li><a href="#three" data-transition="slide">Three</a></li> </ul> </div></div>● We use the id we created as a page● The first div with data-role="page" will be the first page in our website Inbal Geffen
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×