You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cordova.apache.org by pp...@apache.org on 2013/09/10 20:04:13 UTC

[08/51] [partial] [cordova-tizen] Tizen SDK 2.2 support mores samples

http://git-wip-us.apache.org/repos/asf/cordova-tizen/blob/4ebce38e/samples/TizenWebUI-sample-v1/tizen-web-ui-fw/latest/js/modules/widgets/jquery.mobile.tizen.popupwindow.js
----------------------------------------------------------------------
diff --git a/samples/TizenWebUI-sample-v1/tizen-web-ui-fw/latest/js/modules/widgets/jquery.mobile.tizen.popupwindow.js b/samples/TizenWebUI-sample-v1/tizen-web-ui-fw/latest/js/modules/widgets/jquery.mobile.tizen.popupwindow.js
new file mode 100644
index 0000000..8f39ab6
--- /dev/null
+++ b/samples/TizenWebUI-sample-v1/tizen-web-ui-fw/latest/js/modules/widgets/jquery.mobile.tizen.popupwindow.js
@@ -0,0 +1,569 @@
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Shows popup on the page
+//>>label: Popup
+//>>group: Tizen:Widgets
+
+define( [ 
+	'jquery',
+	'../jquery.mobile.tizen.core',
+	'./jquery.mobile.tizen.widgetex'
+	], function ( jQuery ) {
+
+//>>excludeEnd("jqmBuildExclude");
+
+/*
+ * jQuery Mobile Widget @VERSION
+ *
+ * This software is licensed under the MIT licence (as defined by the OSI at
+ * http://www.opensource.org/licenses/mit-license.php)
+ *
+ * ***************************************************************************
+ * Copyright (c) 2000 - 2011 Samsung Electronics Co., 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"),
+ * 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
+ * Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+ * DEALINGS IN THE SOFTWARE.
+ * ***************************************************************************
+ *
+ * Authors: Gabriel Schulhof <ga...@intel.com>,
+ *          Elliot Smith <el...@intel.com>
+ *			Hyunjung Kim <hj...@samsung.com>
+ */
+
+/*
+ * % Popupwindow widget do not use anymore(will be deprecated, internal use only)
+ *
+ *
+ * Shows other elements inside a popup window.
+ *
+ * To apply, add the attribute data-role="popupwindow" to a <div> element inside
+ * a page. Alternatively, call popupwindow()
+ * on an element, eg :
+ *
+ *     $("#mypopupwindowContent").popupwindow();
+ * where the html might be :
+ *     <div id="mypopupwindowContent"></div>
+ *
+ * To trigger the popupwindow to appear, it is necessary to make a call to its
+ * 'open()' method. This is typically done by binding a function to an event
+ * emitted by an input element, such as a the clicked event emitted by a button
+ * element. The open() method takes two arguments, specifying the x and y
+ * screen coordinates of the center of the popup window.
+
+ * You can associate a button with a popup window like this:
+ *      <div id="mypopupContent" style="display: table;" data-role="popupwindow">
+ *          <table>
+ *              <tr> <td>Eenie</td>   <td>Meenie</td>  <td>Mynie</td>   <td>Mo</td>  </tr>
+ *              <tr> <td>Catch-a</td> <td>Tiger</td>   <td>By-the</td>  <td>Toe</td> </tr>
+ *              <tr> <td>If-he</td>   <td>Hollers</td> <td>Let-him</td> <td>Go</td>  </tr>
+ *              <tr> <td>Eenie</td>   <td>Meenie</td>  <td>Mynie</td>   <td>Mo</td>  </tr>
+ *          </table>
+ *      </div>
+ * <a href="#myPopupContent" data-rel="popupwindow" data-role="button">Show popup</a>
+ *
+ * Options:
+ *
+ *     theme: String; the theme for the popupwindow contents
+ *                   Default: null
+ *
+ *     overlayTheme: String; the theme for the popupwindow
+ *                   Default: null
+ *
+ *     shadow: Boolean; display a shadow around the popupwindow
+ *             Default: true
+ *
+ *     corners: Boolean; display a shadow around the popupwindow
+ *             Default: true
+ *
+ *     fade: Boolean; fades the opening and closing of the popupwindow
+ *
+ *     transition: String; the transition to use when opening or closing
+ *                 a popupwindow
+ *                 Default: $.mobile.defaultDialogTransition
+ *
+ * Events:
+ *	popupbeforeposition: triggered after a popup has completed preparations for opening, but has not yet opened
+ *	popupafteropen: triggered after a popup has completely opened
+ *	popupafterclose triggered when a popup has completely closed
+*/
+
+/**
+	class Popupwindow
+	The pop-up widget shows a list of items in a pop-up window in the middle of the screen. It automatically optimizes the pop-up window size within the screen.
+	To add a pop-up widget to the application, use the following code:
+
+		// Basic pop-up
+		<div id="center_info" data-role="popup" data-style="center_info">
+			<div data-role="text">
+				<p>
+				Pop-up dialog box, a child window that blocks user interaction in the parent window
+				</p>
+			</div>
+		</div>
+		// Pop-up with a title and button
+		<div id="center_title_1btn" data-role="popup" data-style="center_title_1btn">
+			<p data-role="title">
+				Pop-up title
+			</p>
+			<p data-role="text">
+				Pop-up dialog box
+			</p>
+		<div data-role="button-bg">
+			<input type="button" value="Text Button" />
+		</div>
+		</div>
+
+	The pop-up can define callbacks for events as described in the jQueryMobile documentation for pop-up events. <br/>You can use methods with the pop-up as described in the jQueryMobile documentation for pop-up methods.
+
+	@deprecated 2.0 verisons
+*/
+
+/**
+	@property {String} data-style
+	Defines the pop-up window style.
+	The following styles are available:
+
+	center_info: basic pop-up message
+	center_title: pop-up message with a title
+	center_basic_1btn: pop-up message with 1 button
+	center_basic_2btn: pop-up message with 2 horizontal buttons
+	center_title_1btn: pop-up message with a title and 1 button
+	center_title_2btn: pop-up message with a title and 2 horizontal buttons
+	center_title_3btn: pop-up message with a title and 3 horizontal buttons
+	center_button_vertical: pop-up message with vertical buttons
+	center_checkbox: pop-up message with a check box
+	center_liststyle_1btn>: pop-up message with a list and 1 button
+	center_liststyle_2btn: pop-up message with a list and 2 horizontal buttons
+	center_liststyle_3btn: pop-up message with a list and 3 horizontal buttons
+*/
+
+(function ( $, undefined ) {
+	$.widget( "tizen.popupwindow", $.tizen.widgetex, {
+		options: {
+			theme: null,
+			overlayTheme: "s",
+			style: "custom",
+			disabled: false,
+			shadow: true,
+			corners: true,
+			fade: false,
+			opacity: 0.7,
+			widthRatio: 0.8612,
+			transition: $.mobile.defaultDialogTransition,
+			initSelector: ":jqmData(role='popupwindow')"
+		},
+
+		_htmlProto: {
+source:
+
+ [ "<div><div>" ,
+  "    <div id='popupwindow-screen' class='ui-selectmenu-screen ui-screen-hidden ui-popupwindow-screen'></div>" ,
+  "    <div id='popupwindow-container' class='ui-popupwindow ui-popupwindow-padding ui-selectmenu-hidden ui-overlay-shadow ui-corner-all'></div>" ,
+  "</div>" ,
+  "</div>" ].join("")
+,			ui: {
+				screen: "#popupwindow-screen",
+				container: "#popupwindow-container"
+			}
+		},
+
+		_setStyle: function () {
+			var popup = this.element,
+				style = popup.attr( 'data-style' );
+
+			if ( style ) {
+				this.options.style = style;
+			}
+
+			popup.addClass( this.options.style );
+			popup.find( ":jqmData(role='title')" )
+					.wrapAll( "<div class='popup-title'></div>" );
+			popup.find( ":jqmData(role='text')" )
+					.wrapAll( "<div class='popup-text'></div>" );
+			popup.find( ":jqmData(role='button-bg')" )
+					.wrapAll( "<div class='popup-button-bg'></div>" );
+			popup.find( ":jqmData(role='check-bg')" )
+					.wrapAll( "<div class='popup-check-bg'></div>" );
+			popup.find( ":jqmData(role='scroller-bg')" )
+					.addClass( "popup-scroller-bg" );
+			popup.find( ":jqmData(role='text-bottom-bg')" )
+					.wrapAll( "<div class='popup-text-bottom-bg'></div>" );
+			popup.find( ":jqmData(role='text-left')" )
+					.wrapAll( "<div class='popup-text-left'></div>" );
+			popup.find( ":jqmData(role='text-right')" )
+					.wrapAll( "<div class='popup-text-right'></div>" );
+			popup.find( ":jqmData(role='progress-bg')" )
+					.wrapAll( "<div class='popup-progress-bg'></div>" );
+		},
+
+		_create: function () {
+			console.warn("popupwindow() was deprecated. use popup() instead.");
+			var thisPage = this.element.closest(":jqmData(role='page')"),
+				self = this;
+
+			if ( thisPage.length === 0 ) {
+				thisPage = $("body");
+			}
+
+			this._ui.placeholder =
+					$( "<div><!-- placeholder for " + this.element.attr("id") + " --></div>" )
+					.css("display", "none")
+					.insertBefore( this.element );
+
+			thisPage.append( this._ui.screen );
+			this._ui.container.insertAfter( this._ui.screen );
+			this._ui.container.append( this.element );
+
+			this._setStyle();
+
+			this._isOpen = false;
+
+			this._ui.screen.bind( "vclick", function ( e ) {
+				self.close();
+				return false;
+			} );
+
+			this.element.bind( "vclick", function ( e ) {
+				if ( $( e.target ).is("ui-btn-ctxpopup-close") ) {
+					self.close();
+				}
+			} );
+		},
+
+		destroy: function () {
+			this.element.insertBefore( this._ui.placeholder );
+
+			this._ui.placeholder.remove();
+			this._ui.container.remove();
+			this._ui.screen.remove();
+			this.element.triggerHandler("destroyed");
+			$.Widget.prototype.destroy.call( this );
+		},
+
+		_placementCoords: function ( x, y, cw, ch ) {
+			var screenHeight = $( window ).height(),
+				screenWidth = $( window ).width(),
+				halfheight = ch / 2,
+				maxwidth = parseFloat( this._ui.container.css( "max-width" ) ),
+				roomtop = y,
+				roombot = screenHeight - y,
+				newtop,
+				newleft;
+
+			if ( roomtop > ch / 2 && roombot > ch / 2 ) {
+				newtop = y - halfheight;
+			} else {
+				newtop = roomtop > roombot ? screenHeight - ch - 30 : 30;
+			}
+
+			if ( cw < maxwidth ) {
+				newleft = ( screenWidth - cw ) / 2;
+			} else {
+				newleft = x - cw / 2;
+
+				if ( newleft < 10 ) {
+					newleft = 10;
+				} else if ( ( newleft + cw ) > screenWidth ) {
+					newleft = screenWidth - cw - 10;
+				}
+			}
+
+			return { x : newleft, y : newtop };
+		},
+
+		_setPosition: function ( x_where, y_where ) {
+			var x = ( undefined === x_where ? $( window ).width()  / 2 : x_where ),
+				y = ( undefined === y_where ? $( window ).height() / 2 : y_where ),
+				coords,
+				ctxpopup = this.element.data("ctxpopup"),
+				popupWidth,
+				menuHeight,
+				menuWidth,
+				screenHeight,
+				screenWidth,
+				roomtop,
+				roombot,
+				halfheight,
+				maxwidth,
+				newtop,
+				newleft;
+
+			if ( !ctxpopup ) {
+				popupWidth = $( window ).width() * this.options.widthRatio;
+				this._ui.container.css( "width", popupWidth );
+
+				if ( this._ui.container.outerWidth() > $( window ).width() ) {
+					this._ui.container.css( {"max-width" : $( window ).width() - 30} );
+				}
+			}
+
+			coords = this._placementCoords( x, y,
+					this._ui.container.outerWidth(),
+					this._ui.container.outerHeight() );
+
+			menuHeight = this._ui.container.innerHeight();
+			menuWidth = this._ui.container.innerWidth();
+			screenHeight = $( window ).height();
+			screenWidth = $( window ).width();
+			roomtop = y;
+			roombot = screenHeight - y;
+			halfheight = menuHeight / 2;
+			maxwidth = parseFloat( this._ui.container.css( "max-width" ) );
+			newtop = ( screenHeight - menuHeight ) / 2;
+
+			if ( !maxwidth || menuWidth < maxwidth ) {
+				newleft = ( screenWidth - menuWidth ) / 2;
+			} else {
+				newleft = x - menuWidth / 2;
+
+				if ( newleft < 30 ) {
+					newleft = 30;
+				} else if ( ( newleft + menuWidth ) > screenWidth ) {
+					newleft = screenWidth - menuWidth - 30;
+				}
+			}
+
+			if ( ctxpopup ) {
+				newtop = coords.y;
+				newleft = coords.x;
+			}
+
+			this._ui.container.css({
+				top: newtop,
+				left: newleft
+			});
+
+			this._ui.screen.css( "height", screenHeight );
+		},
+		open: function ( x_where, y_where, backgroundclose ) {
+			var self = this,
+				zIndexMax = 0;
+
+			if ( this._isOpen || this.options.disabled ) {
+				return;
+			}
+
+			$( document ).find("*").each( function () {
+				var el = $( this ),
+					zIndex = parseInt( el.css("z-index"), 10 );
+
+				if ( !( el.is( self._ui.container ) ||
+						el.is( self._ui.screen ) ||
+						isNaN( zIndex ))) {
+					zIndexMax = Math.max( zIndexMax, zIndex );
+				}
+			} );
+
+			this._ui.screen.css( "height", $( window ).height() );
+
+			if ( backgroundclose ) {
+				this._ui.screen.css( "opacity", 0 )
+						.removeClass("ui-screen-hidden");
+			} else {
+				this._ui.removeClass("ui-screen-hidden");
+
+				if ( this.options.fade ) {
+					this._ui.screen.animate( {opacity: this.options.opacity}, "fast" );
+				} else {
+					this._ui.screen.css( {opacity: this.options.opacity} );
+				}
+			}
+
+			this._setPosition( x_where, y_where );
+
+			this.element.trigger("popupbeforeposition");
+
+			this._ui.container
+				.removeClass("ui-selectmenu-hidden")
+				.addClass("in")
+				.animationComplete( function () {
+					self.element.trigger("popupafteropen");
+				} );
+
+			this._isOpen = true;
+
+			if ( !this._reflow ) {
+				this._reflow = function () {
+					if ( !self._isOpen ) {
+						return;
+					}
+
+					self._setPosition( x_where, y_where );
+				};
+
+				$( window ).bind( "resize", this._reflow );
+			}
+		},
+
+		close: function () {
+			if ( !this._isOpen ) {
+				return;
+			}
+
+			if ( this._reflow ) {
+				$( window ).unbind( "resize", this._reflow );
+				this._reflow = null;
+			}
+
+			var self = this,
+				hideScreen = function () {
+					self._ui.screen.addClass("ui-screen-hidden");
+					self._isOpen = false;
+				};
+
+			this._ui.container.removeClass("in").addClass("reverse out");
+
+			if ( this.options.transition === "none" ) {
+				this._ui.container
+					.addClass("ui-selectmenu-hidden")
+					.removeAttr("style");
+				this.element.trigger("popupafterclose");
+			} else {
+				this._ui.container.animationComplete( function () {
+					self._ui.container
+						.removeClass("reverse out")
+						.addClass("ui-selectmenu-hidden")
+						.removeAttr("style");
+					self.element.trigger("popupafterclose");
+				} );
+			}
+
+			if ( this.options.fade ) {
+				this._ui.screen.animate( {opacity: 0}, "fast", hideScreen );
+			} else {
+				hideScreen();
+			}
+		},
+
+		_realSetTheme: function ( dst, theme ) {
+			var classes = ( dst.attr("class") || "" ).split(" "),
+				alreadyAdded = true,
+				currentTheme = null,
+				matches;
+
+			while ( classes.length > 0 ) {
+				currentTheme = classes.pop();
+				matches = currentTheme.match(/^ui-body-([a-z])$/);
+
+				if ( matches && matches.length > 1 ) {
+					currentTheme = matches[1];
+					break;
+				} else {
+					currentTheme = null;
+				}
+			}
+
+			dst.removeClass( "ui-body-" + currentTheme );
+			if ( ( theme || "" ).match(/[a-z]/) ) {
+				dst.addClass( "ui-body-" + theme );
+			}
+		},
+
+		_setTheme: function ( value ) {
+			this._realSetTheme( this.element, value );
+			this.options.theme = value;
+			this.element.attr( "data-" + ( $.mobile.ns || "" ) + "theme", value );
+		},
+
+		_setOverlayTheme: function ( value ) {
+			this._realSetTheme( this._ui.container, value );
+			this.options.overlayTheme = value;
+			this.element.attr( "data-" + ( $.mobile.ns || "" ) + "overlay-theme", value );
+		},
+
+		_setShadow: function ( value ) {
+			this.options.shadow = value;
+			this.element.attr( "data-" + ( $.mobile.ns || "" ) + "shadow", value );
+			this._ui.container[value ? "addClass" : "removeClass"]("ui-overlay-shadow");
+		},
+
+		_setCorners: function ( value ) {
+			this.options.corners = value;
+			this.element.attr( "data-" + ( $.mobile.ns || "" ) + "corners", value );
+			this._ui.container[value ? "addClass" : "removeClass"]("ui-corner-all");
+		},
+
+		_setFade: function ( value ) {
+			this.options.fade = value;
+			this.element.attr( "data-" + ( $.mobile.ns || "" ) + "fade", value );
+		},
+
+		_setTransition: function ( value ) {
+			this._ui.container
+				.removeClass( this.options.transition || "" )
+				.addClass( value );
+			this.options.transition = value;
+			this.element.attr( "data-" + ( $.mobile.ns || "" ) + "transition", value );
+		},
+
+		_setDisabled: function ( value ) {
+			$.Widget.prototype._setOption.call( this, "disabled", value );
+			if ( value ) {
+				this.close();
+			}
+		}
+	});
+
+	$.tizen.popupwindow.bindPopupToButton = function ( btn, popup ) {
+		if ( btn.length === 0 || popup.length === 0 ) {
+			return;
+		}
+
+		var btnVClickHandler = function ( e ) {
+			if ( !popup.jqmData("overlay-theme-set") ) {
+				popup.popupwindow( "option", "overlayTheme", btn.jqmData("theme") );
+			}
+
+			popup.popupwindow( "open",
+				btn.offset().left + btn.outerWidth()  / 2,
+				btn.offset().top  + btn.outerHeight() / 2 );
+
+			return false;
+		};
+
+		if ( ( popup.popupwindow("option", "overlayTheme") || "" ).match(/[a-z]/) ) {
+			popup.jqmData( "overlay-theme-set", true );
+		}
+
+		btn
+			.attr({
+				"aria-haspopup": true,
+				"aria-owns": btn.attr("href")
+			})
+			.removeAttr("href")
+			.bind( "vclick", btnVClickHandler );
+
+		popup.bind( "destroyed", function () {
+			btn.unbind( "vclick", btnVClickHandler );
+		} );
+	};
+
+	$( document ).bind( "pagecreate create", function ( e ) {
+		$( $.tizen.popupwindow.prototype.options.initSelector, e.target )
+			.not(":jqmData(role='none'), :jqmData(role='nojs')")
+			.popupwindow();
+
+		$( "a[href^='#']:jqmData(rel='popupwindow')", e.target ).each( function () {
+			$.tizen.popupwindow.bindPopupToButton( $( this ), $( $( this ).attr("href") ) );
+		});
+	});
+}( jQuery ));
+
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+} );
+//>>excludeEnd("jqmBuildExclude");

