*
* ***************************************************************************
* Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
- * Copyright (c) 2011 by Intel Corporation Ltd.
+ * Copyright (C) 2011 by Intel Corporation Ltd.
*
* Permission is hereby granted, free of charge, to any person obtaining a
- * copy of this software and associated documentation files (the "Software" ),
+ * copy of this software and associated documentation files (the "Software"),
* to deal in the Software without restriction, including without limitation
* the rights to use, copy, modify, merge, publish, distribute, sublicense,
* and/or sell copies of the Software, and to permit persons to whom the
* ***************************************************************************
*
* Authors: Gabriel Schulhof <gabriel.schulhof@intel.com>
+ * Daehyeon Jung <darrenh.jung@samsung.com>
*/
// Displays a simple two-state switch.
// element inside a page. Alternatively, call switch()
// on an element, like this :
//
-// $( "#myswitch" ).toggleswitch();
+// $("#myswitch").toggleswitch();
// where the html might be :
// <div id="myswitch"></div>
//
// Options:
-// checked: Boolean; the state of the switch
-// Default: true (up)
+// checked: Boolean; the state of the switch.(default: true)
+// texton: String; "On";
+// textoff: String; "Off";
+// style: String; the style of toggleswitch (default: image)
//
// Events:
-// changed: Emitted when the switch is changed
+// change: Emitted when the switch is changed.
+
+/**
+ @class ToggleSwitch
+ The toggle switch widget shows a 2-state switch on the screen.
+
+ To add a toggle switch widget to the application, use the following code:
+
+ // Off state
+ <div id="switch-1" data-role="toggleswitch" data-checked="false" data-textoff="Disabled"></div>
+ // On state
+ <div id="switch-2" data-role="toggleswitch" data-texton="Enabled"></div>
+ <script>
+ $("#switch-1").bind("changed", function(e, state)
+ {
+ alert(state);
+ });
+ </script>
+*/
+/**
+ @property {Boolean} data-checked
+ Sets the toggle switch state.
+ The default value is true.
+*/
+/**
+ @property {String} data-texton
+ Sets the label text value for the toggle switch 'on' state.
+ The default value is On.
+*/
+/**
+ @property {String} data-textoff
+ Sets the label text value for the toggle switch 'off' state.
+ The default value is Off.
+*/
+/**
+ @event change
+ The toggle switch can define a callback for the change event, which is fired when the toggle switch state is changed.
+
+ <div id="switch-1" data-role="toggleswitch"></div>
+ <script>
+ $("#switch-1").bind("change", function(e, state)
+ {
+ alert(state);
+ });
+ </script>
+*/
(function ( $, undefined ) {
$.widget( "tizen.toggleswitch", $.tizen.widgetex, {
options: {
- onText : "On",
- offText : "Off",
+ texton : "On",
+ textoff : "Off",
checked : true,
+ style : "image",
initSelector : ":jqmData(role='toggleswitch')"
},
_htmlProto: {
ui: {
- outer : "#outer",
- bg : "#bg",
- txtMovers : {
- normal : "#normal",
- active : "#active"
- },
- btn : "#button",
- btnSpan : "#btn-span",
- txt : {
- normal : "[data-normal-text]",
- active : "[data-active-text]"
- }
+ container: "#container",
+ mover: "#mover",
+ on: "#on-span",
+ off: "#off-span"
}
},
- _value: {
- attr: "data-" + ( $.mobile.ns || "" ) + "checked",
- signal: "changed"
+ destroy: function () {
+ this._ui.container.remove();
+ // restore original element
+ this.element.show();
},
- _create: function () {
- var self = this;
-
- this.element
- .css( "display", "none" )
- .after( this._ui.outer );
-
- this._ui.outer.find( "a" ).buttonMarkup();
- this._ui.txtMovers.normal
- .add( this._ui.txtMovers.active )
- .find( "*" )
- .css( { "border-color": "transparent" } );
- this._ui.btn.addClass( "toggleswitch-button" );
-/*
- // Crutches for IE: It does not seem to understand opacity specified in a class, nor that opacity of an element
- // affects all its children
- if ($.mobile.browser.ie) {
- // Remove this class, because it has no effect in IE :-S
- this._ui.outer.find( "*" ).removeClass( "toggleswitch-button-transparent" );
- // After adding the button markup, make everything transparent
- this._ui.normalBackground.find( "*" ).css( "opacity", 0.0);
- this._ui.activeBackground.find( "*" ).css( "opacity", 0.0);
- this._ui.refButton.add( this._ui.refButton.find( "*" )).css( "opacity", 0.0);
- this._ui.realButton.add( this._ui.realButton.find( "*" )).css( "opacity", 0.0);
- // ... except the buttons that display the inital position of the switch
- this._ui.initButtons
- .add( this._ui.initButtons.find( "*" ))
- .add( this._ui.fButton.find( "*" ))
- .add( this._ui.fButton)
- .css( "opacity", 1.0);
- }
-*/
- $.extend( this, {
- _initial: true
- } );
-
- this._ui.btn
- .add( this._ui.outer )
- .bind( "vclick", function ( e ) {
- self._setChecked( !( self.options.checked ) );
- e.stopPropagation();
- } );
- },
-/*
- _makeTransparent: function (obj, b) {
- if ($.mobile.browser.ie)
- obj.add(obj.find( "*" )).css( "opacity", b ? 0.0 : 1.0);
- else
- obj[b ? "addClass" : "removeClass"]( "toggleswitch-button-transparent" );
+ _value: {
+ attr: "data-" + ($.mobile.ns || "") + "checked",
+ signal: "change"
},
-*/
- _setDisabled: function ( value ) {
- $.tizen.widgetex.prototype._setDisabled.call( this, value );
- this._ui.outer[value ? "addClass" : "removeClass"]( "ui-disabled" );
+
+ _setTexton: function ( text ) {
+ this._ui.on.text( text );
+ this.options.texton = text;
+ this.element.attr( "data-" + ($.mobile.ns || "") + "texton", text );
},
- _updateBtnText: function () {
- var noText = ( ( ( this.options.offText || "" ) === "" &&
- ( this.options.onText || "" ) === "" ) );
- this._ui.btnSpan.html( ( noText ? "" : " " ) );
- this._ui.outer.find( "a" )[( noText ? "addClass" : "removeClass" )]( "ui-btn-icon-notext" );
+ _setTextoff: function ( text ) {
+ this._ui.off.text( text );
+ this.options.textoff = text;
+ this.element.attr( "data-" + ($.mobile.ns || "") + "textoff", text );
},
- _setOnText: function ( value ) {
- this._ui.txt.active.text( value );
- this.options.onText = value;
- this.element.attr( "data-" + ( $.mobile.ns || "" ) + "on-text", value );
- this._updateBtnText();
+ _setChecked: function ( checked ) {
+ if ( checked == this.options.checked ) {
+ return;
+ }
+
+ this.options.checked = checked;
+ this._setValue( checked );
+ if ( checked ) {
+ this._ui.container.addClass("ui-toggleswitch-state-checked");
+ } else {
+ this._ui.container.removeClass("ui-toggleswitch-state-checked");
+ }
},
- _setOffText: function ( value ) {
- this._ui.txt.normal.text( value );
- this.options.offText = value;
- this.element.attr( "data-" + ($.mobile.ns || "" ) + "off-text", value );
- this._updateBtnText();
+ _setStyle: function ( style ) {
+ if ( style ) {
+ this.options.style = style;
+ }
},
- _setChecked: function ( checked ) {
- if ( this.options.checked != checked ) {
- var dst = checked
- ? { bg: "0%", normalTop: "-50%", activeBot: "0%" }
- : { bg: "50%", normalTop: "0%", activeBot: "-50%" },
- method = ( this._initial ? "css" : "animate" );
+ _setDisabled: function ( value ) {
+ $.tizen.widgetex.prototype._setDisabled.call( this, value );
+ this._ui.container[value ? "addClass" : "removeClass"]( "ui-disabled" );
+ },
- this._ui.btn.add( this._ui.bg )[method]( { top: dst.bg } );
- this._ui.txtMovers.normal[method]( { top: dst.normalTop } );
- this._ui.txtMovers.active[method]( { bottom: dst.activeBot } );
+ _create: function () {
+ var self = this;
+ this.element.hide().after( this._ui.container );
+ self._setStyle( this.element.jqmData("style") );
+ if ( this.options.style != "text" ) {
+ this._ui.container.addClass("ui-toggleswitch-image-style");
+ this._ui.container.find(".ui-toggleswitch-text").hide();
+ this._ui.container.find(".ui-toggleswitch-reed").hide();
+ this._ui.container.find(".ui-toggleswitch-img").show();
+ } else {
+ this._ui.container.find(".ui-toggleswitch-img").hide();
+ }
- this._initial = false;
+ $( this._ui.mover ).bind( "vclick", function () {
+ self._setChecked( !self.options.checked );
+ return false;
+ });
+ },
- this.options.checked = checked;
- this.element.attr( "data-" + ( $.mobile.ns || "" ) + "checked", checked );
- this._setValue( checked );
- }
- }
- } );
+ });
$( document ).bind( "pagecreate create", function ( e ) {
$( $.tizen.toggleswitch.prototype.options.initSelector, e.target )
.not( ":jqmData(role='none'), :jqmData(role='nojs')" )
.toggleswitch();
- } );
+ });
+
-}( jQuery ) );
+}( jQuery ));
projects / platform / framework / web / web-ui-fw.git / blobdiff