Jquery mobile2
0 likes437 views
The document discusses features of jQuery Mobile, including: 1. How to add buttons and customize their appearance by modifying data attributes like data-icon, data-theme, etc. 2. How to add a filter to a listview by including the data-filter attribute, automatically adding a search function. 3. Methods for linking between pages, including using different pages in separate files or containing all pages in a single file with divs for each page marked with a unique ID. 4. How to specify transitions when linking between pages using the data-transition attribute.
Jquery mobile2
- 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 button What 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 list Inbal 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 pages Index.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. html Inbal Geffen
- 9. Links version 2 - multipage 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
- 10. 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