http://git-wip-us.apache.org/repos/asf/cordova-tizen/blob/4ebce38e/samples/TizenWebUI-sample-v1/tizen-web-ui-fw/latest/js/modules/widgets/jquery.mobile.tizen.progress.js
----------------------------------------------------------------------
diff --git a/samples/TizenWebUI-sample-v1/tizen-web-ui-fw/latest/js/modules/widgets/jquery.mobile.tizen.progress.js b/samples/TizenWebUI-sample-v1/tizen-web-ui-fw/latest/js/modules/widgets/jquery.mobile.tizen.progress.js
new file mode 100644
index 0000000..3ef742f
--- /dev/null
+++ b/samples/TizenWebUI-sample-v1/tizen-web-ui-fw/latest/js/modules/widgets/jquery.mobile.tizen.progress.js
@@ -0,0 +1,217 @@
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Shows progressbar or progress circle
+//>>label: Progress
+//>>group: Tizen:Widgets
+
+define( [ 
+	'jquery',
+	'../jquery.mobile.tizen.core'
+	], function ( jQuery ) {
+
+//>>excludeEnd("jqmBuildExclude");
+
+/* ***************************************************************************
+ * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * 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
+ * Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+ * DEALINGS IN THE SOFTWARE.
+ * ***************************************************************************
+ *
+ *	Author: Minkyu Kang <mk...@samsung.com>
+ *	Author: Koeun Choi <ko...@samsung.com>
+ */
+
+/*
+ * Progress widget
+ *
+ * HTML Attributes
+ *
+ *  data-role: set to 'progress'.
+ *  data-style: 'circle' or 'pending'.
+ *
+ * APIs
+ *
+ *  show(): show the progress.
+ *  hide(): hide the progress.
+ *  running(boolean): start or stop the running.
+ *
+ * Events
+ *
+ *  N/A
+ *
+ * Examples
+ *
+ * <li data-role="list-divider">Progress Pending</li>
+ * <li>
+ *	<div data-role="progress" data-style="pending" id="pending"></div>
+ * </li>
+ * <li data-role="list-divider">Progress ~ing</li>
+ * <li>
+ *	<div data-role="progress" data-style="circle" id="progress"></div>Loading..
+ * </li>
+ *
+ * $("#pending").progress( "running", true );
+ * $("#progress").progress( "running", true );
+ *
+ */
+
+/**
+	@class Progress
+	The progress widget shows that an operation is in progress. <br/>To add a progress widget to the application, use the following code:
+
+		<div data-role="progress" data-style="circle"></div>
+*/
+/**
+	@property {String} data-style
+	Sets the style of the progress widget. The style options are pending (pending progress style) and circle (circular progress status style).
+*/
+/**
+	@method running
+	The running method is used to set the current running state of the pending or circular progress widget:
+
+		<div id="foo" data-role="progress" data-style="pending"></div>
+		$("#foo").progress("running", true);
+*/
+/**
+	@method show
+	The show method is used to show the pending or circular progress widget:
+
+		<div id="foo" data-role="progress" data-style="pending"></div>
+		$("#foo").progress("show");
+*/
+/**
+	@method hide
+	The show method is used to hide the pending or circular progress widget:
+
+		<div id="foo" data-role="progress" data-style="pending"></div>
+		$("#foo").progress("hide");
+*/
+
+(function ( $, window, undefined ) {
+	$.widget( "tizen.progress", $.mobile.widget, {
+		options: {
+			style: "circle",
+			running: false
+		},
+
+		show: function () {
+			$( this.element ).show();
+		},
+
+		hide: function () {
+			$( this.element ).hide();
+		},
+
+		_start: function () {
+			if ( !this.init ) {
+				$( this.element ).append( this.html );
+				this.init = true;
+			}
+
+			this.show();
+
+			$( this.element )
+				.find( ".ui-progress-" + this.options.style )
+				.addClass( this.runningClass );
+		},
+
+		_stop: function () {
+			$( this.element )
+				.find( ".ui-progress-" + this.options.style )
+				.removeClass( this.runningClass );
+		},
+
+		running: function ( running ) {
+			if ( running === undefined ) {
+				return this.options.running;
+			}
+
+			this._setOption( "running", running );
+		},
+
+		_setOption: function ( key, value ) {
+			if ( key === "running" ) {
+				if ( typeof value !== "boolean" ) {
+					window.alert( "running value MUST be boolean type!" );
+					return;
+				}
+
+				this.options.running = value;
+				this._refresh();
+			}
+		},
+
+		_refresh: function () {
+			if ( this.options.running ) {
+				this._start();
+			} else {
+				this._stop();
+			}
+		},
+
+		_create: function () {
+			var self = this,
+				element = this.element,
+				style = element.jqmData( "style" ),
+				_html,
+				runningClass;
+
+			if ( style ) {
+				this.options.style = style;
+			} else {
+				style = this.options.style;
+			}
+
+			if ( style == "circle" ) {
+				$( this.element ).addClass("ui-progress-container-circle");
+
+				_html =	'<div class="ui-progress-circle"></div>';
+			} else if ( style === "pending" ) {
+				$( this.element ).addClass("ui-progressbar");
+
+				_html = '<div class="ui-progressbar-bg">' +
+						'<div class="ui-progress-pending"></div>' +
+					'</div>';
+			}
+
+			this.html = $( _html );
+
+			runningClass = "ui-progress-" + style + "-running";
+
+			$.extend( this, {
+				init: false,
+				runningClass: runningClass
+			} );
+
+			if ( style === "pending" ) {
+				$( this.element ).append( this.html );
+				this.init = true;
+			}
+
+			this._refresh();
+		}
+	} ); /* End of widget */
+
+	$( document ).bind( "pagecreate create", function ( e ) {
+		$( e.target ).find( ":jqmData(role='progress')" ).progress();
+	} );
+}( jQuery, this ));
+
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+} );
+//>>excludeEnd("jqmBuildExclude");

