From 46099542c324363493ed6801a5483a1044e30c0a Mon Sep 17 00:00:00 2001 From: Sergei Grebnov Date: Thu, 23 Feb 2012 19:57:02 +0400 Subject: [PATCH] toggle button --- plugins/toggle-button/Images/help.dark.png | Bin 0 -> 455 bytes plugins/toggle-button/Images/help.light.png | Bin 0 -> 436 bytes plugins/toggle-button/Images/set.dark.png | Bin 0 -> 543 bytes plugins/toggle-button/Images/set.light.png | Bin 0 -> 519 bytes plugins/toggle-button/css/toggle-button.css | 72 ++++++++++++++ plugins/toggle-button/js/toggle-button.js | 88 +++++++++++++++++ plugins/toggle-button/toggle-button.html | 103 ++++++++++++++++++++ tests/extra/Images/help.dark.png | Bin 0 -> 455 bytes tests/extra/Images/help.light.png | Bin 0 -> 436 bytes tests/extra/Images/set.dark.png | Bin 0 -> 543 bytes tests/extra/Images/set.light.png | Bin 0 -> 519 bytes tests/extra/all.html | 95 +++++++++++++----- themes/metro/jquery.mobile.metro.theme.css | 17 +++- 13 files changed, 347 insertions(+), 28 deletions(-) create mode 100644 plugins/toggle-button/Images/help.dark.png create mode 100644 plugins/toggle-button/Images/help.light.png create mode 100644 plugins/toggle-button/Images/set.dark.png create mode 100644 plugins/toggle-button/Images/set.light.png create mode 100644 plugins/toggle-button/css/toggle-button.css create mode 100644 plugins/toggle-button/js/toggle-button.js create mode 100644 plugins/toggle-button/toggle-button.html create mode 100644 tests/extra/Images/help.dark.png create mode 100644 tests/extra/Images/help.light.png create mode 100644 tests/extra/Images/set.dark.png create mode 100644 tests/extra/Images/set.light.png diff --git a/plugins/toggle-button/Images/help.dark.png b/plugins/toggle-button/Images/help.dark.png new file mode 100644 index 0000000000000000000000000000000000000000..8918545dc5b4c0c58ce7c0a03fc430a1630ccdbb GIT binary patch literal 455 zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC$r9IylHmNblJdl&R0hYC{G?O` z&)mfH)S%SFl*+=BsWuD@jG3M;jv*Dd-ppv^Z88vWU0cZDc7WH4N%{mw-vN%C2OPUP z4H$D2qz|xtopt5NgIL#`ryb=d`8QrD(tr6^TPyiY+S!FH4h&F~u$IAV<#fXc{r1z0 zQ<}C&=Q%R3V2e$-XE4in{sF&vt1ntfm6*O?%s%yC5eMUgN$=057p5{YTu*WP)NfJ9 zpwan6Dj+eNspOl(5^v@&``&)s;;V7taT3FV9uF^N2F;H-KYjUb>*rdy9%I{ZQf%WL zJvaFqtPzW){^oJ+KG*q^d9|CHO8)jKYr9!??qx6SHa9x|Yv%E^^Ey&9)qgHNZnyTV zS`MQPU+SHS%8A8O6d3ZRt4vwNZ84YjM{1VC{k5>fhFz75Q zc{JZ-ljhzI*@n%YzH@tT)CMW(T?yW|pG`bVKwRtE6Q`<0#v4l)ntj<=`BEw)>FNRf tm=kv48@B}h%nyNu%7goi@0fTP9y9-)k~}}@2ryjS;=Kx2}1C9-x z28=liqz|y&@K!KfRxXgaaF*FmL#3VHTz^%!OCC4;@zj880Rt3$@MkzSL%Jr$QBY%^ zUikvXD-B*JEGMXLVGxh02%2 zSS+0Q^Ix3VEhVv8g-;%3J*rr0+*!J?uj+P93ICQD+YRm9H(j>wiwa?24S=G?k3tCy YjBjObrN4AZ0Y(FZr>mdKI;Vst0AoO{jQ{`u literal 0 HcmV?d00001 diff --git a/plugins/toggle-button/Images/set.dark.png b/plugins/toggle-button/Images/set.dark.png new file mode 100644 index 0000000000000000000000000000000000000000..899b98367e55ac3df0bf5db9ca4f9f164dacf1ed GIT binary patch literal 543 zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC$r9IylHmNblJdl&R0hYC{G?O` z&)mfH)S%SFl*+=BsWuD@j0Zhk978H@y_wmV+iW1<%6y8U=Rux>*$0lE3w{@R9MnC` z6r`6(A7JxUPiVQodB^(Yoq0O9osO-Nez~uNsi(2}M~&U2Qxco2Q?Bl2pU%M1fIuoM zR;^ml7_~vp=jboX>q|IKzZBuVvzm4H?0DWcG0xA~?wo(-?#EDcB$R#G0lNt4rV>kr zRaf|>tlzwl$q}=Nd+~#BcG^*0zJjy8%u6!nC(0$xNO%!*;-l#~|2sc@ZwWbVu${HT zAjd5|?#8!eKV&{wq?Inc@JM*acZV}u)_XH3{u6{1-oD!Med+6`#V!LdXor;K>VW{eFo=to;CK~R#_Ctz#4!+iH64_ zE=XtwW)z-y6B65TVC2Z!q)jJjrr@ z=8LK&H}|RJe>fMuhJ7zbh2k!jUw;~T_8iJ9xrNW}mw){`s%XPdN?= zv)6)u@7+F7%8<06Y$n$MHicc%VQc)vS~U(8By*X)=3U#CdY+%LK~L4;B#)$6+U)!J zHjf1}>RqQM(Z+8wpqAWz1wL^ zW3yn!)48Xr&8(EYr}NgEPLO|o^2gE**^^r@vR*G(Q;^M6oBs2GVwdHY=iHGu*`<>w z&oDXg(u-l9`l%a*#tWH!`~urgi+xE}{gudi+x|>rTWZ{KVd0(J@r^;B{v"), + $toggleCaption = $("
"), + 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 ); \ No newline at end of file diff --git a/plugins/toggle-button/toggle-button.html b/plugins/toggle-button/toggle-button.html new file mode 100644 index 0000000..df6296b --- /dev/null +++ b/plugins/toggle-button/toggle-button.html @@ -0,0 +1,103 @@ + + + + + + Toggle button + + + + + + + + + + + + + +
+
+ plugin demo +

Toggle button

+
+ +
+
+ enabled + disabled + disabled + +
+
+ create + switch + disable +
+
+
+ + \ No newline at end of file diff --git a/tests/extra/Images/help.dark.png b/tests/extra/Images/help.dark.png new file mode 100644 index 0000000000000000000000000000000000000000..8918545dc5b4c0c58ce7c0a03fc430a1630ccdbb GIT binary patch literal 455 zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC$r9IylHmNblJdl&R0hYC{G?O` z&)mfH)S%SFl*+=BsWuD@jG3M;jv*Dd-ppv^Z88vWU0cZDc7WH4N%{mw-vN%C2OPUP z4H$D2qz|xtopt5NgIL#`ryb=d`8QrD(tr6^TPyiY+S!FH4h&F~u$IAV<#fXc{r1z0 zQ<}C&=Q%R3V2e$-XE4in{sF&vt1ntfm6*O?%s%yC5eMUgN$=057p5{YTu*WP)NfJ9 zpwan6Dj+eNspOl(5^v@&``&)s;;V7taT3FV9uF^N2F;H-KYjUb>*rdy9%I{ZQf%WL zJvaFqtPzW){^oJ+KG*q^d9|CHO8)jKYr9!??qx6SHa9x|Yv%E^^Ey&9)qgHNZnyTV zS`MQPU+SHS%8A8O6d3ZRt4vwNZ84YjM{1VC{k5>fhFz75Q zc{JZ-ljhzI*@n%YzH@tT)CMW(T?yW|pG`bVKwRtE6Q`<0#v4l)ntj<=`BEw)>FNRf tm=kv48@B}h%nyNu%7goi@0fTP9y9-)k~}}@2ryjS;=Kx2}1C9-x z28=liqz|y&@K!KfRxXgaaF*FmL#3VHTz^%!OCC4;@zj880Rt3$@MkzSL%Jr$QBY%^ zUikvXD-B*JEGMXLVGxh02%2 zSS+0Q^Ix3VEhVv8g-;%3J*rr0+*!J?uj+P93ICQD+YRm9H(j>wiwa?24S=G?k3tCy YjBjObrN4AZ0Y(FZr>mdKI;Vst0AoO{jQ{`u literal 0 HcmV?d00001 diff --git a/tests/extra/Images/set.dark.png b/tests/extra/Images/set.dark.png new file mode 100644 index 0000000000000000000000000000000000000000..899b98367e55ac3df0bf5db9ca4f9f164dacf1ed GIT binary patch literal 543 zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC$r9IylHmNblJdl&R0hYC{G?O` z&)mfH)S%SFl*+=BsWuD@j0Zhk978H@y_wmV+iW1<%6y8U=Rux>*$0lE3w{@R9MnC` z6r`6(A7JxUPiVQodB^(Yoq0O9osO-Nez~uNsi(2}M~&U2Qxco2Q?Bl2pU%M1fIuoM zR;^ml7_~vp=jboX>q|IKzZBuVvzm4H?0DWcG0xA~?wo(-?#EDcB$R#G0lNt4rV>kr zRaf|>tlzwl$q}=Nd+~#BcG^*0zJjy8%u6!nC(0$xNO%!*;-l#~|2sc@ZwWbVu${HT zAjd5|?#8!eKV&{wq?Inc@JM*acZV}u)_XH3{u6{1-oD!Med+6`#V!LdXor;K>VW{eFo=to;CK~R#_Ctz#4!+iH64_ zE=XtwW)z-y6B65TVC2Z!q)jJjrr@ z=8LK&H}|RJe>fMuhJ7zbh2k!jUw;~T_8iJ9xrNW}mw){`s%XPdN?= zv)6)u@7+F7%8<06Y$n$MHicc%VQc)vS~U(8By*X)=3U#CdY+%LK~L4;B#)$6+U)!J zHjf1}>RqQM(Z+8wpqAWz1wL^ zW3yn!)48Xr&8(EYr}NgEPLO|o^2gE**^^r@vR*G(Q;^M6oBs2GVwdHY=iHGu*`<>w z&oDXg(u-l9`l%a*#tWH!`~urgi+xE}{gudi+x|>rTWZ{KVd0(J@r^;B{v + + @@ -76,24 +107,36 @@

Extra controls

-
-
+
-
+
- - - get Value -
- +
+ + +
+ simulate progress +
+
use slider to change progress bar value
+
+ +

+
+ +
+ sample +
+
+
+
diff --git a/themes/metro/jquery.mobile.metro.theme.css b/themes/metro/jquery.mobile.metro.theme.css index 563f188..3f9327a 100644 --- a/themes/metro/jquery.mobile.metro.theme.css +++ b/themes/metro/jquery.mobile.metro.theme.css @@ -1395,7 +1395,10 @@ Loading screen /*content area*/ .ui-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 15px; } -.ui-page-fullscreen .ui-content { padding:0; } + +.ui-page-fullscreen .ui-content { + padding-left:15px; +} /* native fixed headers and footers */ .ui-mobile-touch-overflow.ui-page.ui-native-fixed, @@ -1605,7 +1608,17 @@ Built by David Kaneda and maintained by Jonathan Stark. z-index: 1000; } .ui-footer-duplicate, .ui-page-fullscreen .ui-fixed-inline { display: none; } -.ui-page-fullscreen .ui-header, .ui-page-fullscreen .ui-footer { opacity: .9; } + +.ui-page-fullscreen .ui-header, .ui-page-fullscreen .ui-footer { + opacity: 1; + width: 100%; + padding: 0px; +} + +.ui-page-fullscreen .ui-header .ui-title, .ui-page-fullscreen .ui-header .ui-app-title{ + margin-left: 15px; +} + .ui-navbar { overflow: hidden; height: 100%;} .ui-navbar ul, .ui-navbar-expanded ul { list-style:none; padding: 0; margin: 0; position: relative; display: block; border: 0;} .ui-navbar-collapsed ul { float: left; width: 75%; margin-right: -2px; }