jquery ui 滑块问题

俺是平凡人 2013-12-11 09:27:28

请问jquery 滑块插件，如何让文字在滑块上面呢，像下面这效果，滑动时也在滑块上面跟着滑动，同时数值也在变化

jquery-ui.css



.ui-slider {

	position: relative;

	text-align: left;

}

.ui-slider .ui-slider-handle {

	position: absolute;

	z-index: 2;

	width: 1.2em;

	height: 1.2em;

	cursor: default;

}

.ui-slider .ui-slider-range {

	position: absolute;

	z-index: 1;

	font-size: .7em;

	display: block;

	border: 0;

	background-position: 0 0;

}



/* For IE8 - See #6727 */

.ui-slider.ui-state-disabled .ui-slider-handle,

.ui-slider.ui-state-disabled .ui-slider-range {

	filter: inherit;

}



.ui-slider-horizontal {

	height: .8em;

}

.ui-slider-horizontal .ui-slider-handle {

	top: -.3em;

	margin-left: -.6em;

}

.ui-slider-horizontal .ui-slider-range {

	top: 0;

	height: 100%;

}



.ui-slider-horizontal .ui-slider-range-max {

	right: 0;

}/*这里*/





.ui-widget-content {

	border: 1px solid #aaaaaa;

	background: #ffffff ;

	color: #222222;

}



.ui-widget-header {

	border: 1px solid #aaaaaa;

	background: #cccccc ;

	color: #222222;

	font-weight: bold;

}



.ui-widget-content .ui-state-default,

.ui-widget-header .ui-state-default {

	border: 1px solid #d3d3d3;

	background: #e6e6e6 ;

	font-weight: normal;

	color: #555555;

}



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<title>jQuery UI Slider - Snap to increments</title>  

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

  <script src="http://code.jquery.com/jquery-1.7.1.js"></script>

  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

  <script>

  $(function() {

    $( "#slider-range-min" ).slider({

      range: "min",

      value: 125,

      min: 1,

      max: 255,

      slide: function( event, ui ) {

        $( "#amount" ).val( "$" + ui.value );

      }

    });

    $( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );

  });

  </script>

</head>  

<body>  

  

<p>

  <label for="amount">Maximum price:</label>

  <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">

</p>

 

<div id="slider-range-min" style="width:300px;"></div>

</body>

</html>

...全文

155 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

俺是平凡人 2013-12-12

打赏
举报

jquery ui slider 我鼠标只能在拖动框范围移动，如果鼠标拖动不放开移到别的位置放开后，就不管用了，这要怎么弄呢

俺是平凡人 2013-12-11

打赏
举报

你好孟子E章，你这方法是可以在上面显示，但是我鼠标只能在拖动框范围移动，如果鼠标拖动不放开移到别的位置放开后，就不管用了，这要怎么弄呢


 $(function() {
    $( "#slider-range-min" ).slider({
      range: "min",
      value: 125,
      min: 1,
      max: 255,
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.value );
		$("#slider-range-min a").text(ui.value)
		$("#sharpness_value1").html($( "#slider-range-min" ).slider( "value" ))
      }
    }).mouseup(function(event, ui){
    	alert($( "#slider-range-min" ).slider( "value" ))
	  });
	$("#slider-range-min a").html($( "#slider-range-min" ).slider( "value" ))
    $( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );
	$("#sharpness_value1").html($( "#slider-range-min" ).slider( "value" ))
  });

孟子E章 2013-12-11

打赏
举报

加一行代码即可 <script> $(function() { $( "#slider-range-min" ).slider({ range: "min", value: 125, min: 1, max: 255, slide: function( event, ui ) { $("#slider-range-min a").text(ui.value) $( "#amount" ).val( "$" + ui.value ); } }); $( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) ); }); </script>

zhjdg 2013-12-11

打赏
举报

$(function() {
    $( "#slider-range-min" ).slider({
      range: "min",
      value: 125,
      min: 1,
      max: 255,
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.value );
        $(".ui-slider-handle").val( "$" + ui.value ); 
      }
    });
    $( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );
  });