Question

我试图设计我的jquery UI Slider＆＃34; .unlock-slider＆＃34;使用CSS自由处理。我在google上找到的所有解决方案都告诉我使用！important或直接更改UI附带的css。但这对我来说似乎不是一个优雅的解决方案。 UI文档告诉我如何使用Slider theming覆盖（这意味着＆＃34;覆盖＆＃34; btw？）CSS框架：classes option。

所以我试着这样做，但似乎有些事情发生了，我不知道它是什么。该脚本不会使用我的自定义类覆盖UI类。

我对这一切都很陌生，如果总有初学者，那就很抱歉。错误。

此滑块是使用jquery UI btw的唯一原因。所以，如果有另一种制作滑块的方法，我很高兴尝试一下！

非常感谢

编辑：发现错字。现在该类应用但它不会覆盖现有UI css的属性。看到 Image：

代码：

＆＃13;

	var slider = $( ".unlock-slider").slider({
			 classes: {
					 "ui-slider-handle": "custom-handle"
			 }
	 });
	$(".unlock-slider").slider
	({
   max:50 });
});

＆＃13;

.custom-handle {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  background: tomato;
}

＆＃13;

  <div class="slider-wrapper">
                <div class="unlock-slider">
                </div>
              </div>

＆＃13;

Answer 1

不确定我理解你的问题。提出一些建议：

＆＃13;

var slider = $(".unlock-slider").slider({
  classes: {
    "ui-slider-handle": "custom-handle"
  },
  max:50
});

＆＃13;

.unlock-slider span.custom-handle {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  background: tomato;
}

＆＃13;

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="slider-wrapper">
  <div class="unlock-slider">
  </div>
</div>

＆＃13;

如果您的主题没有被阅读或覆盖，请在您的定义中更具体。

如何在jquery UI中覆盖类？

1 个答案: