Slider tooltip: Converting back to extension.

Gabriel Schulhof · Gabriel Schulhof · commit 2ca372d6393f · 2013-02-21T02:02:22.000+02:00
diff --git a/css/structure/jquery.mobile.forms.slider.tooltip.css b/css/structure/jquery.mobile.forms.slider.tooltip.css
@@ -0,0 +1,5 @@
+.ui-slider-popup {
+	position: absolute !important;
+	text-align: center;
+	z-index: 100;
+}
diff --git a/css/structure/jquery.mobile.structure.css b/css/structure/jquery.mobile.structure.css
@@ -25,6 +25,7 @@
 @import url( "jquery.mobile.forms.rangeslider.css" );
 @import url( "jquery.mobile.listview.css" );
 @import url( "jquery.mobile.forms.slider.css" );
+@import url( "jquery.mobile.forms.slider.tooltip.css" );
 @import url( "jquery.mobile.table.css" );
 @import url( "jquery.mobile.table.columntoggle.css" );
 @import url( "jquery.mobile.table.reflow.css" );
diff --git a/css/themes/default/jquery.mobile.theme.css b/css/themes/default/jquery.mobile.theme.css
@@ -1155,6 +1155,22 @@ a.ui-link-inherit {
 	outline-style: auto;
 }
 
+/* slider tooltip
+-----------------------------------------------------------------------------------------------------------*/
+
+.ui-slider .ui-btn-inner {
+	padding: 5px 0 0 0 !important;
+	font-size:.8em;
+}
+
+.ui-slider-popup {
+	width: 64px;
+	height: 64px;
+	font-size: 36px;
+	padding-top: 14px;
+	opacity: 0.8;
+}
+
 /* Dimensions related to the popup arrow
 -----------------------------------------------------------------------------------------------------------*/
 /* desired triangle height: 10px */
diff --git a/docs/examples/slider/slider.tooltip.css b/docs/examples/slider/slider.tooltip.css
diff --git a/docs/examples/slider/tooltip.php b/docs/examples/slider/tooltip.php
@@ -8,11 +8,9 @@
 	<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
 	<link rel="shortcut icon" href="../../favicon.ico">
     <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
-	<link rel="stylesheet" href="slider.tooltip.css" id="tooltipStyle">
 	<script src="../../../js/jquery.js"></script>
 	<script src="../../_assets/js/"></script>
 	<script src="../../../js/"></script>
-	<script src="slider.tooltip.js" id="tooltipCode"></script>
 </head>
 <body>
 <div data-role="page" class="jqm-demos">
@@ -27,7 +25,7 @@
 
 		<h1>Slider tooltip extension</h1>
 
-        <div data-demo-html="true" data-demo-js="#tooltipCode" data-demo-css="#tooltipStyle">
+        <div data-demo-html="true">
             <form>
               <label for="slider-1">Slider with tooltip:</label>
               <input type="range" name="slider-1" id="slider-1" min="0" max="100" value="50" data-popup-enabled="true">
diff --git a/js/index.php b/js/index.php
@@ -52,6 +52,7 @@
 	'widgets/forms/checkboxradio.js',
 	'widgets/forms/button.js',
 	'widgets/forms/slider.js',
+	'widgets/forms/slider.tooltip.js',
 	'widgets/forms/rangeslider.js',
 	'widgets/forms/textinput.js',
 	'widgets/forms/select.custom.js',
diff --git a/js/widgets/forms/slider.tooltip.js b/js/widgets/forms/slider.tooltip.js
@@ -1,3 +1,12 @@
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Slider tooltip extension
+//>>label: Slidertooltip
+//>>group: Forms
+//>>css.theme: ../css/themes/default/jquery.mobile.theme.css
+//>>css.structure: ../css/structure/jquery.mobile.slider.tooltip.css
+
+define( [ "jquery", "./slider" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
 (function( $, undefined ) {
 
 $.widget( "mobile.slider", $.mobile.slider, {
@@ -109,3 +118,6 @@ $.widget( "mobile.slider", $.mobile.slider, {
 });
 
 })( jQuery );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
