gpt4 book ai didi

javascript - jQuery slider 按钮通过数据选择器显示

转载 作者:行者123 更新时间:2023-11-30 13:26:54 25 4
gpt4 key购买 nike

我在表单上有一个 jQuery 日期选择器,在它下面有一个 jQuery slider 。当我选择日期选择器时,日历会弹出,但 slider 按钮在日历顶部可见。

有没有办法确保日历位于表单上所有其他元素之上?

页面源代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My ASP.NET Web Page</title>
<link href="../Styles/Site.css" rel="stylesheet" />
<link href="../favicon.ico" rel="shortcut icon" type="image/x-icon" />

<link type="text/css" href="../css/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.16.custom.min.js"></script>

<script type="text/javascript">
//date picker
$(function () {
$("#classDate").datepicker({ minDate: 0 });
});

//Slider1
$(function() {
$("#slider1").slider({
value:60,
min: 0,
max: 120,
step: 5,
slide: function( event, ui ) {
$("#class1").val(ui.value);
}
});
$("#class1").val($("#slider1").slider("value"));
});

//Slider2
$(function () {
$("#slider2").slider({
value: 6,
min: 1,
max: 12,
step: 1,
slide: function (event, ui) {
$("#class2").val(ui.value);
}
});
$("#class2").val($("#slider2").slider("value"));
});
</script>
</head>

<body>
<div id="page">
<div id="main">
<div id="content">
<form method="post" action="">
<fieldset>
<legend>Sign-up Form</legend>
<ol>
<li class="classDate">
<label for="classDate">Date:</label>
<input type="text" id="classDate" name="classDate" title="Start Date" />
</li>
<li class="class1">
<label for="class1">Slider1:</label>
<input type="text" id="class1" name="class1" title="slider1" style="border:0; color:#f6931f; font-weight:bold;" />
<br/>
<div id="slider1" class="slider" ></div>
</li>
<li class="class2">
<label for="class2">Slider2:</label>
<input type="text" id="class2" name="class2" title="slider2" style="border:0; color:#f6931f; font-weight:bold;" />
<br /><div id="slider2" class="slider" ></div>

</li>
</ol>
<p class="form-actions">
<input type="submit" value="createClass" title="createClass" />
</p>
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>

编辑:

仍然没有接受者,所以这里有一张图片可以清楚地说明这一点。左侧显示正常形式;几个盒子和 slider 。右侧显示了当用户尝试选择日期时发生的情况。您可以看到 slider 按钮出现在弹出的日历顶部。

jQuery Slider appearing on top of calendar

最佳答案

将此添加到您的 CSS:

.ui-datepicker {z-index:3!important;}

关于javascript - jQuery slider 按钮通过数据选择器显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8182349/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com