jQuery Mobile: Flip toggle switch

This entry is part 70 of 73 in the series jQuery Mobile

We look at how to build flip toggle switches.  

Flip toggle switches are useful for users to set the App settings, especially if you want to allow users to turn on or off certain features.

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header' data-theme='b'>
        <h1>Flip Toggle Switch</h1>
    </div>

    <div data-role='content'>
        <form>
            <label for='flip1'>Flip toggle switch:</label>
            <select id='flip1' name='flip1' data-role='slider'>
                <option value='off'>Off</option>
                <option value='on'>On</option>
            </select>
        </form>
    </div>
    <div data-role='content'>
        <form>
            <label for='flip2'>Flip toggle switch with theme:</label>
            <select name='flip2' id='flip2' data-role='slider' data-track-theme='b' data-theme='b'>
                <option value='off'>Off</option>
                <option value='on'>On</option>
            </select>
        </form>
    </div>
    <div data-role='content'>
        <form>
            <label for='flip3'>Mini flip toggle switch:</label>
            <select name='flip3' id='flip3' data-role='slider' data-mini='true'>
                <option value='off'>Off</option>
                <option value='on'>On</option>
            </select>
        </form>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div>
</div>

</body>
</html>
Try The Code
Series Navigation<< jQuery Mobile: Slider with hightlight
jQuery Mobile: Slider tooltip >>