jquery-ui - Jquery UI 最初隐藏滑块句柄
问题描述
我已经用 jquery ui 设置了一个滑块。我希望滑块的句柄最初是隐藏的,并且仅在用户单击滑块后才显示出来。我设法通过在 ui-slider-handle 类中将 display 设置为 none 来隐藏句柄。但是,我以后无法将其更改回来。
解决方案
考虑以下基于https://api.jqueryui.com/slider/示例的代码片段。
$(function() {
$("#slider").slider({
start: function() {
$(".ui-slider-handle", this).show();
}
});
var sw = $("#slider").slider("widget");
$(".ui-slider-handle", sw).hide();
});
<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 id="slider"></div>
是的,你可以用 CSS 隐藏句柄,让它再次出现就意味着用元素样式覆盖 CSS:
$(".ui-slider-handle").css("display", "block");
上面的例子更具体一些,但本质上是做同样的事情。初始化 Slider 后,您可以调用该widget
方法来访问各种元素。我们可以.hide()
在手柄上使用。当用户点击滑块时,这会触发start
事件,我们可以.show()
在那个时候进行处理。
如果您有多个滑块,则ui-slider-handle
该类可能过于模糊,因此使用选择器上下文会有所帮助。
在内部,选择器上下文是用
.find()
方法实现的,所以$( "span", this )
等价于$( this ).find( "span" )
.
看更多:
推荐阅读
- java - 如何在我的 LinearLayout 中使 addView 更快?
- c# - 异步执行另一个任务时我的界面冻结
- php - Laravel 不返回第一次返回
- angular - Angular 9 CORS 问题
- excel - 使用单元格引用从特定行号复制到最后一行
- mongodb - Mongodb 将值从一个字段更新到另一个字段
- c# - DataGrid 行值未正确更改
- c++ - 打印所有偶数或奇数,直到给定 N
- java - Whitelabel 错误页面 此应用程序....出现意外错误(类型=未授权,状态=401)。未经授权
- r - 如何打印存在于一个数据框中并从另一个 r 中丢失的观察结果?