http://git-wip-us.apache.org/repos/asf/cordova-tizen/blob/4ebce38e/samples/TizenWebUI-sample-v1/tizen-web-ui-fw/latest/js/modules/widgets/jquery.mobile.tizen.progressbar.js
----------------------------------------------------------------------
diff --git a/samples/TizenWebUI-sample-v1/tizen-web-ui-fw/latest/js/modules/widgets/jquery.mobile.tizen.progressbar.js b/samples/TizenWebUI-sample-v1/tizen-web-ui-fw/latest/js/modules/widgets/jquery.mobile.tizen.progressbar.js
new file mode 100644
index 0000000..f5863cf
--- /dev/null
+++ b/samples/TizenWebUI-sample-v1/tizen-web-ui-fw/latest/js/modules/widgets/jquery.mobile.tizen.progressbar.js
@@ -0,0 +1,155 @@
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Shows progressbar
+//>>label: Progressbar
+//>>group: Tizen:Widgets
+
+define( [
+	'jquery',
+	'../jquery.mobile.tizen.core'
+	], function ( jQuery ) {
+
+//>>excludeEnd("jqmBuildExclude");
+
+/*
+ * jQuery UI Progressbar @VERSION
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Licensed under the MIT license.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Progressbar
+ *
+ * Depends:
+ *   jquery.ui.core.js
+ *   jquery.ui.widget.js
+ * Original file:
+ *   jquery.ui.progressbar.js
+ */
+/* This is from jquery ui plugin - progressbar 11/16/2011 */
+
+
+/**
+	@class ProgressBar
+	The progress bar widget shows a control that indicates the progress percentage of an on-going operation. This widget can be scaled to fit inside a parent container.
+
+	To add a progress bar widget to the application, use the following code:
+
+		<div id="foo" data-role="progressbar"</div>
+*/
+/**
+	@event change
+	The progress bar can define a callback for the change event, which is fired when the progress value is changed:
+		<div id="foo" data-role="progressbar"></div>
+		$("#foo").bind("change", function (ev, val) {
+			Console.log("Value is changed to " + val);
+		});
+*/
+/**
+	@method value
+	You can use the value method with the pickers to set or get the current default progress bar value:
+
+		<div id="foo" data-role="progressbar"></div>
+		var oldVal = $("#foo").progressbar("value");
+		$("#foo").progressbar("value", 50);
+*/
+
+(function ( $, window, undefined ) {
+
+	$.widget( "tizen.progressbar", $.mobile.widget, {
+		options: {
+			value: 0,
+			max: 100
+		},
+
+		min: 0,
+
+		_create: function () {
+			this.element
+				.addClass( "ui-progressbar" )
+				.attr( {
+					role: "progressbar",
+					"aria-valuemin": this.min,
+					"aria-valuemax": this.options.max,
+					"aria-valuenow": this._value()
+				} );
+
+			this.valueDiv = $( "<div class='ui-progressbar-value'></div>" )
+				.appendTo( this.element );
+
+			this.valueDiv.wrap("<div class='ui-progressbar-bg'></div>");
+
+			this.oldValue = this._value();
+			this._refreshValue();
+		},
+
+		_destroy: function () {
+			this.element
+				.removeClass( "ui-progressbar" )
+				.removeAttr( "role" )
+				.removeAttr( "aria-valuemin" )
+				.removeAttr( "aria-valuemax" )
+				.removeAttr( "aria-valuenow" );
+
+			this.valueDiv.remove();
+		},
+
+		value: function ( newValue ) {
+			if ( newValue === undefined ) {
+				return this._value();
+			}
+
+			this._setOption( "value", newValue );
+			return this;
+		},
+
+		_setOption: function ( key, value ) {
+			if ( key === "value" ) {
+				this.options.value = value;
+				this._refreshValue();
+				if ( this._value() === this.options.max ) {
+					this.element.trigger( "complete" );
+				}
+			}
+			// jquery.ui.widget.js MUST be updated to new version!
+			//this._super( "_setOption", key, value );
+		},
+
+		_value: function () {
+			var val = this.options.value;
+			// normalize invalid value
+			if ( typeof val !== "number" ) {
+				val = 0;
+			}
+			return Math.min( this.options.max, Math.max( this.min, val ) );
+		},
+
+		_percentage: function () {
+			return 100 * this._value() / this.options.max;
+		},
+
+		_refreshValue: function () {
+			var value = this.value(),
+				percentage = this._percentage();
+
+			if ( this.oldValue !== value ) {
+				this.oldValue = value;
+				this.element.trigger( "change" );
+			}
+
+			this.valueDiv
+				.toggle( value > this.min )
+				.width( percentage.toFixed(0) + "%" );
+			this.element.attr( "aria-valuenow", value );
+		}
+	} );
+
+	// auto self-init widgets
+	$( document ).bind( "pagecreate", function ( e ) {
+		$( e.target ).find( ":jqmData(role='progressbar')" ).progressbar();
+	} );
+
+}( jQuery, this ) );
+
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+} );
+//>>excludeEnd("jqmBuildExclude");

