Skip to content

Commit

Permalink
Add labels ability to pips plugin
Browse files Browse the repository at this point in the history 
and fix styles to reflect.
Major change: "numbers" option change to "labels" to reflect custom
labels addition.
  • Loading branch information
@simeydotme
simeydotme committed Mar 13, 2013
1 parent d81a499 commit 46467e0
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 40 deletions.
30 changes: 15 additions & 15 deletions src/css/jquery-ui-slider-pips.css
View file
Expand Up @@ -4,9 +4,9 @@
/* ui slider pips */

.ui-slider-horizontal.ui-slider-pips { margin-bottom: 1.4em; }
.ui-slider-pips .ui-slider-number,
.ui-slider-pips .ui-slider-label,
.ui-slider-pips .ui-slider-pip-hide { display: none; }
.ui-slider-pips .ui-slider-pip-number .ui-slider-number { display: block; }
.ui-slider-pips .ui-slider-pip-label .ui-slider-label { display: block; }



Expand All @@ -16,8 +16,8 @@
top: 20px; left: 20px; margin-left: -1em; cursor: pointer;
}
.ui-slider-pips .ui-slider-line { background: #999; width: 1px; height: 3px; position: absolute; left: 50%; }
.ui-slider-pips .ui-slider-number { position: absolute; top: 5px; left: 50%; margin-left: -1em; width: 2em; }
.ui-slider-pip:hover .ui-slider-number { color: black; font-weight: bold; }
.ui-slider-pips .ui-slider-label { position: absolute; top: 5px; left: 50%; margin-left: -1em; width: 2em; }
.ui-slider-pip:hover .ui-slider-label { color: black; font-weight: bold; }



Expand All @@ -27,19 +27,19 @@
text-align: left; top: 20px; left: 20px; margin-left: 0; margin-top: -0.5em;
}
.ui-slider-vertical.ui-slider-pips .ui-slider-line { width: 3px; height: 1px; position: absolute; top: 50%; left: 0; }
.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-vertical.ui-slider-pips .ui-slider-label { top: 50%; left: 0.5em; margin-left: 0; margin-top: -0.5em; width: 2em; }
.ui-slider-vertical.ui-slider-pip:hover .ui-slider-label { 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-handle:focus .ui-slider-tip-label { outline: none; }

.ui-slider-float .ui-slider-tip,
.ui-slider-float .ui-slider-tip-number {
.ui-slider-float .ui-slider-tip-label {
position: absolute; visibility: hidden;
top: -40px; display: block;
width: 34px; margin-left: -18px; left: 50%;
Expand All @@ -55,13 +55,13 @@

.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:hover .ui-slider-tip-label{ 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-pip .ui-slider-tip-label { top: 30px; }
.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label { top: 20px; font-weight: normal; }

.ui-slider-float .ui-slider-tip:after,
.ui-slider-float .ui-slider-pip .ui-slider-tip-number:after {
.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
content: " ";
width: 0; height: 0;
border: 5px solid rgba(255,255,255,0);
Expand All @@ -70,7 +70,7 @@
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 {
.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
content: " ";
width: 0; height: 0;
border: 5px solid rgba(255,255,255,0);
Expand All @@ -79,12 +79,12 @@
bottom: -11px; left: 50%; margin-left: -5px;
}

.ui-slider-float .ui-slider-pip .ui-slider-tip-number:after {
.ui-slider-float .ui-slider-pip .ui-slider-tip-label: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 {
.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
border: 5px solid rgba(255,255,255,0);
border-bottom-color: #888;
top: -11px;
Expand Down
9 changes: 5 additions & 4 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.

53 changes: 32 additions & 21 deletions src/js/jquery-ui-slider-pips.js
View file
Expand Up @@ -8,39 +8,48 @@

options = {

first: "number", // "pip" , false
last: "number", // "pip" , false
rest: "pip" // "number" , false
first: "label", // "pip" , false
last: "label", // "pip" , false
rest: "pip", // "label" , false
labels: false // [array]

};

$.extend( options, settings );

// labels are needed globally potentially.
this.options.labels = options.labels

// get rid of all pips that might already exist.
this.element.addClass('ui-slider-pips').find( '.ui-slider-pip' ).remove();

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

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

// create the label name, it's either the item in the array, or a number.
var label = (this.options.labels) ? this.options.labels[i] : (this.options.min+i);
if( typeof(label) === "undefined" ) { label = ""; }


// 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">'+(this.options.min+i)+'</span></span>');
var s = $('<span class="ui-slider-pip ui-slider-pip-'+i+'"><span class="ui-slider-line"></span><span class="ui-slider-label">'+ label +'</span></span>');

// add a class so css can handle the display
// we'll hide numbers by default in CSS, and show them if set.
// we'll hide labels by default in CSS, and show them if set.
// we'll also use CSS to hide the pip altogether.
if( 0 == i ) {
s.addClass('ui-slider-pip-first');
if( "number" == options.first ) { s.addClass('ui-slider-pip-number'); }
if( "label" == options.first ) { s.addClass('ui-slider-pip-label'); }
if( false == options.first ) { s.addClass('ui-slider-pip-hide'); }
} else if ( pips == i ) {
s.addClass('ui-slider-pip-last');
if( "number" == options.last ) { s.addClass('ui-slider-pip-number'); }
if( "label" == options.last ) { s.addClass('ui-slider-pip-label'); }
if( false == options.last ) { s.addClass('ui-slider-pip-hide'); }
} else {
if( "number" == options.rest ) { s.addClass('ui-slider-pip-number'); }
if( "label" == options.rest ) { s.addClass('ui-slider-pip-label'); }
if( false == options.rest ) { s.addClass('ui-slider-pip-hide'); }
}

Expand Down Expand Up @@ -78,7 +87,10 @@

float: function( settings ) {

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

// add a class for the CSS
Expand All @@ -91,17 +103,16 @@
// 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>')
];

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>');
var $tip = $('<span class="ui-slider-tip">'+ this.options.value +'</span>');

}

Expand All @@ -113,17 +124,17 @@
}


if( options.numbers ) {
if( options.labels ) {

// 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');
// if this slider also has labels, we'll make those into tips, too; by cloning and changing class.
this.element.find('.ui-slider-label').each(function(k,v) {
var $e = $(v).clone().removeClass('ui-slider-label').addClass('ui-slider-tip-label');
$e.insertAfter($(v));
});

}

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

0 comments on commit 46467e0

Please sign in to comment.