jQuery слайдер неизвестен
Как работает этот слайдер?
Http://jqueryui.com/demos/slider
Данный Источник ничего не показывает
<style>
#demo-frame > div.demo { padding: 10px !important; }
</style>
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
<div class="demo">
<div id="slider"></div>
</div><!-- End demo -->
Я включил jquery перед добавлением этого
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
Но это дает мне
SCRIPT438: объект не поддерживает свойство или метод 'slider'
Ошибка.
Вот как выглядит весь код
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<style>
#demo-frame > div.demo { padding: 10px !important; }
</style>
<div class="demo">
<div id="slider"></div>
</div><!-- End demo -->
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
</body>
</html>
Что я упускаю?
3 ответа:
Я включил jquery перед добавлением этого
Вы включили jQuery... но вы используете метод
jQuery ui
plugin -.slider()
без ссылки на плагин ui.
Таким образом, этот методslider
неизвестен javascript,Добавьте ссылку после библиотеки jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
Обновление:
После того, как я потратил слишком много времени, я нашел вашу проблему, вы пропускаете jQuery ui css :
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
Вы должны использовать jQuery UI для слайдера.
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"/>
Поскольку это слайдер jQuery UI, вы пропускаете jQuery UI, который должен быть включен после jQuery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>