toggle button

plugins/toggle-button/css/toggle-button.css

@@ -0,0 +1,72 @@
+/*
+"Toggle button" plugin
+*/
+
+.ui-toggle-button{
+    width: 35px;
+    text-decoration: none;
+    display: inline-block;
+    margin: 5px 10px 5px 0px;
+    cursor: pointer;
+}
+
+/*
+icon
+*/
+
+.ui-toggle-icon{
+    border: 2px solid;
+    width: 35px;
+    height: 35px;
+}
+
+.ui-toggle-button-a .ui-toggle-icon{
+    background-color: black;
+    border-color: white;
+}
+
+.ui-toggle-button-b .ui-toggle-icon{
+    background-color: white;
+    border-color: black;
+}
+
+.ui-toggle-button-a[checked='checked'] .ui-toggle-icon{
+    background-color: white;
+}
+
+.ui-toggle-button-b[checked='checked'] .ui-toggle-icon{
+    background-color: black;
+}
+
+/*
+caption
+*/
+.ui-toggle-caption {
+    font-size: 8pt;
+    width: 35px;
+}
+
+.ui-toggle-button-a .ui-toggle-caption{
+    color: white;
+}
+
+.ui-toggle-button-b .ui-toggle-caption{
+    color: black;
+}
+
+/*
+disabled state
+*/
+
+.ui-toggle-button.ui-disabled .ui-toggle-caption{
+    color: #808080;
+}
+
+.ui-toggle-button.ui-disabled .ui-toggle-icon{
+    border-color: #808080;
+    cursor: default;
+}
+
+.ui-toggle-button.ui-disabled[checked='checked'] .ui-toggle-icon{
+    background-color: #808080;
+}

plugins/toggle-button/js/toggle-button.js

@@ -0,0 +1,88 @@
+/*
+ * "toggle button" plugin
+ */
+(function( $, undefined ) {
+    $.widget( "mobile.togglebutton", $.mobile.widget, {
+
+        options: {
+            theme : null,
+            icon : null,
+            checked: null
+        },
+
+        _create: function(){
+            var $toggleButton = this.element,
+                theme = this.options.theme || $toggleButton.jqmData( "theme" ) || $.mobile.getInheritedTheme( $toggleButton, "a" ),
+                $toggleIcon = $("<div class='ui-toggle-icon'></div>"),
+                $toggleCaption = $("<div class='ui-toggle-caption'></div>"),
+                icon = this.options.icon || $toggleButton.jqmData( "icon" );
+            $toggleButton.addClass("ui-toggle-button");
+            $toggleButton.addClass("ui-toggle-button-"+theme);
+            $toggleButton.html($toggleCaption.append($toggleButton.html()));
+            $toggleIcon.addClass('ui-icon-'+icon);
+            $toggleIcon.insertBefore($toggleCaption);
+            this.darkIconStyle = (theme=='a')?'ui-toggle-unchecked':'ui-toggle-checked',
+            this.lightIconStyle = (theme=='a')?'ui-toggle-checked':'ui-toggle-unchecked';
+            if(this.options.checked || $toggleButton.attr("checked")=='checked'){
+                this.checked(true);
+            }else{
+                this.checked(false);
+            }
+            this.refresh();
+        },
+
+        checked : function(checked){
+            var $toggleButton = this.element;
+            if(checked === undefined){
+                return ($toggleButton.attr('checked'))?true:false;
+            }
+
+            if(checked===true){
+                $toggleButton.attr('checked',true);
+                $toggleButton.removeClass(this.darkIconStyle).addClass(this.lightIconStyle);
+            }else{
+                $toggleButton.attr('checked',false);
+                $toggleButton.removeClass(this.lightIconStyle).addClass(this.darkIconStyle);
+            }
+        },
+
+        enable: function() {
+            var $toggleButton = this.element,
+                self = this;
+            $toggleButton.attr( "disabled", false );
+            $toggleButton.removeClass( "ui-disabled" ).attr( "aria-disabled", false );
+            $toggleButton.click(function(){
+                var checked = $toggleButton.attr('checked');
+                if(checked=='checked'){
+                    self.checked(false);
+                }else{
+                    self.checked(true);
+                }
+            });
+            return this._setOption( "disabled", false );
+        },
+
+        disable: function() {
+            var $toggleButton = this.element;
+            $toggleButton.attr( "disabled", true );
+            $toggleButton.addClass( "ui-disabled" ).attr( "aria-disabled", true );
+            $toggleButton.unbind('click');
+            return this._setOption( "disabled", true );
+        },
+
+        refresh: function() {
+            if ( this.element.attr("disabled") ) {
+                this.disable();
+            } else {
+                this.enable();
+            }
+        }
+
+    });
+
+    //auto self-init widgets
+    $( document ).bind( "pagecreate create", function( e ){
+        $( ":jqmData(role='toggle-button')", e.target ).togglebutton();
+    });
+
+})( jQuery );