http://git-wip-us.apache.org/repos/asf/cordova-tizen/blob/4ebce38e/samples/TizenWebUI-sample-v1/tizen-web-ui-fw/latest/js/modules/widgets/jquery.mobile.tizen.scrollview.handler.js
----------------------------------------------------------------------
diff --git a/samples/TizenWebUI-sample-v1/tizen-web-ui-fw/latest/js/modules/widgets/jquery.mobile.tizen.scrollview.handler.js b/samples/TizenWebUI-sample-v1/tizen-web-ui-fw/latest/js/modules/widgets/jquery.mobile.tizen.scrollview.handler.js
new file mode 100644
index 0000000..6a8201a
--- /dev/null
+++ b/samples/TizenWebUI-sample-v1/tizen-web-ui-fw/latest/js/modules/widgets/jquery.mobile.tizen.scrollview.handler.js
@@ -0,0 +1,349 @@
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Shows a scroll-handler with a scrollview
+//>>label: Scrollview Handler
+//>>group: Tizen:Widgets
+
+define( [
+	'jquery',
+	'../jquery.mobile.tizen.core',
+	'../jquery.mobile.tizen.scrollview'
+	], function ( jQuery ) {
+
+//>>excludeEnd("jqmBuildExclude");
+
+/* ***************************************************************************
+ * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * 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
+ * Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+ * DEALINGS IN THE SOFTWARE.
+ * ***************************************************************************
+ *
+ * Authors: Wonseop Kim ( wonseop.kim@samsung.com )
+*/
+
+/**
+ * "Handler" is a widget helping a user to scroll a window or panel.
+ * It is different from the scrollview feature in that the handler has a fixed size
+ * and disappears when a scroll size is smaller than a parent window's size.
+ * If the handler widget is activated, a scroll bar on the screen will be deactivated.
+ * The handler widget supports scrolling up and down and indicates the position of the scrolled window.
+ *
+ * HTML Attributes:
+ *
+ *		data-handler : This attribute is indicating that whether enable.
+ *						If you want to use, you will set 'true'.
+ *		data-handler-theme : Set the widget theme ( optional )
+ *
+ * APIs:
+ *
+ *		enableHandler ( boolean )
+ *			: Get or set the use of handler widget.
+ *			If the value is "true", it will be run handler widget.
+ *			If the value is "false", it will be not run handler widget.
+ *			If no value is specified, will act as a getter.
+ *
+ * Events:
+ *
+ * Examples:
+ *
+ *		<div data-role="content" data-scroll="y" data-handler="true">
+ *			<ul data-role="listview">
+ *				<li data-role="list-divider">A</li>
+ *				<li><a href="#">Adam Kinkaid</a></li>
+ *					...
+ *			</ul>
+ *		</div>
+ */
+
+/**
+	@class handler
+	The handler widget enables the user to vertically scroll through a page or panel using a fixed-size handle. The widget indicates the position of the scrolled window, and only appears on the screen if the parent page or panel's scroll size is larger than the screen size. <br/> To add a handler widget to the application, use the following code:
+
+		<div data-role="content" data-scroll="y" data-handler="true">
+			<ul data-role="listview">
+				<li data-role="list-divider">A</li>
+				<li><a href="#">Adam Kinkaid</a></li>
+					...
+			</ul>
+		</div>
+	
+	You can use the enableHandler method with the handler widget to get (if no value is defined) or set the handler usage status. If the [enable] value is true, the handler is enabled; otherwise the handler is not used.
+
+		$("#.selector").scrollview("enableHandler", [enable]);
+*/
+/**
+	@property {Boolean} data-handler
+	Enables the handler widget. The value must be set to true.
+*/
+/**
+	@property {String} data-handler-theme
+	Sets the handler widget theme.
+*/
+( function ( $, document, undefined ) {
+	// The options of handler in scrollview
+	$.tizen.scrollview.prototype.options.handler = false;
+	$.tizen.scrollview.prototype.options.handlerTheme = "s";
+
+	var originSetOption = $.tizen.scrollview.prototype._setOption,
+		createHandler = function ( target ) {
+			var $view = target,
+				prefix = "<div class=\"ui-handler ui-handler-direction-",
+				suffix = "\"><div class=\"ui-handler-track\"><div class=\"ui-handler-handle\"><div class=\"ui-handler-thumb\"></div></div></div></div>",
+				scrollview = $view.data( "scrollview" ),
+				options = scrollview.options,
+				direction = options.direction,
+				parentTheme = $.mobile.getInheritedTheme( scrollview, "s" ),
+				theme = options.theme || parentTheme,
+				isHorizontal = ( scrollview.options.direction === "x" ),
+				_$view = scrollview._$view,
+				_$clip = scrollview._$clip,
+				scrollbar = $view.find( ".ui-scrollbar" ),
+				handler = null,
+				handlerHandle = null,
+				viewLength = 0,
+				clipLength = 0,
+				handlerHeight = 0,
+				handlerMargin = 0,
+				trackLength = 0,
+				moveTimer,
+				isTouchable = $.support.touch,
+				dragStartEvt = ( isTouchable ? "touchstart" : "mousedown" ) + ".handler",
+				dragMoveEvt = ( isTouchable ? "touchmove" : "mousemove" ) + ".handler",
+				dragStopEvt = ( isTouchable ? "touchend" : "mouseup" ) + ".handler",
+				dragLeaveEvt = ( isTouchable ? " touchleave" : " mouseleave" ) + ".handler",
+				calculateLength = function () {
+					clipLength = ( isHorizontal ? _$clip.width() : _$clip.height() );
+					viewLength = ( isHorizontal ? _$view.width() : _$view.height() ) - clipLength;
+					trackLength = clipLength - handlerHeight - handlerMargin * 2;
+				},
+				setHanderPostion = function ( scrollPos ) {
+					var handlerPos = Math.round( ( isHorizontal ? scrollPos.x : scrollPos.y ) / viewLength * trackLength );
+					handlerHandle[0].style[ ( isHorizontal ? "left" : "top" ) ] = handlerPos + "px";
+				},
+				stopHandlerScroll = function () {
+					$( document ).unbind( ".handler" );
+					$view.moveData = null;
+					_$view.trigger( "scrollstop" );
+				};
+
+			if ( $view.find( ".ui-handler-handle" ).length !== 0 || typeof direction !== "string" ) {
+				return;
+			}
+
+			handler = $( [ prefix, direction, suffix ].join( "" ) ).appendTo( $view.addClass( " ui-handler-" + theme ) );
+			handlerHandle = $view.find( ".ui-handler-handle" ).attr( {
+				"tabindex" : "0",
+				"aria-label" : ( isHorizontal ? "Horizontal handler, double tap and move to scroll" : "Verticalhandler, double tap and move to scroll" )
+			}).hide();
+			handlerHeight = ( isHorizontal ? handlerHandle.width() : handlerHandle.height() );
+			handlerMargin = ( isHorizontal ? parseInt( handler.css( "right" ), 10 ) : parseInt( handler.css( "bottom" ), 10 ) );
+
+			$.extend( $view, {
+				moveData : null
+			});
+
+			// handler drag
+			handlerHandle.bind( dragStartEvt, {
+				e : handlerHandle[0]
+			}, function ( event ) {
+				scrollview._stopMScroll();
+
+				var target = event.data.e,
+					t = ( isTouchable ? event.originalEvent.targetTouches[0] : event );
+
+				target.style.opacity = 1.0;
+
+				$view.moveData = {
+					target : target,
+					X : parseInt( target.style.left, 10 ) || 0,
+					Y : parseInt( target.style.top, 10 ) || 0,
+					pX : t.pageX,
+					pY : t.pageY
+				};
+				calculateLength();
+
+				_$view.trigger( "scrollstart" );
+
+				if ( !isTouchable ) {
+					event.preventDefault();
+				}
+
+				$( document ).bind( dragMoveEvt, function ( event ) {
+					var moveData = $view.moveData,
+						target = moveData.target,
+						handlePos = 0,
+						scrollPos = 0,
+						t = ( isTouchable ? event.originalEvent.targetTouches[0] : event );
+
+					handlePos = ( isHorizontal ? moveData.X + t.pageX - moveData.pX : moveData.Y + t.pageY - moveData.pY );
+
+					if ( handlePos < 0 ) {
+						handlePos = 0;
+					}
+
+					if ( handlePos > trackLength ) {
+						handlePos = trackLength;
+					}
+					scrollPos = - Math.round( handlePos / trackLength * viewLength );
+
+					if ( isHorizontal ) {
+						scrollview._setScrollPosition( scrollPos, 0 );
+						target.style.left = handlePos + "px";
+					} else {
+						scrollview._setScrollPosition( 0, scrollPos );
+						target.style.top = handlePos + "px";
+					}
+
+					event.preventDefault();
+				}).bind( dragStopEvt + dragLeaveEvt, function ( event ) {
+					stopHandlerScroll();
+				});
+			});
+
+			_$view.bind( dragStopEvt, function ( event ) {
+				stopHandlerScroll();
+			});
+
+			$view.bind( "scrollstart", function ( event ) {
+				if ( !scrollview.enableHandler() ) {
+					return;
+				}
+
+				calculateLength();
+
+				if ( viewLength < 0 || clipLength < handlerHeight ) {
+					if ( scrollbar.is( ":hidden" ) ) {
+						scrollbar.show();
+					}
+					return;
+				}
+
+				if ( scrollbar.is( ":visible" ) ) {
+					scrollbar.hide();
+				}
+
+				if ( moveTimer ) {
+					clearInterval( moveTimer );
+					moveTimer = undefined;
+				}
+
+				handler.addClass( "ui-handler-visible" );
+				handlerHandle.stop( true, true )
+							.fadeIn();
+			}).bind( "scrollupdate", function ( event, data ) {
+				if ( !scrollview.enableHandler() || viewLength < 0 || clipLength < handlerHeight ) {
+					return;
+				}
+
+				setHanderPostion( scrollview.getScrollPosition() );
+			}).bind( "scrollstop", function ( event ) {
+				if ( !scrollview.enableHandler() || viewLength < 0 || clipLength < handlerHeight ) {
+					return;
+				}
+
+				moveTimer = setInterval( function () {
+					setHanderPostion( scrollview.getScrollPosition() );
+					if ( !scrollview._gesture_timer ) {
+						clearInterval( moveTimer );
+						moveTimer = undefined;
+					}
+				}, 10 );
+
+				if ( scrollview._handlerTimer ) {
+					clearTimeout( scrollview._handlerTimer );
+					scrollview._handlerTimer = 0;
+				}
+				scrollview._handlerTimer = setTimeout( function () {
+					if ( scrollview._timerID === 0 && $view.moveData === null ) {
+						handlerHandle.stop( true, true )
+							.css( "opacity", 1.0 )
+							.fadeOut( function () {
+								handler.removeClass( "ui-handler-visible" );
+							});
+						scrollview._handlerTimer = 0;
+					}
+				}, 1000 );
+			}).bind( "mousewheel", function ( event ) {
+				handler.removeClass( "ui-handler-visible" );
+				setHanderPostion( scrollview.getScrollPosition() );
+			});
+		};
+
+	$.extend( $.tizen.scrollview.prototype, {
+		enableHandler: function ( enabled ) {
+			if ( typeof enabled === 'undefined' ) {
+				return this.options.handler;
+			}
+
+			this.options.handler = !!enabled;
+
+			var $view = this.element;
+			if ( this.options.handler ) {
+				if ( $view.find( ".ui-handler" ).length === 0 ) {
+					createHandler( $view );
+				}
+
+				$view.find( ".ui-scrollbar" ).hide();
+				$view.find( ".ui-handler" ).show();
+			} else {
+				$view.find( ".ui-handler" ).removeClass( "ui-handler-visible" ).hide();
+				$view.find( ".ui-scrollbar" ).show();
+			}
+		},
+
+		_setHandlerTheme: function ( handlerTheme ) {
+			if ( !handlerTheme ) {
+				return;
+			}
+
+			var oldClass = "ui-handler-" + this.options.handlerTheme,
+				newClass = "ui-handler-" + handlerTheme;
+
+			this.element.removeClass( oldClass ).addClass( newClass );
+			this.options.handlerTheme = handlerTheme;
+		},
+
+		_setOption: function ( key, value ) {
+			switch ( key ) {
+			case "handler":
+				this.enableHandler( value );
+				break;
+			case "handlerTheme":
+				this._setHandlerTheme( value );
+				break;
+			default:
+				originSetOption.call( this, key, value );
+			}
+		},
+
+		_handlerTimer : 0
+	});
+
+	$( document ).delegate( ":jqmData(scroll)", "scrollviewcreate", function () {
+		var widget = $( this );
+		if ( widget.attr( "data-" + $.mobile.ns + "scroll" ) === "none"
+				|| widget.attr( "data-" + $.mobile.ns + "handler" ) !== "true" ) {
+			return;
+		}
+		widget.scrollview( "enableHandler", "true" );
+	});
+} ( jQuery, document ) );
+
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+} );
+//>>excludeEnd("jqmBuildExclude");

