Permalink
Browse files

toggle button

  • Loading branch information...
1 parent ccbce32 commit 46099542c324363493ed6801a5483a1044e30c0a @sgrebnov committed Feb 23, 2012
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -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;
+}
@@ -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 );
@@ -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>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.

0 comments on commit 4609954

Please sign in to comment.