jQuery UI滑杆插件可Tooltip提示代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery UI滑杆插件可Tooltip提示代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery UI滑杆插件 可Tooltip提示</title>
  <style>
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

</style>

  <link rel='stylesheet' href='css/jquery-ui.css'>

    <style>
@import url('http://fonts.googleapis.com/css?family=Bitter:400,700,400italic');
/* 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;
}
/* ------------------------- */
/* demo stuff */
body {
  font-family: 'bitter';
  padding: 20px 50px;
  text-align: center;
  background: url('css/abstract%20blue%20lights%20orange%20bokeh%20gaussian%20blur%201920x1200%20wallpaper_www.wallpaperhi.com_43.jpg');
  background-size: cover;
  color: white;
}
h1,
h3 {
  margin: 0 0 10px ;
}
h3 {
  font-weight: 200;
  margin-bottom: 10px;
}
h4 {
  font-weight: 300;
  font-style: italic;
  color: black;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.7);
  display: inline-block;
  border-radius: 4px;
}
a {
  color: #2cafe3;
}
.wrapper {
  padding: 40px 40px 0;
  border: 1px dotted rgba(200, 200, 255, 0.6);
  background: rgba(0, 10, 20, 0.7);
  border-radius: 10px;
}
.ui-slider {
  box-shadow: inset 0 2px 1px #aaa;
  border-color: #000;
}
.ui-slider-horizontal {
  height: 10px;
  background: #ddd;
}
.ui-slider-horizontal .ui-slider-handle {
  height: 18px;
  width: 14px;
  background: #2cafe3;
  border: 1px solid rgba(0, 0, 0, 0.6);
  margin-left: -8px;
  cursor: pointer;
}
.ui-slider-horizontal.green .ui-slider-handle {
  background: #afe32c;
}
@media (max-width: 700px) {
  .ui-slider-pip:nth-child(odd) .ui-slider-number {
    display: none;
  }
}
@media (max-width: 400px) {
  .ui-slider-pip:nth-child(2n+1) .ui-slider-number {
    display: none;
  }
  .ui-slider-pip:nth-child(4n) .ui-slider-number {
    display: none;
  }
}
</style>
</head>
<body>
<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>
  <script src='js/jquery_and_jqueryui.js'></script>
  <script src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

var points = 20;
	/* jquery slider pips plugin,version 0.1 */
(function($){
	var extensionMethods ={
	pips:function( settings ){
	options ={
	first:"number",// "pip",falselast:"number",// "pip",falserest:"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 pipvar 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 + '%'}
);
	elses.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 CSSthis.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');
}
);

CSS代码(normalize.css):

html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0}
[hidden],template{display:none}
a{background:transparent}
a:active,a:hover{outline:0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
dfn{font-style:italic}
h1{font-size:2em;margin:0.67em 0}
mark{background:#ff0;color:#000}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
img{border:0}
svg:not(:root){overflow:hidden}
figure{margin:1em 40px}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
pre{overflow:auto}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}
button{overflow:visible}
button,select{text-transform:none}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
input{line-height:normal}
input[type="checkbox"],input[type="radio"]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}
legend{border:0;padding:0}
textarea{overflow:auto}
optgroup{font-weight:bold}
table{border-collapse:collapse;border-spacing:0}
td,th{padding:0}

CSS代码(style.css):

@import url('http://fonts.googleapis.com/css?family=Bitter:400,700,400italic');/* 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;}
/* ------------------------- */
/* demo stuff */
body{font-family:'bitter';padding:20px 50px;text-align:center;background:url('http://wallpaperswa.com/thumbnails/detail/20120313/abstract%20blue%20lights%20orange%20bokeh%20gaussian%20blur%201920x1200%20wallpaper_www.wallpaperhi.com_43.jpg');background-size:cover;color:white;}
h1,h3{margin:0 0 10px;}
h3{font-weight:200;margin-bottom:10px;}
h4{font-weight:300;font-style:italic;color:black;padding:10px 20px;background:rgba(255,255,255,0.7);display:inline-block;border-radius:4px;}
a{color:#2cafe3;}
.wrapper{padding:40px 40px 0;border:1px dotted rgba(200,200,255,0.6);background:rgba(0,10,20,0.7);border-radius:10px;}
.ui-slider{box-shadow:inset 0 2px 1px #aaa;border-color:#000;}
.ui-slider-horizontal{height:10px;background:#ddd;}
.ui-slider-horizontal .ui-slider-handle{height:18px;width:14px;background:#2cafe3;border:1px solid rgba(0,0,0,0.6);margin-left:-8px;cursor:pointer;}
.ui-slider-horizontal.green .ui-slider-handle{background:#afe32c;}
@media (max-width:700px){.ui-slider-pip:nth-child(odd) .ui-slider-number{display:none;}
}
@media (max-width:400px){.ui-slider-pip:nth-child(2n+1) .ui-slider-number{display:none;}
.ui-slider-pip:nth-child(4n) .ui-slider-number{display:none;}
}

附件:下载该文件资源,减少时间成本(增值服务)