Слайдер jQuery неизвестен - PullRequest
Новая
       38

Слайдер jQuery неизвестен

3 голосов
/ 06 февраля 2012

Как работает этот слайдер?

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: Объект не поддерживает свойство или метод 'бегунок'

ошибка.

Вот чтоВесь код выглядит так: 

<!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 ]

2 голосов
/ 06 февраля 2012

Я добавил jquery перед добавлением

Вы включили jQuery ... но вы используете jQuery ui метод плагина - .slider() без ссылки на плагин пользовательского интерфейса.
Так что метод 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"/>

JSFiddle DEMO

1 голос
/ 06 февраля 2012

Поскольку это ползунок jQuery UI , вам не хватает UI jQuery , который необходимо включить после 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>
1 голос
/ 06 февраля 2012

Вы должны использовать jQuery UI для слайдера.

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"/>

...