jQuery滑块按钮通过数据选择器显示 [英] jQuery slider button shows through data picker
本文介绍了jQuery滑块按钮通过数据选择器显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有没有办法确保日历是表单上所有其他元素的顶部？
这是页面源代码：
code><！DOCTYPE html>
< html lang =en>
< head>
< meta charset =utf-8/>
< title>我的ASP.NET网页< / title>
< link href =../ Styles / Site.css =stylesheet/>
< link href =../ favicon.ico =快捷图标type =image / x-icon/>
< link type =text / csshref =../ css / redmond / jquery-ui-1.8.16.custom.css =stylesheet/>
< script type =text / javascriptsrc =../ js / jquery-1.6.2.min.js>< / script>
< script type =text / javascriptsrc =../ js / jquery-ui-1.8.16.custom.min.js>< / script>
< script type =text / javascript>
//日期选择器
$（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 =postaction =>
< fieldset>
< legend>注册表单< / legend>
< ol>
< li class =classDate>
< label for =classDate> Date：< / label>
< input type =textid =classDatename =classDatetitle =开始日期/>
< / li>
< li class =class1>
< label for =class1> Slider1：< / label>
< input type =textid =class1name =class1title =slider1style =border：0; color：＃f6931f; font-weight：bold; />
< br />
< div id =slider1class =slider>< / div>
< / li>
< li class =class2>
< label for =class2> Slider2：< / label>
< input type =textid =class2name =class2title =slider2style =border：0; color：＃f6931f; font-weight：bold; />
< br />< div id =slider2class =slider>< / div>
< / li>
< / ol>
< p class =form-actions>
< input type =submitvalue =createClasstitle =createClass/>
< / p>
< / fieldset>
< / form>
< / div>
< / div>
< / div>
< / body>
< / html>
编辑：
这个，所以这里是一个形象，使其清楚。左侧显示正常形式;几个盒子和滑块。右侧显示用户尝试选择日期时会发生什么。您可以看到滑块的按钮出现在弹出日历的顶部。
解决方案
将此添加到您的CSS： / p>
.ui-datepicker {z-index：3！important;}pre>
I have a jQuery datepicker on a form and a jQuery slider just below it. When I select the datepicker the calendar pops up, but the button from the slider is visible on top of the calendar.
Is there a way to make sure that the calendar is on top of all other elements on the form?
Here's the page source code:
<!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>Edit:
Still no takers on this, so here's a image to make it clear. The left side shows the normal form; a few boxes and sliders. The right side shows what happens when a user tries to select a date. You can see that the button for the slider is appearing on top of the calendar that pops up.
解决方案Add this to your CSS:
.ui-datepicker {z-index:3!important;}
这篇关于jQuery滑块按钮通过数据选择器显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
