jquery mobile2
TRANSCRIPT
jQuery Mobile2
Inbal Geffen
● 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 button
What can we change?● data-icon
(http://jquerymobile.com/test/docs/buttons/buttons-icons.html)
● data-iconpos ● data-mini● data-inline
data-role="button"
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 list
Inbal 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
<!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></html>
Inbal Geffen
data-rel="dialog"
Ex:
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>
<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.html
Transitions
Inbal Geffen
Index.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 - multipage
Index.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
Links version 2 - multipage