flip switch

jQuery mobile flip switch

by Deepak Kumar

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div class="ui-field-contain ui-body ui-br" data-role="fieldcontain">
    <label class="ui-slider" for="slider2" id="slider2-label">Flip switch:</label>
    <select class="ui-slider-switch" data-role="slider" id="slider2" name="slider2">
        <option selected="selected" value="off">Off</option>
        <option value="on">On</option>
    </select>
    <div id="containment-wrapper" class="ui-slider ui-slider-switch ui-btn-down-c ui-btn-corner-all" role="application" style=""> <span class="ui-slider-label ui-slider-label-a ui-btn-active ui-btn-corner-all" role="img" style="width: 0%;">On</span>
 <span class="ui-slider-label ui-slider-label-b ui-btn-down-c ui-btn-corner-all" role="img" style="width: 100%;">Off</span>

        <div class="ui-slider-inneroffset"> 
            
            <a id="flip-switch" aria-labelledby="slider2-label" aria-valuemax="1" aria-valuemin="0" aria-valuenow="off" aria-valuetext="Off" class="ui-slider-handle ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-slider-handle-snapping" data-corners="true" data-iconshadow="true" data-shadow="true" data-theme="c" data-wrapperels="span" href="#" role="slider" style="left: 0%;" title="Off">
            <span class="ui-btn-inner ui-btn-corner-all">
              <span class="ui-btn-text"></span>
            </span>
          </a>

        </div>
    </div>
</div>

CSS

/* C
-----------------------------------------------------------------------------------------------------------*/
 .ui-bar-c {
    border: 1px solid #b3b3b3
    /*{c-bar-border}*/
    ;
    background: #eee
    /*{c-bar-background-color}*/
    ;
    color: #3e3e3e
    /*{c-bar-color}*/
    ;
    font-weight: bold;
    text-shadow: 0
    /*{c-bar-shadow-x}*/
    1px
    /*{c-bar-shadow-y}*/
    1px
    /*{c-bar-shadow-radius}*/
    #fff
    /*{c-bar-shadow-color}*/
    ;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0
    /*{c-bar-background-start}*/
    ), to(#ddd
    /*{c-bar-background-end}*/
    ));
    /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(#f0f0f0
    /*{c-bar-background-start}*/
    , #ddd
    /*{c-bar-background-end}*/
    );
    /* Chrome 10+, Saf5.1+ */
    background-image: -moz-linear-gradient(#f0f0f0
    /*{c-bar-background-start}*/
    , #ddd
    /*{c-bar-background-end}*/
    );
    /* FF3.6 */
    background-image: -ms-linear-gradient(#f0f0f0
    /*{c-bar-background-start}*/
    , #ddd
    /*{c-bar-background-end}*/
    );
    /* IE10 */
    background-image: -o-linear-gradient(#f0f0f0
    /*{c-bar-background-start}*/
    , #ddd
    /*{c-bar-background-end}*/
    );
    /* Opera 11.10+ */
    background-image: linear-gradient(#f0f0f0
    /*{c-bar-background-start}*/
    , #ddd
    /*{c-bar-background-end}*/
    );
}
.ui-bar-c .ui-link-inherit {
    color: #3e3e3e
    /*{c-bar-color}*/
    ;
}
.ui-bar-c a.ui-link {
    color: #7cc4e7
    /*{c-bar-link-color}*/
    ;
    font-weight: bold;
}
.ui-bar-c a.ui-link:visited {
    color: #2489ce
    /*{c-bar-link-visited}*/
    ;
}
.ui-bar-c a.ui-link:hover {
    color: #2489ce
    /*{c-bar-link-hover}*/
    ;
}
.ui-bar-c a.ui-link:active {
    color: #2489ce
    /*{c-bar-link-active}*/
    ;
}
.ui-bar-c, .ui-bar-c input, .ui-bar-c select, .ui-bar-c textarea, .ui-bar-c button {
    font-family: Helvetica, Arial, sans-serif
   ...

JavaScript

$(function () {
    console.log($(".ui-btn-inner").first())
    $("a.ui-slider-handle").draggable({ containment: "#containment-wrapper", scroll: false, axis: "x"})
});