O'Reilly logo

jQuery Mobile Cookbook by Chetan K Jain

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating dynamic flip switch and slider controls

This recipe shows you how to add a flip switch and a slider control dynamically to a page using JavaScript and also handle their events. Here you will create a simple Volume Control form with a volume slider that warns the user when the volume is very high.

Getting ready

Copy the full code of this recipe from the code/05/dynamic-slider sources folder. This code can be launched using the URL http://localhost:8080/05/dynamic-slider/main.html.

How to do it...

  1. In main.html, add the following empty form to the page content:
    <form id='volumeForm' action='#' method='post'></form>
  2. Add the following script to the <head> section to dynamically add a flip switch and a slider:
    $('#main').live('pageinit', function(event) ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required