×
Namespaces

Variants
Actions

Web template toggle improvement

From Nokia Developer Wiki
Jump to: navigation, search


Article Metadata
Tested with
Devices(s): N97
Compatibility
Platform(s):  
Article
Keywords: Browsing, Mobile Web Templates
Created: aleksi.hanninen (17 Dec 2009)
Last edited: hamishwillee (24 Jun 2011)

Overview

This code snippet demonstrates how to improve the toggle component of Nokia High-End Mobile Web Templates. This is done by adding a javascript call back for the toggle to make the check property of the checkbox to be updated. Two toggle components in a list look like this:
Mobile web template toggle button.png
You can download the component library from Nokia Developer.

Source: Relevant HTML components

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Toggle Improvement</title>
<!-- The reset and baseStyles style files of the templates -->
<link href="resources/styles/reset.css" rel="stylesheet" type="text/css" />
<link href="resources/styles/baseStyles.css" rel="stylesheet" type="text/css" />
<!-- The script of the templates -->
<script type="text/javascript" src="resources/scripts/templates.js" ></script>
<!-- The added script, shown in the next box -->
<script type="text/javascript">
// <![CDATA[
// [javascript]
...
// ]]>
</script>
</head>
<body onload="init()" >
<div id="wrap">
<div id="header">
</div>
<div id="content">
<!-- Each item must be in a separate list. -->
<ul class="list-toggle stack toggle">
<li>
<label>Toggle1</label>
<input id="toggle1" type="checkbox" name="toggle1" />
</li>
</ul>
<p>
<a href="javascript:void(0)"
onclick="alert(document.getElementById('toggle1').checked)">
Click to get the toggle1.checked value</a>
</p>
<p>
<a href="javascript:void(0)"
onclick="alert(document.getElementById('toggle2').checked)">
Click to get the toggle2.checked value</a>
</p>
...
</div> <!-- content -->
</div>
</body>
</html>

Source: JavaScript

function init() {
/*
* After this, the original #toggle1 checkbox element is replaced with a clone
* and not available anymore. The document.getElementById('toggle1') will
* return the clone of the checkbox!
*
* To use the "#toggle1.checked" value, we check it here afterwards
* in the given callback function (it is not updated elsewhere).
*
* Note that as the toggle is implemented with two links, pressing the link
* can change the URL hash (the part of the URL after the # mark). If the
* function ol.onclick in the ToggleSwitch of templates.js would return
* false, this would be avoided.
*
*/

var myToggle1 = new ToggleSwitch("toggle1",function(thisElement) {
var toggleValue;
if (thisElement.lastChild.getAttribute('checked')) {
toggleValue = true;
}
else {
thisElement.lastChild.checked = false;
toggleValue = false;
}
// Update the checked value of the checkbox
thisElement.lastChild.checked = toggleValue;
doSomething(toggleValue); // do something, if needed
});
...
}

To find out whether the checkbox has been checked, use the checked property of the #toggle1 element which was cloned:

if (document.getElementById('toggle1').checked) {
// checked, do something
}
else {
// not checked, do something else
}

Or then the current state of the check box can be viewed from the existence of the 'checked' attribute:

if (document.getElementById('toggle1').getAttribute('checked')) {
// checked, do something
}
else {
// not checked, do something else
}


Postconditions

A ToggleSwitch is added on the web page, and the checked value of the checkbox is updated always when the ToggleSwitch is toggled.

By clicking the links "Click to get the toggle1.checked value" and "Click to get the toggle2.checked value" you can get the current value of the checked value of #toggle1 and #toggle2, respectively.

See also

Supplementary material

This code snippet is part of a web page stub, which can be downloaded at File:Web templates toggle improvement stub page.zip.

This page was last modified on 24 June 2011, at 12:17.
121 page views in the last 30 days.