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.
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
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