jQuery UI Slider未显示
[英]JQuery UI Slider not displayed
问题描述
Just started playing with JQuery UI slider, haven't been able to display it on my page. 
刚开始使用JQuery UI滑块玩，还无法在我的页面上显示它。 Tried bunch of things bit to no avail. 尝试一堆东西无济于事。 Heres my code, any suggestions would be much appreciated. 这是我的代码，任何建议将不胜感激。 Am using Django for referring to the javascript files, 我正在使用Django来引用javascript文件，
<html>
<head>
<title>Search Results</title>
<script type="text/javascript" src="{{ STATIC_URL }}jquery-ui-1.8.4/jquery-1.4.2.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}jquery-ui-1.8.4/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}jquery-ui-1.8.4/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}jquery-ui-1.8.4/ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}jquery-ui-1.8.4/ui/jquery.ui.slider.js"></script>
<LINK rel="stylesheet" href="{{ STATIC_URL }}jquery-ui-1.8.4/themes/base/jquery.ui.slider.css" type="text/css">
</head>
<body>
<meta charset="utf-8" >
<style>
#demo-frame > div.demo { padding: 10px !important; }
</style>
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
<div class="demo">
<div id="slider"></div>
</div><!-- End demo -->
<div class="demo-description">
<p>The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.</p>
</div><!-- End demo-description -->
</body>
3 个解决方案
解决方案1
1 2016-09-29 18:06:23
The jQuery UI is quite easy to setup. jQuery UI很容易设置。 Simply reference the appropriate CSS/JavaScript files in the document <head> tag. 只需在文档<head>标记中引用适当的CSS / JavaScript文件。
Code in
<head>tag :<head>标记中的代码 ：
<link rel="stylesheet" href="https://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>
Slider Initialization HTML :
<div id='mockSlider'></div>
<input type='text' id='currentValue' />
Slider Initialization jQuery :
$("#mockSlider").slider({
range: false,
min: 0,
max: 100,
slide: function(event, ui) {
doSomething(ui.value);
}
});
function doSomething(sliderValue) {
$('input[type="text"]').attr('value', sliderValue);
}
Slider Initialization CSS :
#mockSlider {
width: 80%;
margin-bottom: 15px;
}
#currentValue {
width: 3empx;
text-align: center;
}
Follow the link below to see an jsFiddle example. 请点击以下链接查看jsFiddle示例。 Specifically, take a look under the external resources menu, where you will see the 3 code references. 具体来说，请在“外部资源”菜单下查看，您将看到3个代码引用。 Then, press F12 and use the debugging selection tool to see what is in the <head> of the rendered document. 然后，按F12并使用调试选择工具查看呈现的文档的<head>中的内容。
解决方案2
0 2016-09-29 17:34:40
Sometimes jquery ui widgets not showing may be due to missing jquery-ui-scope div. 有时未显示的jQuery ui小部件可能是由于缺少jQuery-ui-scope div。 All jquery ui styles are defined within the scope of div with jquery-ui-scope class. 所有jquery ui样式均在div范围内使用jquery-ui-scope类定义。
解决方案3
0 2011-12-04 01:59:02
Are you getting any javascript errors when loading the page ? 加载页面时是否遇到任何JavaScript错误？ If so what is it ? 如果是这样，那是什么？
Can you make sure your javascripts (jqyeru ui) are loaded properly ? 您可以确定您的JavaScript（jqyeru ui）正确加载了吗？
If you use firebug, you can see the errors in the console tab. 如果您使用Firebug，则可以在控制台选项卡中看到错误。 FireBig is a firefox addon which makes web development a lot easier FireBig是一个Firefox附加组件，它使Web开发更加容易
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.