Your SlideShare is downloading. ×
0
Jquery mobile2
Jquery mobile2
Jquery mobile2
Jquery mobile2
Jquery mobile2
Jquery mobile2
Jquery mobile2
Jquery mobile2
Jquery mobile2
Jquery mobile2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Jquery mobile2

127

Published on

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

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. jQuery Mobile2 Inbal Geffen
  • 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. 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. 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. 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. 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. 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. 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. 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. 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

×