samedi 14 février 2015

How to make a "Favorites" page in jquery mobile


I'm new to coding in Jquery Mobile (I just stared a couple of months ago). I'm trying to figure out what would be the best way to create a "ADD TO FAVORITES" function for a Jquery mobile app.


I looked into HTML5 local storage however most of the examples I have found only work with only one value.


There is this one example that I found that adds multiple values but I'm not sure how to use it (like I said I'm fairly new to this)


adding and displaying favorite names list using jquery/ajax without database


For example Here's exactly what I am looking to do


1) I have several unique HTML pages (ex. location_1, location_2, ... location_n) and each page will have a "Add to Favorites" button.

2) If the person chooses to add the location as a favorite, the button on the page should be disabled and a link to the page should be saved in the "Favorites" page.

3) If a person removes the location from the "Favorites" page, the icon button should be enabled on the page that had its link deleted.



<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://ift.tt/1wORPGp">
<script src="http://ift.tt/1rKdStd"></script>
<script src="http://ift.tt/1toXtPU"></script>
</head>

<div data-role="page" id="Location1">

<div data-role="header" data-position="fixed">
<h1>Location 1</h1>
</div>

<div role="main" class="ui-content">
</div>

<div data-role="footer" data-position="fixed">
<h1>My page footer</h1>
</div>

</div>



<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://ift.tt/1wORPGp">
<script src="http://ift.tt/1rKdStd"></script>
<script src="http://ift.tt/1toXtPU"></script>
</head>

<div data-role="page" id="Favorites">

<div data-role="header" data-position="fixed">
<h1>Favorites</h1>
</div>

<div role="main" class="ui-content">
<ul id="favorite_links"></ul>
</div>

<div data-role="footer" data-position="fixed">
<h1>My page footer</h1>
</div>

</div>

</html>




Aucun commentaire:

Enregistrer un commentaire