plugins/toggle-button/toggle-button.html

@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <title>Toggle button</title>
+    <link rel="stylesheet"  href="../../themes/metro/jquery.mobile.metro.theme.css" />
+    <link href="css/toggle-button.css" rel="stylesheet" type="text/css" />
+    <script src="../../jqmobile-core/jquery.js"></script>
+    <script src="../../jqmobile-core/jquery.mobile-1.0.js"></script>
+    <script src="js/toggle-button.js" type="text/javascript"></script>
+
+    <style type="text/css">
+        /* custom icons for toggle button*/
+        .ui-icon-demo-help,
+        .ui-icon-demo-set {
+            background-repeat: no-repeat;
+            background-position: 50% 50% ;
+            background-size: 30px 30px;
+        }
+
+        .ui-toggle-checked .ui-icon-demo-help{
+            background-image: url(Images/help.light.png);
+        }
+
+        .ui-toggle-unchecked .ui-icon-demo-help{
+            background-image: url(Images/help.dark.png);
+        }
+
+        .ui-toggle-checked .ui-icon-demo-set{
+            background-image: url(Images/set.light.png);
+        }
+
+        .ui-toggle-unchecked .ui-icon-demo-set{
+            background-image: url(Images/set.dark.png);
+        }
+    </style>
+
+    <script>
+        $(function() {
+
+
+            $('#createBtn').click(function () {
+                if(!document.getElementById("toggle1")){
+                    $('#newDiv').append($("<a id='toggle1'>sample</a>").togglebutton({theme:'a',checked:false,icon:'demo-help'}));
+                }
+            });
+
+            var checked = true;
+            var disabled = true;
+
+            $('#switchBtn').click(function () {
+            if(document.getElementById("toggle1")){
+                $('#toggle1').data('togglebutton').checked(checked);
+                checked = !checked;
+            }
+            });
+
+            $('#disableBtn').click(function () {
+                if(document.getElementById("toggle1")){
+                    if(disabled){
+                        $('#toggle1').data('togglebutton').disable();
+                    }else{
+                        $('#toggle1').data('togglebutton').enable();
+                    }
+                    disabled = !disabled;
+                }
+            });
+
+
+        });
+    </script>
+
+</head>
+
+<body>
+<div data-role="page" data-theme="a">
+    <div data-role="header" data-theme="a">
+        <span class="ui-app-title">plugin demo</span>
+        <h1>Toggle button</h1>
+    </div>
+
+    <div data-role="content" data-theme="a">
+        <fieldset >
+            <a href="#" data-role="toggle-button" data-icon="demo-set" >enabled</a>
+            <a href="#" data-role="toggle-button" data-icon="demo-set"  disabled="disabled" >disabled</a>
+            <a href="#" data-role="toggle-button" data-icon="demo-set" checked='checked' disabled="disabled" >disabled</a>
+            <div style="background-color: white;margin-left: -10px;padding-left: 10px;">
+                <br/>
+                <a href="#" data-role="toggle-button" data-icon="demo-help" data-theme='b' >enabled</a>
+                <a href="#" data-role="toggle-button" data-icon="demo-help" data-theme='b' disabled="disabled" >disabled</a>
+                <a href="#" data-role="toggle-button" data-icon="demo-help" checked='checked' data-theme='b' disabled="disabled" >disabled</a>
+            </div>
+        </fieldset>
+        <br/>
+        <a href="#" data-role="button" data-inline="true" id="createBtn">create</a>
+        <a href="#" data-role="button" data-inline="true" id="switchBtn">switch</a>
+        <a href="#" data-role="button" data-inline="true" id="disableBtn">disable</a>
+        <div id="newDiv"></div>
+    </div>
+</div>
+</body>
+</html>