Jquery mobile2
Upcoming SlideShare
Loading in...5
×
 

Jquery mobile2

on

  • 244 views

 

Statistics

Views

Total Views
244
Views on SlideShare
244
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Jquery mobile2 Jquery mobile2 Presentation Transcript

  • 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" 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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