Thank you! I'll look at this today.

On Aug 16, 1:32 pm, radkins <[email protected]> wrote:
> Hi Livin,
>
> You can find a brief tutorial on iUI athttp://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
-~----------~----~----~----~------~----~------~--~---

Reply via email to