index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
		<head>
            <meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
            <meta name="apple-mobile-web-app-capable" content="yes" />
			<meta name="apple-mobile-web-app-status-bar-style" 	content="black"> <!-- maakt status bar zwart voor iOS devices -->
            <title>Todo App Stefan - JQM</title>
			<link rel="shortcut icon" href="src/custom/icons/todoIcon300x300.png">
            <link rel="apple-touch-icon" href="src/custom/icons/todoIcon300x300.png" sizes="57x57">
            <link rel="apple-touch-icon" href="src/custom/icons/todoIcon300x300.png" sizes="114x114">
			<link rel="stylesheet" type="text/css" href="src/default/css/jquery.mobile-1.2.0.min.css"/> <!-- jQuery mobile -->
			<link rel="stylesheet" type="text/css" href="src/custom/css/OrdinaStyle3-v1.2.0.min.css"/>  <!-- Custom theme (data-theme="f")-->
			<link rel="stylesheet" type="text/css" href="src/custom/css/customCssSettings.css"/> <!-- custom css settings -->
			<link rel="stylesheet" type="text/css" href="src/default/css/mobiscroll-2.0.3.custom.min.css"/>  <!-- mobiscroll datepicker -->
			<link rel="stylesheet" type="text/css" href="src/default/css/jqm-icon-pack-2.1.2-fa.css" /> <!-- custom icons -->
			<script type="text/javascript" src="src/default/js/jquery-1.8.2.min.js"></script> <!-- jQuery -->
			<script type="text/javascript" src="src/custom/js/initiateDatabase.js"></script> <!-- initiate HTML5 Web SQL local storage -->
            <script src="src/custom/js/pageTransitionConfig.js" type="text/javascript"></script> <!-- bepaald page transitions afhankelijk van OS -->
			<script type="text/javascript" src="src/default/js/jquery.mobile-1.2.0.min.js"></script> <!-- jQuery mobile -->
			<script type="text/javascript" src="src/custom/js/jquery.validate.js"></script>  <!-- validate jQuery plug-in -->
			<script type="text/javascript" src="src/default/js/mobiscroll.core-2.0.3.js"></script> <!-- mobiscroll datepicker-->
			<script type="text/javascript" src="src/custom/js/mobiscroll.core-2.0.3-de.js"></script> <!-- mobiscroll datepicker-->
			<script type="text/javascript" src="src/default/js/mobiscroll.datetime-2.0.3.js"></script> <!-- mobiscroll datepicker-->
			<script type="text/javascript" src="src/custom/js/mobiscroll.datetime-2.0.3-de.js"></script> <!-- mobiscroll datepicker-->
			<script type="text/javascript" src="src/default/js/mobiscroll.jqm-2.0.2.js"></script> <!-- mobiscroll datepicker-->
			<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script><!-- jQuery UI Map plug-in -->
			<script type="text/javascript" src="src/default/js/jquery.ui.map.min.js"></script> <!-- jQuery UI Map plug-in -->
			<script type="text/javascript" src="src/default/js/jquery.ui.map.services.min.js"></script> <!-- jQuery UI Map plug-in -->
		</head>
	<body>
	
	<!------------------------------------------------------------------------------------------------------------------------------------------------->
	<!--																HOME TAB																	 -->
	<!------------------------------------------------------------------------------------------------------------------------------------------------->
	<!-- Home pagina -->
		<div data-role="page" id="pageHome" data-theme="f">
			<div data-role="header" data-position="fixed" data-theme="f">
				<h1>Home</h1>
				<a href="#pageOver" data-icon="info" class="ui-btn-left">Info</a>
				<a href="#pageReset" data-icon="gear" class="ui-btn-right">Reset</a>
			</div>
			<div data-role="content">		
				<p>
					Dit is een mobiele app om een todo (taken) lijst bij te houden voor meerdere personen.
				</p>
			</div>
			<div data-role="footer" data-position="fixed" data-theme="f">
				<div data-role="navbar">
					<ul>
						<li><a href="#pageHome" data-icon="fahome" class="ui-btn-active ui-state-persist" class="homeWeergeven">Home</a>
						<li><a href="#" class="persoonlijstWeergeven" data-icon="user" onClick="showPersonen()">Personen</a>
						<li><a href="#pageTodoHoofd" class="todolijstWeergeven" data-icon="list-alt">Todo's</a>
					</ul>
				</div>
			</div>
		</div>
		
	<!-- Over pagina -->
		<div data-role="page" id="pageOver" data-theme="f" data-add-back-btn="true" data-back-btn-text="Terug">
			<div data-role="header" data-position="fixed" data-theme="f">
				<h1>Over app</h1>
			</div>
			<div data-role="content">
				<div data-role="collapsible-set">
					<div data-role="collapsible" data-collapsed="true" >
						<h2>Wat is dit?</h2>
							<ul>Een todo lijst app ontwikkeld met jQuery Mobile, jQuery en HTML5 Web SQL Database.</ul>
					</div>
					<div data-role="collapsible" data-collapsed="true">
						<h2>Waarom?</h2>
						<ul>
							Om uit te zoeken wat de beste Javascript libraries/frameworks zijn voor mobile software development.
						</ul>
					</div>
					<div data-role="collapsible" data-collapsed="true">
						<h2>Hoe werkt de app?</h2>
							<ul>
								Allereerst dient er een persoon te worden toegevoegd. Voor deze persoon kunnen vervolgens todo's aangemaakt worden.
								Het is mogelijk om meerdere personen toe te voegen. Elke persoon kan meerdere todo's op zijn naam hebben staan.
								Er kunnen geen todo's toegevoegd worden als er nog geen persoon is aangemaakt.
							</ul>
					</div>
					<div data-role="collapsible" data-collapsed="true">
						<h2>Door wie is de app ontwikkeld?</h2>
							<ul>
								De app is ontwikkeld door Stefan Collette en fungeert als proof of concept applicatie voor een onderzoek.
							</ul>
					</div>
				</div>
			</div>
			<div data-role="footer" data-position="fixed" data-theme="f">
				<div data-role="navbar">
					<ul>
						<li><a href="#pageHome" class="homeWeergeven" data-icon="fahome">Home</a>
						<li><a href="#" class="persoonlijstWeergeven" data-icon="user" onClick="showPersonen()">Personen</a>
						<li><a href="#pageTodoHoofd" class="todolijstWeergeven" data-icon="list-alt">Todo's</a>
					</ul>
				</div>
			</div>
		</div>

	<!-- Reset pagina -->
		<div data-role="page" id="pageReset" data-theme="f" data-add-back-btn="true" data-back-btn-text="Terug">
			<div data-role="header" data-position="fixed" data-theme="f">
				<h1>Reset data</h1>
			</div>
			<div data-role="content">
				<p> 
					Hier kunt u de app resetten naar de default instellingen.
				</p>
				<p> 
					<b>Let op:</b> alle data zal worden verwijderd.
				</p>
				<p>
					<a href=# data-role="button" id="buttonResetData"> Reset app </a>	
				</p>
			</div>
			<div data-role="footer" data-position="fixed" data-theme="f">
				<div data-role="navbar">
					<ul>
						<li><a href="#pageHome" class="homeWeergeven" data-icon="fahome">Home</a>
						<li><a href="#" class="persoonlijstWeergeven" data-icon="user" onClick="showPersonen()">Personen</a>
						<li><a href="#pageTodoHoofd" class="todolijstWeergeven" data-icon="list-alt">Todo's</a>
					</ul>
				</div>
			</div>
		</div>

	<!------------------------------------------------------------------------------------------------------------------------------------------------->
	<!--																PERSOON TAB																 	 -->
	<!------------------------------------------------------------------------------------------------------------------------------------------------->		
	<!-- Persoon toevoeg pagina -->
		<div data-role="page" id="pagePersoonToevoeg" data-theme="f" data-add-back-btn="true" data-back-btn-text="Terug">
			<div data-role="header" data-position="fixed" data-theme="f">
				<h1>Nieuw persoon</h1>
			</div>
			<p>
			<div data-role="content">
				<p>
					<b>Voeg hier een nieuwe persoon toe</b>
				</p>
				<form id="formPersoon" method="get" action="">
				<fieldset>
					<p>
					<div data-role="fieldcontainer">
						<label for="voorNaam" ><em>*</em>Voornaam:</label>
						<input type="text" id="voorNaam" name="voorNaam" "required placeholder="Vul hier de voornaam in.." minlength="2" maxlength="50" class="required"/>
					</div>
					<p>
					<div data-role="fieldcontainer">
						<label for="achterNaam" >
						<em>*</em>Achternaam:</label>
						<input type="text" id="achterNaam" "required placeholder="Vul hier de achternaam in.." minlength="2" value="" maxlength="50" class="required"/>
					</div>
					<p>
					<div data-role="fieldcontainer">
						<legend><em>*</em>Geslacht:</legend>
						<div data-role="controlgroup" data-type="horizontal">
						<input type="radio" name="geslacht" id="geslacht-1" value="Man" checked="checked" />
						<label for="geslacht-1">Man</label>
						<input type="radio" name="geslacht" id="geslacht-2" value="Vrouw"  />
						<label for="geslacht-2">Vrouw</label>
						</div>
					</div>
					<p>
					<div data-role="fieldcontainer">
						<label for="geboorteDatum"><em>*</em>Geboortedatum: </label>
						<input id="geboorteDatum" name="geboorteDatum" "required placeholder="Vul hier de geboortedatum in.." class="required" />
					</div>
					<p>				
					<div data-role="fieldcontainer">
						<label for="email"><em>*</em>E-mailadres:</label>
						<input type="email" id="email" name="email" "required placeholder="Vul hier het e-mailadres in.." maxlength="100" class="email required"/>
					</div>
					<p>
					<div data-role="fieldcontainer">
						<label for="telefoonNummer"><em>  </em>Telefoonnummer:</label>
						<input type="tel" id="telefoonNummer" name="telefoonNummer" "required placeholder="Vul hier het telefoonnummer in.." maxlength="20"/>
					</div>
					<div>
					    <button class="buttonValidatePersoon" type="submit" value="Submit" data-icon="check" data-iconpos="right">Persoon toevoegen</button>
						<a id="buttonVoegPersoonToe" href=#></a>
					</div>
				</fieldset>					
				</form>
			</div>
			<div data-role="footer" data-position="fixed" data-theme="f">
				<div data-role="navbar">
					<ul>
						<li><a href="#pageHome" class="homeWeergeven" data-icon="fahome">Home</a>
						<li><a href="#" class="persoonlijstWeergeven" data-icon="user" onClick="showPersonen()">Personen</a>
						<li><a href="#pageTodoHoofd" class="todolijstWeergeven" data-icon="list-alt">Todo's</a>
					</ul>
				</div>
			</div>
		</div>	
		
	<!-- Persoon lijst pagina -->
		<div data-role="page" id="pagePersoonLijst" data-theme="f">
			<div data-role="header" data-position="fixed" data-theme="f">
				<h1>Personen</h1>
				<a href="#pagePersoonToevoeg" data-icon="plus" data-iconpos="right" class="ui-btn-right">Nieuw</a>
			</div>
			<div data-role="content" data-filter="true" data-filter-placeholder="Zoek persoon...">
			</div>
			<div data-role="footer" data-position="fixed" data-theme="f">
				<div data-role="navbar">
					<ul>
						<li><a href="#pageHome" class="homeWeergeven" data-icon="fahome" >Home</a>
						<li><a href="#" class="persoonlijstWeergeven" data-icon="user"  onClick="showPersonen()">Personen</a>
						<li><a href="#pageTodoHoofd" class="todolijstWeergeven" data-icon="list-alt">Todo's</a>
					</ul>
				</div>
			</div>
		</div>
		
	<!-- Persoon detail pagina -->
		<div data-role="page" id="pagePersoonDetails" data-theme="f" data-add-back-btn="true" data-back-btn-text="Terug">
			<div data-role="header" data-position="fixed" data-theme="f">
				<h1>Persoon details</h1>
			</div>
			<div data-role="content">
			</div>
			<div data-role="footer" data-position="fixed" data-theme="f">
				<div data-role="navbar">
					<ul>
						<li><a href="#pageHome" class="homeWeergeven" data-icon="fahome">Home</a>
						<li><a href="#" class="persoonlijstWeergeven" data-icon="user" onClick="showPersonen()">Personen</a>
						<li><a href="#pageTodoHoofd" class="todolijstWeergeven" data-icon="list-alt">Todo's</a>
					</ul>
				</div>
			</div>
		</div>

	<!------------------------------------------------------------------------------------------------------------------------------------------------->
	<!--																TODO TAB																	 -->
	<!------------------------------------------------------------------------------------------------------------------------------------------------->
	<!-- Todo Hoofd pagina -->
		<div data-role="page" id="pageTodoHoofd" data-theme="f">
			<div data-role="header" data-position="fixed" data-theme="f">
				<h1>Todo's</h1>
				<a href="#pageTodoToevoeg" data-icon="plus" data-iconpos="right" class="ui-btn-right">Nieuw</a>
			</div>
			<div data-role="content">
					<a href="#" class= "todoHoofdButton" data-icon="list" data-iconpos="right" data-role="button" onClick="showTodos('Onderhanden', 'Alle')">Onderhanden todo's</a>
					<a href="#" class= "todoHoofdButton" data-icon="list" data-iconpos="right" data-role="button" onClick="showTodos('Afgehandelde', 'Alle')">Afgehandelde todo's</a>
					<a href="#" class= "todoHoofdButton" data-icon="list" data-iconpos="right" data-role="button" onClick="showTodos('Alle', 'Alle')">Alle todo's</a>
			</div>
			<div data-role="footer" data-position="fixed" data-theme="f">
				<div data-role="navbar">
					<ul>
						<li><a href="#pageHome" class="homeWeergeven" data-icon="fahome" >Home</a>
						<li><a href="#" class="persoonlijstWeergeven" data-icon="user"  onClick="showPersonen()">Personen</a>
						<li><a href="#pageTodoHoofd" class="todolijstWeergeven" data-icon="list-alt" >Todo's</a>
					</ul>
				</div>
			</div>
		</div>
		
	<!-- Todo toevoeg pagina -->
		<div data-role="page" id="pageTodoToevoeg" data-theme="f" data-add-back-btn="true" data-back-btn-text="Terug">
			<div data-role="header" data-position="fixed" data-theme="f">
				<h1>Nieuwe todo</h1>
			</div>
			<div data-role="content">
				<p>
					<b>Voeg hier een nieuwe todo toe</b>
				</p>
				<form id="formTodo" method="get" action="">
				<fieldset>
					<p>
					<div data-role="fieldcontainer">
						<label for="selectPersoon" class="select"><em>*</em>Persoon voor wie de todo is:</label>
						<select name="selectPersoon" id="selectPersoon" class="required">
						</select>
					</div>
					<p>
					<div data-role="fieldcontainer">
						<label for="korteOmschrijving"><em>*</em>Korte omschrijving:</label>
						<input type="text" id="korteOmschrijving" name="korteOmschrijving" "required placeholder="Vul hier een korte omschrijving in.." minlength="2" maxlength="100" class="required"/>
					</div>
					<p>
					<div data-role="fieldcontainer">
						<label for="langeOmschrijving">Lange omschrijving:</label>
						<textarea name="langeOmschrijving" id="langeOmschrijving" "required placeholder="Vul hier een lange omschrijving in.." maxlength="2000"></textarea>
					</div>
					<p>
					<div data-role="fieldcontainer">
						<label for="datumOplevering"><em>*</em>Datum oplevering: </label>
						<input id="datumOplevering" name="datumOplevering" "required placeholder="Vul hier de oplever datum in.." class="required" />
					</div>
					<p>
					<div data-role="fieldcontainer">
						<label for="urgentie"><em>*</em>Urgentie: </label>
						<input type="range" id="urgentie" name="urgentie" min="1" max="3" value="2" class="required"/>
					</div>
					<p>
					<div data-role="fieldcontainer">
						<label for="plaats"><em>*</em>Plaats oplevering:</label>
						<input type="text" id="plaats" name="plaats" "required placeholder="Plaats oplevering.." maxlength="100" class="required"/>
					</div>
					<p>
					<div data-role="fieldcontainer">
					<label for="type"><em>*</em>Prive of zakelijke todo?</label>
						<select id="type" name="type" data-role="slider">
						<option value="Prive">Prive</option>
						<option value="Zakelijk">Zakelijk</option>
						</select>
					</div>
					<div>
						<button class="buttonValidateTodo" type="submit" value="Submit" data-icon="check" data-iconpos="right">Todo toevoegen</button>
						<a id="buttonVoegTodoToe" href=#></a>
					</div>
				</fieldset>					
				</form>
			</div>
			<div data-role="footer" data-position="fixed" data-theme="f">
				<div data-role="navbar">
					<ul>
						<li><a href="#pageHome" class="homeWeergeven" data-icon="fahome">Home</a>
						<li><a href="#" class="persoonlijstWeergeven" data-icon="user" onClick="showPersonen()">Personen</a>
						<li><a href="#pageTodoHoofd" class="todolijstWeergeven" data-icon="list-alt">Todo's</a>
					</ul>
				</div>
			</div>
		</div>
		
	<!-- Todo lijst pagina -->
		<div data-role="page" id="pageTodoLijst" data-theme="f" data-add-back-btn="true" data-back-btn-text="Terug">
			<div data-role="header" data-position="fixed" data-theme="f">
				<h1 id="pageTodoLijstH1"></h1>
				<a href="#pageTodoToevoeg" data-icon="plus" data-iconpos="right" class="ui-btn-right">Nieuw</a>
				<div id="navgroup" class="pageTodoLijstNavgroup">
					<div data-role="controlgroup" data-type="horizontal">
					<a href="#" id=buttonAllTodosWeergeven data-role="button">Alle</a>
					<a href="#" id=buttonPriveTodosWeergeven data-role="button">Prive</a>
					<a href="#" id=buttonZakelijkeTodosWeergeven data-role="button">Zakelijk</a>
					</div>
				</div>
			</div>
			<div data-role="content">
			</div>
			<div data-role="footer" data-position="fixed" data-theme="f">
				<div data-role="navbar">
					<ul>
						<li><a href="#pageHome" class="homeWeergeven" data-icon="fahome">Home</a>
						<li><a href="#" class="persoonlijstWeergeven" data-icon="user" onClick="showPersonen()">Personen</a>
						<li><a href="#pageTodoHoofd" class="todolijstWeergeven" data-icon="list-alt">Todo's</a>
					</ul>
				</div>
			</div>
		</div>
		
	<!-- Todo detail pagina -->
		<div data-role="page" id="pageTodoDetails" data-theme="f" data-add-back-btn="true" data-back-btn-text="Terug">
			<div data-role="header" data-position="fixed" data-theme="f">
				<h1>Todo details</h1>
                <div id="navgroup">
					<div data-role="controlgroup" data-type="horizontal">
                    <a id="buttonVerwijderTodo" href="#" data-role="button" data-iconpos="right" data-icon="delete">Verwijder todo</a>
                    <a id="buttonWijzigTodo" href="#" data-role="button" data-iconpos="right" data-icon="edit">Wijzig todo</a>
					</div>
                </div>
			</div>
			<div data-role="content">
                <div>
					<a id="buttonOpenPlaats" href="#" data-role="button" data-iconpos="right" data-icon="map-marker">Open plaats van oplevering</a>
					<a id="buttonTodoAfgehandeld" href="#" data-role="button" data-iconpos="right" data-icon="facheck">Todo afgehandeld</a>
				</div>
			</div>
			<div data-role="footer" data-position="fixed" data-theme="f">
				<div data-role="navbar">
					<ul>
						<li><a href="#pageHome" class="homeWeergeven" data-icon="fahome">Home</a>
						<li><a href="#" class="persoonlijstWeergeven" data-icon="user" onClick="showPersonen()">Personen</a>
						<li><a href="#pageTodoHoofd" class="todolijstWeergeven" data-icon="list-alt">Todo's</a>
					</ul>
				</div>
			</div>
		</div>
		
	<!-- Todo Maps pagina -->
		<div data-role="page" id="pageTodoMaps" data-theme="f" data-add-back-btn="true" data-back-btn-text="Terug">
			<div data-role="header" data-position="fixed" data-theme="f">
				<h1>Plaats oplevering</h1>
			</div>
			<div data-role="content">
				<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
					<div id="map_canvas" style="height:300px;"></div>
				</div>
			</div>
			<div data-role="footer" data-position="fixed" data-theme="f">
				<div data-role="navbar">
					<ul>
						<li><a href="#pageHome" class="homeWeergeven" data-icon="fahome">Home</a>
						<li><a href="#" class="persoonlijstWeergeven" data-icon="user" onClick="showPersonen()">Personen</a>
						<li><a href="#pageTodoHoofd" class="todolijstWeergeven" data-icon="list-alt">Todo's</a>
					</ul>
				</div>
			</div>
		</div>
		
		<!-- Todo Wijzig pagina -->
		<div data-role="page" id="pageTodoWijzig" data-theme="f" data-add-back-btn="true" data-back-btn-text="Terug">
			<div data-role="header" data-position="fixed" data-theme="f">
				<h1>Wijzig todo</h1>
			</div>
			<div data-role="content">
				<p>
					<b>Hieronder kunt u informatie van een todo wijzigen.</b>
				</p>
				<form id="formTodoWijzig" method="get" action="" class="formTodoWijzig" data-name="">
				<fieldset>
					<p>
					<div data-role="fieldcontainer"> <!--hidden field-->
						<input type="text" id="todoIdWijzig" name="todoIdWijzig"/>
					</div>
					<div data-role="fieldcontainer">
						<label for="korteOmschrijvingWijzig"><em>*</em>Korte omschrijving:</label>
						<input type="text" id="korteOmschrijvingWijzig" name="korteOmschrijvingWijzig" "required placeholder="Vul hier een korte omschrijving in.." minlength="2" maxlength="100" class="required"/>
					</div>
					<p>
					<div data-role="fieldcontainer">
						<label for="langeOmschrijvingWijzig">Lange omschrijving:</label>
						<textarea name="langeOmschrijvingWijzig" id="langeOmschrijvingWijzig" "required placeholder="Vul hier een lange omschrijving in.." maxlength="2000"></textarea>
					</div>
					<p>
					<div data-role="fieldcontainer">
                    <label for="datumOpleveringWijzig"><em>*</em>Datum oplevering: </label>
                    <input id="datumOpleveringWijzig" name="datumOplevering" "required placeholder="Vul hier de oplever datum in.." class="required" />					</div>
					<p>
					<div data-role="fieldcontainer">
						<label for="urgentieWijzig"><em>*</em>Urgentie: </label>
						<input type="range" id="urgentieWijzig" name="urgentieWijzig" min="1" max="3" value="2" class="required"/>
					</div>
					<p>
					<div data-role="fieldcontainer">
						<label for="plaatsWijzig"><em>*</em>Plaats oplevering:</label>
						<input type="text" id="plaatsWijzig" name="plaatsWijzig" "required placeholder="Plaats oplevering.." maxlength="100" class="required"/>
					</div>
					<p>
					<div data-role="fieldcontainer">
					<label for="typeWijzig"><em>*</em>Prive of zakelijke todo?</label>
						<select id="typeWijzig" name="typeWijzig" data-role="slider">
						<option value="Prive">Prive</option>
						<option value="Zakelijk">Zakelijk</option>
						</select>
					</div>
					<div>
						<button class="buttonValidateTodoWijzig" type="submit" value="Submit" data-icon="check" data-iconpos="right">Wijzig Todo</button>
						<a id="buttonWijzigTodoToe" href=#></a>
					</div>
				</fieldset>					
				</form>
			</div>
			<div data-role="footer" data-position="fixed" data-theme="f">
				<div data-role="navbar">
					<ul>
						<li><a href="#pageHome" class="homeWeergeven" data-icon="fahome">Home</a>
						<li><a href="#" class="persoonlijstWeergeven" data-icon="user" onClick="showPersonen()">Personen</a>
						<li><a href="#pageTodoHoofd" class="todolijstWeergeven" data-icon="list-alt">Todo's</a>
					</ul>
				</div>
			</div>
		</div>

		<!------------------------------------------------------------------------------------------------------------------------------------------------->
		<!--																DIALOGS																	 	 -->
		<!------------------------------------------------------------------------------------------------------------------------------------------------->
		<!-- Informatie dialog -->
		<div data-role="dialog" id="informatieDialog" data-title="Gelukt!"> 
		  <div data-role="content">
			<h3 class="informatieDialogH3Text">???</h3>
			<a href="#" class="informatieDialog-do" data-role="button" data-theme="f"></a>
		  </div>
		</div>
		
		<!-- Bevestig dialog -->
		<div data-role="dialog" id="bevestigDialog" data-title="Weet u het zeker?">
		  <div data-role="content">
			<h3 class="bevestigDialogH3Text">???</h3>
			<a href="#" class="bevestigDialog-do" data-role="button" data-theme="f"></a>
			<a href="#" data-role="button" data-theme="c" data-rel="back">Nee</a>
		  </div>
		</div>

	</body>
</html>
<script src="src/custom/js/allTabs.js" type="text/javascript"></script>
<script src="src/custom/js/homeTab.js" type="text/javascript"></script>
<script src="src/custom/js/persoonTab.js" type="text/javascript"></script>
<script src="src/custom/js/todoTab.js" type="text/javascript"></script>