HTML5 APP Development
Lesson 7 - Creating your Filter List
Outcomes:
-
You will create a filter list within your app,
-
You will also create a custom Java Script file,
Starter - Countries List
-
Click here and download the text file. Save it to your folder for now. You will need it this lesson.
Task 1 - Creating the List of Countries
Within the location CONTENT div, you will need to add the following under a header.
<ul data-role="listview" data-filter="true" data-inset="true" class="countries">
Listview = this creates a list of buttons,
Data-filter="true" = this creates a fiter box at the top of the list.,
data-insert="true" = this allows you to input text and it searches the list for it.
All of this calls upon the jQuery framework in the background to work. Finally, the class is for use to call upon later.
Using the text file you just download, copy and paste all the html code under the above line. Don't forget to close the list </ul>
Now run this in the browser to see the list view working.
Videos
Task 2 - Creating a Custom Javascript file
-
In Dreamweaver, Click on FILE > NEW. Click on a JavaScript file.
-
Now save this is as "custom.js". Save it in your project folder.
-
This javascript document will make all the buttons links within the list still pop up like the dialog, like the homepage.
$(document).ready(function(){
$('.countries li a').attr('data-rel','dialog');
});
-
Now link this js to the index.html at the top under the other two js <script> tags