Возникли проблемы с получением моего первого jquery виджета под моим поясом - PullRequest
0 голосов
/ 22 ноября 2011

Я хочу использовать следующий ползунок http://jqueryui.com/demos/slider/#range Я хочу, чтобы все файлы были локальными, чтобы я мог работать в автономном режиме.Сейчас все, что я пытаюсь сделать, это получить демонстрационную страницу, на которой ничего не отображается, кроме этого слайдера.Я считаю, что моя борьба заключается в следующем: какие файлы js, css мне нужно загрузить / включить?Как только я получу этот первый за пояс, я должен быть запущен.

Спасибо за помощь.

edit:

Итак, я скачал код, поместил свой HTMLфайл в каталоге остальные папки находятся в, и я ничего не получаю.Чтобы быть очень ясным.У меня есть папка с моим файлом HTML, css, development-bundle и js.Вот мой код: скрипт был взят из демоверсии jquery.Я уверен, что я делаю этот WAYYYY более сложным, чем нужно.Спасибо.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.16.custom.css">
    <script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
    <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>

    <script>
    $(function() {
        $( "#slider-range" ).slider({
            range: true,
            min: 0,
            max: 500,
            values: [ 75, 300 ],
            slide: function( event, ui ) {
                $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
            }
        });
        $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
            " - $" + $( "#slider-range" ).slider( "values", 1 ) );
    });
    </script>
</head>

<body>

<div class="demo">

<p>
    <label for="amount">Price range:</label>
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider-range"></div>

</div>

</body>
</html>

1 Ответ

0 голосов
/ 22 ноября 2011

JavaScript в вашем теге скрипта выполняется перед HTML в вашем теле тега, поэтому jQuery не может разрешить эти селекторы. Попробуйте дождаться загрузки DOM, прежде чем выполнять JS.

$(document).ready(function(){
    //  $( "#slider-range" ) ...
    // $( "#amount" )...
});

Между прочим, для таких небольших проектов я почти всегда начинаю с предупреждения («test») или console.log («test») внутри этой функции готовности документа. Это быстрый и простой способ определить, загружаются ли ваши библиотеки и работает ли JS с самого начала.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...