如何解决引导程序 4 升级后 jquery 滑块未显示
我正在尝试将我的网站从 Bootstrap 3 升级到 Bootstrap 4。出于某种奇怪的原因,这破坏了我的 jquery 滑块。它只显示一个正方形(就像一个手柄?)。控制台中没有错误。
这是我的精简代码:
<head>
<link href="/xana/js/jquery-ui-1.11.4/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<link href="/xana/css/bootstrap-4.1.3/bootstrap.min.css" rel="stylesheet"/>
<script src="/xana/js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="/xana/js/jquery-ui-1.11.2.custom/jquery-ui.min.js" type="text/javascript"></script>
<script src="/xana/js/popper.min.js"type="text/javascript"></script>
<script src="/xana/js/bootstrap-4.1.3/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<span id="trans-slider" class='center-block'></span>
</body>
<script type="text/javascript">
//transparency slider updates map transparency
$('#trans-slider').slider({
value: 100,range: "min",min: 0,max: 100,animate: true,orientation: "horizontal",stop: function (event,ui) {
updateLayerTrans(ui.value);
}
});
</script>
解决方法
jQuery-UI 似乎想要一个 div
而不是 span
标签。
$('#trans-slider').slider({
value: 100,range: "min",min: 0,max: 100,animate: true,orientation: "horizontal",stop: function (event,ui) {
console.log(ui.value);
//updateLayerTrans(ui.value);
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<div id="trans-slider" class='center-block mt-5 mx-5'></div>
我确实使用 Bootstrap 4.6.0 而不是您的版本中使用的更旧的 4.1.3 设置了代码段,但它应该可以工作。我还将代码片段设置为使用 jQuery 3.5.1 而不是更旧的 1.10.2。 Bootstrap 建议使用 3.x 版。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。