Export 0.1.63

[platform/framework/web/web-ui-fw.git] / src / widgets / toggleswitch / js / jquery.mobile.tizen.toggleswitch.js

diff --git a/src/widgets/toggleswitch/js/jquery.mobile.tizen.toggleswitch.js b/src/widgets/toggleswitch/js/jquery.mobile.tizen.toggleswitch.js
index 5de28ea..4808363 100755 (executable)
--- a/src/widgets/toggleswitch/js/jquery.mobile.tizen.toggleswitch.js
+++ b/src/widgets/toggleswitch/js/jquery.mobile.tizen.toggleswitch.js
@@ -45,10 +45,56 @@
 //     checked: Boolean; the state of the switch.(default: true)
 //     texton: String; "On";
 //     textoff: String; "Off";
+//     style: String; the style of toggleswitch (default: image)
 //
 // Events:
 //     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, {
@@ -56,6 +102,7 @@
                        texton                  : "On",
                        textoff                 : "Off",
                        checked                 : true,
+                       style                           : "image",
                        initSelector    : ":jqmData(role='toggleswitch')"
                },
 
@@ -105,6 +152,12 @@
                        }
                },
 
+               _setStyle: function ( style ) {
+                       if ( style ) {
+                               this.options.style = style;
+                       }
+               },
+
                _setDisabled: function ( value ) {
                        $.tizen.widgetex.prototype._setDisabled.call( this, value );
                        this._ui.container[value ? "addClass" : "removeClass"]( "ui-disabled" );
@@ -113,7 +166,8 @@
                _create: function () {
                        var self = this;
                        this.element.hide().after( this._ui.container );
-                       if ( this.element.jqmData("icon") ) {
+                       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();