首页 > JQ-ui插件slider问题

JQ-ui插件slider问题

怎么改变slider滑块的样子,找遍CSS都不见设置样子的地方


官网示例代码:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Slider - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#slider" ).slider();
  });
  </script>
</head>
<body>

<div id="slider"></div>


</body>
</html>

原来滑块颜色为灰色:

在jQuery代码应用$("#slider").slider();方法之后,实际生成的代码:

<body>



<div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
<span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 0%;"></span>
</div>


</body>

其实那个灰色块是图片,注意对应的CSS代码:

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border: 1px solid #d3d3d3;
background: #e6e6e6 url("images/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x;
font-weight: normal;
color: #555555;
}

如果要修改滑块的颜色,就要修改background的值,不要应用图片,只保留背景颜色:
background: yellow;

【热门文章】
【热门文章】