http://git-wip-us.apache.org/repos/asf/cordova-tizen/blob/4ebce38e/samples/TizenWebUI-sample-v1/tizen-web-ui-fw/latest/js/modules/widgets/jquery.mobile.tizen.searchbar.js
----------------------------------------------------------------------
diff --git a/samples/TizenWebUI-sample-v1/tizen-web-ui-fw/latest/js/modules/widgets/jquery.mobile.tizen.searchbar.js b/samples/TizenWebUI-sample-v1/tizen-web-ui-fw/latest/js/modules/widgets/jquery.mobile.tizen.searchbar.js
new file mode 100644
index 0000000..1981a19
--- /dev/null
+++ b/samples/TizenWebUI-sample-v1/tizen-web-ui-fw/latest/js/modules/widgets/jquery.mobile.tizen.searchbar.js
@@ -0,0 +1,324 @@
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Shows searchbar, for text search
+//>>label: Searchbar
+//>>group: Tizen:Widgets
+
+define( [
+	'jquery',
+	'../jquery.mobile.tizen.core',
+	'./jquery.mobile.tizen.pagelayout'
+], function ( jQuery ) {
+
+//>>excludeEnd("jqmBuildExclude");
+
+/* ***************************************************************************
+ * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * 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
+ * Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+ * DEALINGS IN THE SOFTWARE.
+ * ***************************************************************************
+ */
+/*
+* jQuery Mobile Framework : "textinput" plugin for text inputs, textareas
+* Copyright (c) jQuery Project
+* Licensed under the MIT license.
+* http://jquery.org/license
+* Authors: Jinhyuk Jun <ji...@samsung.com>
+*          Wongi Lee <wo...@samsung.com>
+*/
+
+/**
+ * Searchbar can be created using <input> element with type=search
+ * <input type="search" name="search" id="search1" value=""  />
+ *
+ * Searchbar can be inserted 3 cases
+ * content : seachbar behave same as content element
+ * header : searchbar placed below title(header), It doesn't move when scrolling page
+ * inside optionheader : Searchbar placed inside optionheader, searchbar can be seen only expand optionheader
+ *
+ * Examples:
+ *
+ *	HTML markup for creating Searchbar
+ *		<input type="search"/>
+ *
+ *	How to make searchbar in content
+ *		<input type="search" name="" id="" value=""  />
+ *
+ *	How to make cancel button in searchbar
+ *		<div data-role="header" data-position ="fixed" >
+ *			<h1>Searchbar</h1>
+ *			<input type="search" data-cancel-btn=true name="" id="" value=""  />
+ *		</div>
+ *
+ *	How to make icon in front of searchbar
+ *		<div data-role="header" data-position ="fixed" >
+ *			<h1>Searchbar</h1>
+ *			<input type="search" data-icon="call" name="" id="" value=""  />
+ *		</div>
+*/
+
+/**
+	@class SearchBar
+	The search bar widget is used to search for page content. This widget can be placed in the header, option header, or page content.
+
+	To add a search bar widget to the application, use the following code:
+
+		<label for="search-basic">Search Input:</label>
+		<input type="search" name="search" id="searc-basic" value="" data-mini="true" />
+
+	Tizen supports many search bar options as described in the jQueryMobile documentation for search bar options.
+	The search bar can define callbacks for events as described in the jQueryMobile documentation for search bar events.
+	You can use methods with the search bar as described in the jQueryMobile documentation for search bar methods.
+*/
+
+(function ( $, undefined ) {
+
+	$.widget( "tizen.searchbar", $.mobile.widget, {
+		options: {
+			theme: null,
+			initSelector: "input[type='search'],:jqmData(type='search'), input[type='tizen-search'],:jqmData(type='tizen-search')"
+		},
+
+		_create: function () {
+			var input = this.element,
+				o = this.options,
+				theme = o.theme || $.mobile.getInheritedTheme( this.element, "c" ),
+				themeclass  = " ui-body-" + theme,
+				focusedEl,
+				clearbtn,
+				cancelbtn,
+				defaultText,
+				defaultTextClass,
+				trimedText,
+				newClassName,
+				newStyle,
+				newDiv,
+				searchimage,
+				inputedText,
+				useCancelBtn = false,
+				frontIcon = false;
+
+			$( "label[for='" + input.attr( "id" ) + "']" ).addClass( "ui-input-text" );
+
+			if ( typeof input[0].autocorrect !== "undefined" && !$.support.touchOverflow ) {
+				// Set the attribute instead of the property just in case there
+				// is code that attempts to make modifications via HTML.
+				input[0].setAttribute( "autocorrect", "off" );
+				input[0].setAttribute( "autocomplete", "off" );
+			}
+
+			focusedEl = input.wrap( "<div class='ui-input-search ui-shadow-inset ui-corner-all ui-btn-shadow" + themeclass + "'></div>" ).parent();
+
+			if ( $( this.element ).data( "cancel-btn" ) === true ) {
+				useCancelBtn = true;
+				focusedEl.addClass( "ui-input-search-default" );
+			}
+			if ( $( this.element ).data( "icon" ) != undefined ) {
+				frontIcon = true;
+				focusedEl.addClass( "ui-search-bar-icon" );
+			}
+
+			clearbtn = $( "<a href='#' class='ui-input-clear' title='clear text'>clear text</a>" );
+
+			clearbtn.on( "click", function (event) {
+					if ( input.attr( "disabled" ) == "disabled" ) {
+						return false;
+					}
+					input
+						.val( "" )
+						.trigger('change')
+						.focus();
+					event.preventDefault();
+				})
+				.appendTo( focusedEl )
+				.buttonMarkup({
+					icon: "deleteSearch",
+					iconpos: "notext",
+					corners: true,
+					shadow: true
+				});
+
+			/* temporarily delete 06.28 Heeju Joo */
+			/*function toggleClear() {
+				setTimeout(function () {
+					clearbtn.toggleClass( "ui-input-clear-hidden", !input.val()
+				}, 0);
+			}*/
+
+
+			function showCancel() {
+				focusedEl
+					.addClass( "ui-input-search-default" )
+					.removeClass( "ui-input-search-wide" );
+				cancelbtn
+					.addClass( "ui-btn-cancel-show" )
+					.removeClass( "ui-btn-cancel-hide" );
+			}
+
+			function hideCancel() {
+				focusedEl
+					.addClass( "ui-input-search-wide" )
+					.removeClass( "ui-input-search-default" );
+				cancelbtn
+					.addClass( "ui-btn-cancel-hide" )
+					.removeClass( "ui-btn-cancel-show" );
+			}
+
+			function makeFrontIcon() {
+				var IconStyle = $( input ).jqmData( "icon" ),
+					frontIcon = $( "<div data-role='button' data-style='circle'></div>" );
+
+				frontIcon
+					.appendTo( focusedEl.parent() )
+					.buttonMarkup( {
+						icon: IconStyle,
+						iconpos: "notext",
+						corners: true,
+						shadow: true
+					} );
+				frontIcon.addClass( "ui-btn-search-front-icon" );
+			}
+			/* temporarily delete - 06.28 Heeju Joo */
+			/*toggleClear();
+
+			input.bind( 'paste cut keyup focus change blur', toggleClear );
+			*/
+
+			/* N_SE-43150 when input get event "focus", it show clearbtn */
+			input.bind( "focus", function() {
+				clearbtn.css("display", "inline-block");
+			});
+			//SLP --start search bar with cancel button
+			focusedEl.wrapAll( "<div class='input-search-bar'></div>" );
+			searchimage = $("<div class='ui-image-search'></div>").appendTo( focusedEl );
+
+			if ( frontIcon ) {
+				makeFrontIcon();
+			}
+
+			if ( useCancelBtn ) {
+				cancelbtn = $( "<div data-role='button' class='ui-input-cancel' title='clear text'>Cancel</div>" )
+					.bind('click', function ( event ) {
+						if ( input.attr( "disabled" ) == "disabled" ) {
+							return false;
+						}
+						event.preventDefault();
+						event.stopPropagation();
+
+						input
+							.val( "" )
+							.trigger('change')
+							.blur();
+
+						if ( useCancelBtn ) {
+							hideCancel();
+						}
+					} )
+					.appendTo( focusedEl.parent() )
+					.buttonMarkup( {
+						iconpos: "cancel",
+						corners: true,
+						shadow: true
+					} );
+			}
+
+			// Input Focused
+			input
+				.focus( function () {
+					if ( input.attr( "disabled" ) == "disabled" ) {
+						return false;
+					}
+					if ( useCancelBtn ) {
+						showCancel();
+					}
+					focusedEl.addClass( $.mobile.focusClass );
+				})
+				.blur(function () {
+					focusedEl.removeClass( $.mobile.focusClass );
+				});
+
+			// Default Text
+			defaultText = input.jqmData( "default-text" );
+
+			if ( ( defaultText != undefined ) && ( defaultText.length > 0 ) ) {
+				defaultTextClass = "ui-input-default-text";
+				trimedText = defaultText.replace(/\s/g, "");
+
+				/* Make new class for default text string */
+				newClassName = defaultTextClass + "-" + trimedText;
+				newStyle = $( "<style>" + '.' + newClassName + ":after" + "{content:" + "'" + defaultText + "'" + "}" + "</style>" );
+				$( 'html > head' ).append( newStyle );
+
+				/* Make new empty <DIV> for default text */
+				newDiv = $( "<div></div>" );
+
+				/* Add class and append new div */
+				newDiv.addClass( defaultTextClass );
+				newDiv.addClass( newClassName );
+				newDiv.tap( function ( event ) {
+					input.blur();
+					input.focus();
+				} );
+
+				input.parent().append( newDiv );
+
+				/* When focus, default text will be hide. */
+				input
+					.focus( function () {
+						input.parent().find( "div.ui-input-default-text" ).addClass( "ui-input-default-hidden" );
+					} )
+					.blur( function () {
+						var inputedText = input.val();
+						if ( inputedText.length > 0 ) {
+							input.parent().find( "div.ui-input-default-text" ).addClass( "ui-input-default-hidden" );
+						} else {
+							input.parent().find( "div.ui-input-default-text" ).removeClass( "ui-input-default-hidden" );
+						}
+					} );
+			}
+
+			if ( !input.attr("placeholder") ) {
+				input.attr( "placeholder", "Search" );
+			}
+		},
+
+		disable: function () {
+			this.element.attr( "disabled", true );
+			this.element.parent().addClass( "ui-disabled" );
+			$( this.element ).blur();
+			this.element.parent().parent().find(".ui-input-cancel").addClass( "ui-disabled" );
+		},
+
+		enable: function () {
+			this.element.attr( "disabled", false );
+			this.element.parent().removeClass( "ui-disabled" );
+			this.element.parent().parent().find(".ui-input-cancel").removeClass( "ui-disabled" );
+			$( this.element ).focus();
+		}
+	} );
+
+	//auto self-init widgets
+	$( document ).bind( "pagecreate create", function ( e ) {
+		$.tizen.searchbar.prototype.enhanceWithin( e.target );
+	} );
+
+}( jQuery ) );
+
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+} );
+//>>excludeEnd("jqmBuildExclude");

