Jquery UI 最初隐藏滑块句柄
Jquery UI initially hide slider handle
我已经用 jquery ui 设置了一个滑块。我希望滑块的句柄最初是隐藏的,只有在用户单击滑块后才会显示。我设法通过在 ui-slider-handle class 中将显示设置为 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()
。当用户点击 Slider 时,这会触发 start
事件,此时我们可以 .show()
句柄。
如果您有多个滑块,ui-slider-handle
class 可能过于模糊,因此使用选择器上下文会有所帮助。
Internally, selector context is implemented with the .find()
method, so $( "span", this )
is equivalent to $( this ).find( "span" )
.
查看更多:
我已经用 jquery ui 设置了一个滑块。我希望滑块的句柄最初是隐藏的,只有在用户单击滑块后才会显示。我设法通过在 ui-slider-handle class 中将显示设置为 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()
。当用户点击 Slider 时,这会触发 start
事件,此时我们可以 .show()
句柄。
如果您有多个滑块,ui-slider-handle
class 可能过于模糊,因此使用选择器上下文会有所帮助。
Internally, selector context is implemented with the
.find()
method, so$( "span", this )
is equivalent to$( this ).find( "span" )
.
查看更多: