Jquery mobile2

  • 108 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
108
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
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