Nokia Asha web apps - Creating On/Off Switch
This article demonstrate how to create a On/Off switch using mwl methods.
Article Metadata
Code Example
Tested with
Compatibility
Article
Contents |
Introduction
In the following code example we have used mwl methods toggleClass() along with setGroupNext() and switchClass(). The toggleClass() method toggles a specified class attribute of an element. This is a synchronous method.
General Syntax
<static> mwl.toggleClass(targetNode,className)
Where targetNode is the element whose class to toggle. className is the name of the class to toggle
Basic Idea
We will create a graphical switch containing two images Red (OFF) and Green (ON) . Initially the switch will be OFF (Red image will be visible) . Once user click on the Red image the Green image will be activated. Clicking on any of the image will make the other image active, this shows whether the switch is in ON or OFF state.
Switch is off
Switch is on
Implementation
Lets create a basic web app project ( File->New-> Series 40 web app (wgt) -> basic web app project)
basic.css
body {padding:5px;}
.container {width:235px; height:295px; overflow:hidden;}
.sw_off {margin-left:0px;}
.sw_on {margin-left:0px;}
.hide {width:235px; height:295px; display:none;}
.show {width:235px; height:295px; display:block;}
{{Icode|container]] describes the area of the main container. For each image we have created two div sw_off and sw_on, which defines the position of the div in main container while displaying. hide and show are the areas of the div to be displayed and hidden.
index.html
<body >
<div id="sw_bg" class="container">
<div class="sw_off" id="slide">
<div class="show" id="is_off" onclick=" mwl.toggleClass('#sw_bg','cont_on');
mwl.switchClass('#slide', 'sw_off', 'sw_on');
mwl.setGroupNext('#slide', 'show', 'hide', 'next');">
<img src="redbutton.jpeg" >
</div>
<div class="hide" id="is_on" onclick=" mwl.toggleClass('#sw_bg', 'cont_on');
mwl.switchClass('#slide', 'sw_on', 'sw_off');
mwl.setGroupNext('#slide', 'show', 'hide', 'next');">
<img src="greenbutton.jpeg" >
</div>
</div>
</div>
</body>
Initially sw_off class is displayed and thus we will see the Red image . When we click on the red image switchClass() method changes the class from sw_off to sw_on and thus the Green image will be visible this time. toggleClass() method toggles the class cont_on. setGroupNext() method iterate to the next element. It replaces the target class show with the default class hide on the current node and applies the target class show to the next sibling node.
Source Code
The full source code presented in this article is available here File:SwitchS40WebApps.zip
Hamishwillee - Code a bit confusing
1. There isn't any CSS class cont_on so I can't see what using the toggleClass would do 2. sw_on and sw_off do the same CSS, so I can't see what the mwl.switchClass would do 3. The mwl.setGroupNext does actually do something - it changes the display block from display to not display. This is the only bit you actually need.
Suggest you change code so it just has that bit, or even use the mwl.toggle() directly for readability.hamishwillee 09:00, 6 July 2011 (EEST)