http://git-wip-us.apache.org/repos/asf/cordova-tizen/blob/4ebce38e/samples/TizenWebUI-sample-v1/tizen-web-ui-fw/latest/js/modules/widgets/jquery.mobile.tizen.slider.js
----------------------------------------------------------------------
diff --git a/samples/TizenWebUI-sample-v1/tizen-web-ui-fw/latest/js/modules/widgets/jquery.mobile.tizen.slider.js b/samples/TizenWebUI-sample-v1/tizen-web-ui-fw/latest/js/modules/widgets/jquery.mobile.tizen.slider.js
new file mode 100644
index 0000000..1e961cf
--- /dev/null
+++ b/samples/TizenWebUI-sample-v1/tizen-web-ui-fw/latest/js/modules/widgets/jquery.mobile.tizen.slider.js
@@ -0,0 +1,480 @@
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Shows slider bar to input number by dragging
+//>>label: Slider
+//>>group: Tizen:Widgets
+
+define( [ 
+	'jquery',
+	'../jquery.mobile.tizen.core'
+	], function ( jQuery ) {
+
+//>>excludeEnd("jqmBuildExclude");
+
+/*
+ * jQuery Mobile Widget @VERSION
+ *
+ * This software is licensed under the MIT licence (as defined by the OSI at
+ * http://www.opensource.org/licenses/mit-license.php)
+ *
+ * ***************************************************************************
+ * Copyright (c) 2000 - 2011 Samsung Electronics Co., 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"),
+ * 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
+ * Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+ * DEALINGS IN THE SOFTWARE.
+ * ***************************************************************************
+ *
+ * Authors: Max Waterman <ma...@intel.com>
+ * Authors: Minkyu Kang <mk...@samsung.com>
+ */
+
+/**
+ * tizenslider modifies the JQuery Mobile slider and is created in the same way.
+ *
+ * See the JQuery Mobile slider widget for more information :
+ *     http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-slider.html
+ *
+ * The JQuery Mobile slider option:
+ *     theme: specify the theme using the 'data-theme' attribute
+ *
+ * Options:
+ *     theme: string; the theme to use if none is specified using the 'data-theme' attribute
+ *            default: 'c'
+ *     popup: boolean; controls whether the popup is displayed or not
+ *                   specify if the popup is enabled using the 'data-popup' attribute
+ *                   set from javascript using .tizenslider('option','popup',newValue)
+ *
+ * Events:
+ *     changed: triggers when the value is changed (rather than when the handle is moved)
+ *
+ * Examples:
+ *
+ *     <a href="#" id="popupEnabler" data-role="button" data-inline="true">Enable popup</a>
+ *     <a href="#" id="popupDisabler" data-role="button" data-inline="true">Disable popup</a>
+ *     <div data-role="fieldcontain">
+ *         <input id="mySlider" data-theme='a' data-popup='false' type="range" name="slider" value="7" min="0" max="9" />
+ *     </div>
+ *     <div data-role="fieldcontain">
+ *         <input id="mySlider2" type="range" name="slider" value="77" min="0" max="777" />
+ *     </div>
+ *
+ *     // disable popup from javascript
+ *     $('#mySlider').tizenslider('option','popup',false);
+ *
+ *     // from buttons
+ *     $('#popupEnabler').bind('vclick', function() {
+ *         $('#mySlider').tizenslider('option','popup',true);
+ *     });
+ *     $('#popupDisabler').bind('vclick', function() {
+ *         $('#mySlider').tizenslider('option','popup',false);
+ *     });
+ */
+
+/**
+	@class Slider
+	The slider widget shows a control on the screen that you can use to change values by dragging a handle on a horizontal scale. Sliders can be used in Tizen as described in the jQueryMobile documentation for sliders.
+
+	To add a slider widget to the application, use the following code:
+
+		<input data-popup='false' type="range" name="slider" value="5" min="0" max="10" data-icon="text" data-text-left="Min" data-text-right="Max" />
+
+	The slider can define callbacks for events as described in the jQueryMobile documentation for slider events.
+	You can use methods with the slider as described in the jQueryMobile documentation for slider methods.
+*/
+/**
+	@property {String} data-icon
+	Defines the icon style for the slider ends. The icon options are bright, volume, and text.
+	The default value is text.
+*/
+/**
+	@property {Boolean} data-popup
+	Enables or disables a pop-up showing the current value while the handle is dragged.
+	The default value is true.
+*/
+/**
+	@property {String} data-text-left
+	Defines the text displayed on the left side of the slider.
+	The data-icon option must be set to text.
+*/
+/**
+	@property {String} data-text-right
+	Defines the text displayed on the right side of the slider.
+	The data-icon option must be set to text.
+*/
+
+(function ($, window, undefined) {
+	$.widget("tizen.tizenslider", $.mobile.widget, {
+		options: {
+			popup: true
+		},
+
+		popup: null,
+		handle: null,
+		handleText: null,
+
+		_create: function () {
+			this.currentValue = null;
+			this.popupVisible = false;
+
+			var self = this,
+				inputElement = $( this.element ),
+				slider,
+				popupEnabledAttr,
+				icon,
+				text_right,
+				text_left,
+				text_length,
+				elem_left,
+				elem_right,
+				margin_left,
+				margin_right,
+				_closePopup;
+
+			// apply jqm slider
+			inputElement.slider();
+
+			// hide the slider input element proper
+			inputElement.hide();
+
+			self.popup = $('<div class="ui-slider-popup"></div>');
+
+			// set the popup according to the html attribute
+			popupEnabledAttr = inputElement.jqmData('popup');
+			if ( popupEnabledAttr !== undefined ) {
+				self.options.popup = ( popupEnabledAttr == true );
+			}
+
+			// get the actual slider added by jqm
+			slider = inputElement.next('.ui-slider');
+
+			icon = inputElement.attr('data-icon');
+
+			// wrap the background
+			slider.wrap('<div class="ui-slider-container"></div>');
+
+			// get the handle
+			self.handle = slider.find('.ui-slider-handle');
+
+			// remove the rounded corners from the slider and its children
+			slider.removeClass('ui-btn-corner-all');
+			slider.find('*').removeClass('ui-btn-corner-all');
+
+			// add icon
+			switch ( icon ) {
+			case 'bright':
+			case 'volume':
+				elem_left = $('<div class="ui-slider-left-' + icon + '"></div>');
+				elem_right = $('<div class="ui-slider-right-' + icon + '"></div>');
+
+				slider.before( elem_left );
+				slider.after( elem_right );
+
+				margin_left = elem_left.width() + 16;
+				margin_right = elem_right.width() + 16;
+				break;
+
+			case 'text':
+				text_left = ( inputElement.attr('data-text-left') === undefined ) ? '' :
+						inputElement.attr('data-text-left').substring( 0, 3 );
+				text_right = ( inputElement.attr('data-text-right') === undefined ) ? '' :
+						inputElement.attr('data-text-right').substring( 0, 3 );
+
+				text_length = Math.max( text_left.length, text_right.length ) + 1;
+
+				margin_left = text_length + "rem";
+				margin_right = text_length + "rem";
+
+				elem_left = $('<div class="ui-slider-left-text" style="left:' +
+					-( text_length ) + 'rem; width:' + text_length + 'rem;">' +
+					'<span style="position:relative;top:0.4em;">' +
+					text_left +
+					'</span></div>');
+				elem_right = $('<div class="ui-slider-right-text" style="right:' +
+					-( text_length ) + 'rem; width:' + text_length + 'rem;">' +
+					'<span style="position:relative;top:0.4em;">' +
+					text_right +
+					'</span></div>');
+
+				slider.before( elem_left );
+				slider.after( elem_right );
+				break;
+			}
+
+			if ( icon ) {
+				slider.parent('.ui-slider-container').css({
+					"margin-left": margin_left,
+					"margin-right": margin_right
+				});
+			}
+
+			// add a popup element (hidden initially)
+			slider.parents(".ui-page").append( self.popup );
+			self.popup.hide();
+
+			// get the element where value can be displayed
+			self.handleText = slider.find('.ui-btn-text');
+
+			// set initial value
+			self.updateSlider();
+
+			_closePopup = function () {
+				slider.trigger( 'vmouseup' );
+			};
+
+			// bind to changes in the slider's value to update handle text
+			this.element.on('change', function () {
+				// 2013.05.31 heeju.joo
+				// for "refresh" method, (ex. $("input").val(5).slider("refresh"))
+				// conditional statement has been added ( DCM-1735 )
+				// if this function just call two functions like else statement,
+				// popup and handle displayed in the wrong position because when the variable popupVisible is false, updateSlider() does not call popupPosition().
+				if ( !self.popupVisible ) {
+					// it is trick to cheat self.updateSlider()
+					self.popupVisible = true;
+					// updateSlider make the position of handle right
+					self.updateSlider();
+					// for other method, popupVisible variable need to have original value.
+					self.popupVisible = false;
+				} else {
+					self.updateSlider();
+					self.showPopup();
+					$.mobile.$document.on( 'vmouseup.slider', _closePopup );
+				}
+			});
+
+			this.element.on( 'slidestart', function ( event ) {
+				self.updateSlider();
+				self.showPopup();
+				$.mobile.$document.on( 'vmouseup.slider', _closePopup );
+			});
+
+			// bind clicks on the handle to show the popup
+			self.handle.on('vmousedown', function () {
+				self.handle.addClass( "ui-slider-handle-press" );
+				self.showPopup();
+				$.mobile.$document.on( 'vmouseup.slider', _closePopup );
+			});
+
+			slider.on( 'vmousedown', function () {
+				self.updateSlider();
+				self.handle.addClass( "ui-slider-handle-press" );
+				self.showPopup();
+				$.mobile.$document.on( 'vmouseup.slider', _closePopup );
+			}).on( 'vmouseup', function () {
+				self.hidePopup();
+				self.handle.removeClass( "ui-slider-handle-press" );
+				$.mobile.$document.off('vmouseup.slider');
+			});
+
+			$.extend( this, {
+				_globalHandler: [
+					{
+						src: $( window ),
+						handler: {
+							orientationchange: _closePopup,
+						}
+					}
+				]
+			});
+
+			$.each( this._globalHandler, function ( idx, value ) {
+				value.src.bind( value.handler );
+			});
+
+		},
+
+		// position the popup
+		positionPopup: function () {
+			var dstOffset = this.handle.offset();
+
+			this.popup.offset({
+				left: dstOffset.left + ( this.handle.width() - this.popup.width() ) / 2,
+				top: dstOffset.top - this.popup.height()
+			});
+		},
+
+		// show value on the handle and in popup
+		updateSlider: function () {
+			var font_size,
+				font_length,
+				font_top,
+				padding_size,
+				newValue,
+				get_value_length = function ( v ) {
+					var val = Math.abs( v ),
+						len;
+
+					if ( val > 999 ) {
+						len = 4;
+					} else if ( val > 99 ) {
+						len = 3;
+					} else if ( val > 9 ) {
+						len = 2;
+					} else {
+						len = 1;
+					}
+
+					if ( v < 0 ) {
+						len++;
+					}
+
+					return len;
+				};
+
+			// remove the title attribute from the handle (which is
+			// responsible for the annoying tooltip); NB we have
+			// to do it here as the jqm slider sets it every time
+			// the slider's value changes :(
+			this.handle.removeAttr('title');
+
+			newValue = parseInt(this.element.val(), 10);
+
+			font_length = get_value_length( newValue );
+
+			if ( this.popupVisible ) {
+				this.positionPopup();
+
+				switch ( font_length ) {
+				case 1:
+				case 2:
+					font_size = '1.5rem';
+					padding_size = '0.15rem';
+					break;
+				case 3:
+					font_size = '1rem';
+					padding_size = '0.5rem';
+					break;
+				default:
+					font_size = '0.8rem';
+					padding_size = '0.5rem';
+					break;
+				}
+
+				this.popup.css({
+					"font-size": font_size,
+					"padding-top": padding_size
+				});
+			}
+
+			if ( newValue === this.currentValue ) {
+				return;
+			}
+
+			switch ( font_length ) {
+			case 1:
+				font_size = '0.95rem';
+				font_top = '0';
+				break;
+			case 2:
+				font_size = '0.85rem';
+				font_top = '-0.01rem';
+				break;
+			case 3:
+				font_size = '0.65rem';
+				font_top = '-0.1rem';
+				break;
+			default:
+				font_size = '0.45rem';
+				font_top = '-0.15rem';
+				break;
+			}
+
+			if ( font_size != this.handleText.css('font-size') ) {
+				this.handleText.css({
+					'font-size': font_size,
+					'top': font_top,
+					'position': 'relative'
+				});
+			}
+
+			this.currentValue = newValue;
+			this.handleText.text( newValue );
+			this.popup.html( newValue );
+
+			this.element.trigger( 'update', newValue );
+		},
+
+		// show the popup
+		showPopup: function () {
+			if ( !this.options.popup || this.popupVisible ) {
+				return;
+			}
+
+			this.popup.show();
+			this.popupVisible = true;
+		},
+
+		// hide the popup
+		hidePopup: function () {
+			if ( !this.options.popup || !this.popupVisible ) {
+				return;
+			}
+
+			this.popup.hide();
+			this.popupVisible = false;
+		},
+
+		_setOption: function (key, value) {
+			var needToChange = ( value !== this.options[key] );
+
+			if ( !needToChange ) {
+				return;
+			}
+
+			switch ( key ) {
+			case 'popup':
+				this.options.popup = value;
+
+				if ( this.options.popup) {
+					this.updateSlider();
+				} else {
+					this.hidePopup();
+				}
+
+				break;
+			}
+		}
+	});
+
+	// stop jqm from initialising sliders
+	$( document ).on( "pagebeforecreate", function ( e ) {
+		if ( $.data( window, "jqmSliderInitSelector" ) === undefined ) {
+			$.data( window, "jqmSliderInitSelector",
+				$.mobile.slider.prototype.options.initSelector );
+			$.mobile.slider.prototype.options.initSelector = null;
+		}
+	});
+
+	// initialise sliders with our own slider
+	$( document ).on( "pagecreate create", function ( e ) {
+		var jqmSliderInitSelector = $.data( window, "jqmSliderInitSelector" );
+		$( e.target ).find(jqmSliderInitSelector).each(function () {
+			var $this = $( this );
+			if ( $this.is("select") ) {
+				$this.slider();
+			} else {
+				$this.tizenslider();
+			}
+		});
+	});
+
+}( jQuery, this ));
+
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+} );
+//>>excludeEnd("jqmBuildExclude");