Hi Livin,
You can find a brief tutorial on iUI at http://www.k10design.net/articles/iui/
which covers many of the features of iUI at a top level. It includes a
couple of sample toggle buttons. Depending on your specific
application, there are, of course, a variety of ways to present the
iUI toggle element and attach functionality to it. But to help you get
started, I reworked your snippet into a simple example of a working
toggle button that acts as a submit button for your Kitchen form.
Hope this helps.
<!-- iUI Toggle that acts as a submit button -->
<html>
<head>
<meta name="viewport" content="width=device-width; initial-
scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<style type="text/css" media="screen">@import "/iui/iui.css";</
style>
<script type="application/x-javascript" src="/iui/iui.js"></
script>
<script>
function submitMyForm() {
var act = document.getElementById('action_state');
var intensity = document.getElementById('intensity');
act.value = (act.value == "On") ? "Off" : "On";
alert("Toggle: "+act.value+", Intensity: "+intensity.options
[intensity.selectedIndex].text);
//document.getElementById('lighting_form').submit();
}
</script>
</head>
<body>
<div class="toolbar">
<h1 id="pageTitle"></h1>
</div>
<div id="Kitchen" title="Kitchen" class="panel" selected="true">
<h2>Lighting</h2>
<fieldset>
<div class="row">
<label>State</label>
<div class="toggle" onclick="submitMyForm();">
<span class="thumb"></span><span class="toggleOn">ON</
span><span class="toggleOff">OFF</span>
</div>
</div>
<div class="row">
<label>Intensity</label>
<form id="lighting_form" method="post">
<input type="hidden" name="control_device" value="Kitchen
Lights">
<input type="hidden" id="action_state" name="action_state"
value="">
<select id="intensity" class="formdropdown"
name="selectdim" SIZE="1" onchange="SubmitForm(this)" style="font-size:
1.3em;">
<option selected value="0">0%</option>
<option value="10">10%</option>
<option value="20">20%</option>
<option value="30">30%</option>
<option value="40">40%</option>
<option value="50">50%</option>
<option value="60">60%</option>
<option value="70">70%</option>
<option value="80">80%</option>
<option value="90">90%</option>
<option value="100">100%</option>
</select>
</form>
</div>
</fieldset>
</div>
</body>
</html>
<!-- end of example -->
On Aug 10, 1:06 am, Livin <[email protected]> wrote:
> I'm a beginner when it comes to web dev, javascript, etc.
>
> Below is working code using separate on/off buttons but I'd like to
> use the iUI on/off toggle.
>
> Can someone point me in the right direction?
>
> thx
>
> --------------
>
> <div id="Kitchen" title="Kitchen" class="panel">
> <fieldset>
> <div class="row">
> <label>Lighting</label>
> <div onclick="">
> <form method="post">
> <input type="hidden" name="control_device"
> value="Kitchen Lights">
> <input class="formbutton" type="submit"
> name="action_on"
> value="On">
> <input class="formbutton" type="submit"
> name="action_off"
> value="Off">
> <select class="formdropdown" name="selectdim"
> SIZE="1"
> onchange="SubmitForm(this)">
> <option selected value="0">0%</option>
> <option value="10">10%</option>
> <option value="20">20%</option>
> <option value="30">30%</option>
> <option value="40">40%</option>
> <option value="50">50%</option>
> <option value="60">60%</option>
> <option value="70">70%</option>
> <option value="80">80%</option>
> <option value="90">90%</option>
> <option value="100">100%</option>
> </select>
> </form>
> </div>
> </div>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"iPhoneWebDev" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/iphonewebdev?hl=en
-~----------~----~----~----~------~----~------~--~---
