Skip to content

Commit

Permalink
Add plugin for tips. update demo.
Browse files Browse the repository at this point in the history
  • Loading branch information
@simeydotme
simeydotme committed Mar 10, 2013
1 parent b8a98bd commit aeacad8
Show file tree
Hide file tree
Showing 6 changed files with 183 additions and 11 deletions.
3 changes: 2 additions & 1 deletion demo/css/main.css
View file
Expand Up @@ -66,7 +66,8 @@ textarea {


.wrapper { width: auto; margin: 50px auto; text-align: center; font-size: 14px; }
.wrapper .ui-slider-pips { margin: 20px!important; }
.wrapper .ui-slider-pips,
.wrapper .ui-slider-float { margin: 20px!important; }
.wrapper .ui-slider-horizontal.ui-slider-pips { width: 500px; display: block;}
.wrapper .ui-slider-vertical.ui-slider-pips { height: 200px; }

Expand Down
6 changes: 5 additions & 1 deletion demo/js/main.js
View file
Expand Up @@ -9,7 +9,7 @@ $(document).ready( function() {

$('.slider1').slider({ max: 100, min: 0, value: 0 }).slider('pips');

$('.slider2').slider({ max: 10, min: 0, value: 0 }).slider('pips', { rest: 'number' });
$('.slider2').slider({ max: 6, min: -6, value: 0 }).slider('pips', { rest: 'number' });

$('.slider3').slider({ max: 45, min: 0, range: true, values: [10, 35] }).slider('pips', { rest: false });

Expand All @@ -19,6 +19,10 @@ $(document).ready( function() {

$('.slider6').slider({ max: 10, min: 0, orientation: 'vertical' }).slider('pips', { first: 'pip', last: 'pip' });

$('.slider7').slider({ max: 10, min: 0, range: true, values: [2, 8] }).slider('float');

$('.slider8').slider({ max: 20, min: 0 }).slider('pips').slider('float');


});

Expand Down
29 changes: 25 additions & 4 deletions index.html
View file
Expand Up @@ -70,7 +70,7 @@ <h1>A Quick Demo of the <br>jQuery ui Slider Pips plugin extension</h1>
</td>
</tr>

<tr>
<tr class="divider">
<td><div class="slider4"></div></td>
<td>
<pre class="prettyprint linenums lang-js">$('.slider4').slider('pips', {
Expand All @@ -81,6 +81,8 @@ <h1>A Quick Demo of the <br>jQuery ui Slider Pips plugin extension</h1>
</td>
</tr>



<tr>
<td><div class="slider5"></div></td>
<td>
Expand All @@ -91,7 +93,7 @@ <h1>A Quick Demo of the <br>jQuery ui Slider Pips plugin extension</h1>
</td>
</tr>

<tr>
<tr class="divider">
<td><div class="slider6"></div></td>
<td>
<pre class="prettyprint linenums lang-js">$('.slider6').slider('pips', {
Expand All @@ -103,6 +105,25 @@ <h1>A Quick Demo of the <br>jQuery ui Slider Pips plugin extension</h1>
</tr>




<tr>
<td><div class="slider7"></div></td>
<td>
<pre class="prettyprint linenums lang-js">$('.slider7').slider('float');</pre>
<p>We can also have a slider with floating numbers</p>
</td>
</tr>

<tr>
<td><div class="slider8"></div></td>
<td>
<pre class="prettyprint linenums lang-js">$('.slider8').slider('pips').slider('float');</pre>
<p>If we've already got pips, we can float those, too. (hover the pips).</p>
</td>
</tr>


</table>


Expand All @@ -126,11 +147,11 @@ <h1>A Quick Demo of the <br>jQuery ui Slider Pips plugin extension</h1>
<script src="demo/js/main.js"></script>

<script>
var _gaq=[['_setAccount','UA-15937605-6'],['_trackPageview']];
/* var _gaq=[['_setAccount','UA-15937605-6'],['_trackPageview']];
_gaq.push(['_setDomainName', 'simey.me']);
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
*/ </script>
</body>
</html>
60 changes: 60 additions & 0 deletions src/css/jquery-ui-slider-pips.css
View file
Expand Up @@ -30,3 +30,63 @@
.ui-slider-vertical.ui-slider-pips .ui-slider-number { top: 50%; left: 0.5em; margin-left: 0; margin-top: -0.5em; width: 2em; }
.ui-slider-vertical.ui-slider-pip:hover .ui-slider-number { color: black; font-weight: bold; }



/* ui slider float */

.ui-slider-float .ui-slider-handle:focus,
.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,
.ui-slider-float .ui-slider-handle:focus .ui-slider-tip-number { outline: none; }

.ui-slider-float .ui-slider-tip,
.ui-slider-float .ui-slider-tip-number {
position: absolute; visibility: hidden;
top: -40px; display: block;
width: 34px; margin-left: -18px; left: 50%;
height: 20px; line-height: 20px;
background: white; border-radius: 3px;
border: 1px solid #888;
text-align: center;
font-size: 12px;
opacity: 0;
color: #333;
-webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; transition: all 0.2s ease;
}

.ui-slider-float .ui-slider-handle:hover .ui-slider-tip,
.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,
.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-number{ opacity: 1; top: -30px; color: #333; visibility: visible; }

.ui-slider-float .ui-slider-pip .ui-slider-tip-number { top: 15px; }
.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-number { top: 5px; font-weight: normal; }

.ui-slider-float .ui-slider-tip:after,
.ui-slider-float .ui-slider-pip .ui-slider-tip-number:after {
content: " ";
width: 0; height: 0;
border: 5px solid rgba(255,255,255,0);
border-top-color: rgba(255,255,255,1);
position: absolute;
bottom: -10px; left: 50%; margin-left: -5px;
}
.ui-slider-float .ui-slider-tip:before,
.ui-slider-float .ui-slider-pip .ui-slider-tip-number:before {
content: " ";
width: 0; height: 0;
border: 5px solid rgba(255,255,255,0);
border-top-color: #888;
position: absolute;
bottom: -11px; left: 50%; margin-left: -5px;
}

.ui-slider-float .ui-slider-pip .ui-slider-tip-number:after {
border: 5px solid rgba(255,255,255,0);
border-bottom-color: rgba(255,255,255,1);
top: -10px;
}
.ui-slider-float .ui-slider-pip .ui-slider-tip-number:before {
border: 5px solid rgba(255,255,255,0);
border-bottom-color: #888;
top: -11px;
}

6 changes: 4 additions & 2 deletions src/js/jquery-ui-slider-pips-min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

90 changes: 87 additions & 3 deletions src/js/jquery-ui-slider-pips.js
View file
@@ -1,4 +1,4 @@
/* jquery slider pips plugin, version 0.1 */
/* jquery slider pips plugin, version 0.2 */

(function($) {

Expand All @@ -20,13 +20,13 @@
this.element.addClass('ui-slider-pips').find( '.ui-slider-pip' ).remove();

// we need teh amount of pips to create.
var pips = this.options.max - this.options.min;
var pips = this.options.max - this.options.min;

// for every stop in the slider; we create a pip.
for( i=0; i<=pips; i++ ) {

// hold a span element for the pip
var s = $('<span class="ui-slider-pip"><span class="ui-slider-line"></span><span class="ui-slider-number">'+i+'</span></span>');
var s = $('<span class="ui-slider-pip"><span class="ui-slider-line"></span><span class="ui-slider-number">'+(this.options.min+i)+'</span></span>');

// add a class so css can handle the display
// we'll hide numbers by default in CSS, and show them if set.
Expand Down Expand Up @@ -68,5 +68,89 @@

})(jQuery);



/* jquery slider float plugin, version 0.2 */

(function($) {

var extensionMethods = {

float: function( settings ) {

options = { handle: true, numbers: true };
$.extend( options, settings );

// add a class for the CSS
this.element.addClass('ui-slider-float');


// apply handle tip if we settings allows.
if( options.handle ) {

// if this is a range slider
if( this.options.values ) {

var $tip = [
$('<span class="ui-slider-tip">'+ this.options.values[0]+'</span>'),
$('<span class="ui-slider-tip">'+ this.options.values[1]+'</span>')
];


// else if its just a normal slider
} else {

// create a tip element
var $tip = $('<span class="ui-slider-tip">'+ this.options.value+'</span>');

}

// now we append it to all the handles
this.element.find('.ui-slider-handle').each( function(k,v) {
$(v).append($tip[k]);
});

}


if( options.numbers ) {

// if this slider also has numbers, we'll make those into tips, too; by cloning and changing class.
this.element.find('.ui-slider-number').each(function(k,v) {
var $e = $(v).clone().removeClass('ui-slider-number').addClass('ui-slider-tip-number');
$e.insertAfter($(v));
});

}

// when slider changes, update handle tip value.
this.element.on('slidechange slide', function(e,ui) {
$(ui.handle).find('.ui-slider-tip').text( ui.value );
});



}


};

$.extend(true, $['ui']['slider'].prototype, extensionMethods);


})(jQuery);















0 comments on commit aeacad8

Please sign in to comment.