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.
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
.
In
main.html
, add the following empty form to the page content:<form id='volumeForm' action='#' method='post'></form>
Add the following script to the
<head>
section to dynamically add a flip switch and a slider:$('#main').live('pageinit', function(event) { var str="<div data-role='fieldcontain' style='width: 50%'><label for='flipswitch'>Volume:</label>" + "<select name='flipswitch' id='flipswitch' data-role='slider' data-track-theme='d'>" +...