本文作者html5tricks，转载请注明出处
今天我们再来介绍一款实用的jQuery插件，是基于jQuery UI的。这款jQuery滑杆插件非常漂亮，可以设置多种颜色，再加上CSS3上运用，可以让滑杆的游标变得有立体感，滑杆的Tooltip提示框也出现飞入飞出的动画效果。更多jQuery插件可以移步至jQuery插件栏目。
下面我们一起来看看实现这款漂亮的控制滑竿的过程及源代码。代码主要由HTML、CSS以及jQuery组成，下面我们分步来解析。
HTML代码：
<section class="wrapper"> <div class="slider"></div> <div class="slider2"></div> <div class="slider3"></div> <div> <h2>Now with a floating tip, too! <small><em>(hover)</em></small></h2></div> <div class="slider4 green"></div> <div class="slider6 green"></div> <br><br> </section>
HTML代码非常简单，首先是构造了一个存放每个滑竿的容器，这里一共有6个漂亮的滑竿，接下来我们就要用CSS来美化它们了。
CSS代码：
/* ui slider pips */
.ui-slider-horizontal.ui-slider-pips {
margin-bottom: 2.8em;
}
.ui-slider-pips .ui-slider-number,
.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 {
width: 2em;
height: 1em;
line-height: 1em;
position: absolute;
font-size: 0.8em;
color: #999;
overflow: visible;
text-align: center;
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: white;
font-weight: bold;
}
.ui-slider-vertical.ui-slider-pips {
margin-bottom: 0;
margin-right: 2em;
}
.ui-slider-vertical.ui-slider-pips .ui-slider-pip {
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: white;
font-weight: bold;
}
.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: -17px;
left: 50%;
height: 20px;
line-height: 20px;
background: white;
border-radius: 3px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
text-align: center;
font-size: 12px;
opacity: -1;
transition: all 0.4s ease;
color: #333;
}
.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: 0.9;
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: #ffffff;
position: absolute;
bottom: -10px;
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: #ffffff;
top: -10px;
}
CSS代码没有特殊的属性，这里不多做介绍。
由于这里用到了jQuery UI插件，所以在页面上也要引用jQuery UI的CSS样式表：
<link rel='stylesheet' href='css/jquery-ui.css'>
同时在页面上引用jQuery UI的js脚本库：
<script src='js/jquery_and_jqueryui.js'></script>
最后是初始化的jQuery代码。
jQuery代码：
var points = 20;
/* jquery slider pips plugin, version 0.1 */
(function($) {
var extensionMethods = {
pips: function( settings ) {
options = {
first: "number", // "pip" , false
last: "number", // "pip" , false
rest: "pip" // "number" , false
};
$.extend( options, settings );
// 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.
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>');
// add a class so css can handle the display
// we'll hide numbers 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( 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( false == options.last ) { s.addClass('ui-slider-pip-hide'); }
} else {
if( "number" == options.rest ) { s.addClass('ui-slider-pip-number'); }
if( false == options.rest ) { s.addClass('ui-slider-pip-hide'); }
}
// if it's a horizontal slider we'll set the left offset,
// and the top if it's vertical.
if( this.options.orientation == "horizontal" )
s.css({ left: '' + (100/pips)*i + '%' });
else
s.css({ top: '' + (100/pips)*i + '%' });
// append the span to the slider.
this.element.append( s );
}
}
};
$.extend(true, $['ui']['slider'].prototype, extensionMethods);
})(jQuery);
(function($) {
var extensionMethods = {
float: function( settings ) {
options = {};
$.extend( options, settings );
// add a class for the CSS
this.element.addClass('ui-slider-float');
// 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 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);
/* ------------------------- */
/* demo stuff */
$(document).ready(function() {
$('.slider, .slider2').slider({min:0,max:points,animate:true, value:3});
$('.slider3').slider({min:0,max:points,animate:true,range:true, values:[2,18]});
$('.slider').slider('pips');
$('.slider2').slider('pips', {rest:'number'});
$('.slider3').slider('pips', {first:'pip', last: 'pip'});
$('.slider4').slider({min:0,max:points,animate:true,value:4});
$('.slider6').slider({min:0,max:points,animate:true,range: true,values:[3,6] });
$('.slider4').slider('pips');
$('.slider4, .slider6').slider('float');
});
从最后的初始化代码中我们可以看出，每一个slider都可以设置是否带有Tooltip提示框，并且可以设置滑竿的初始值。
嗯