JQuery UI не распознан

0

В частности, у меня есть контейнер div, который содержит еще один div, который имеет фоновое изображение. То, что я пытаюсь сделать, - сделать карту прокрутки/прокрутки, похожую на дизайн Google Maps, минус возможность масштабирования. В моей скрипке нет недостатка в этом. Однако мои локальные файлы не позволяют использовать эту функцию перетаскивания/прокрутки. Я использую ссылки разработчика Google для jQuery/UI, но все равно не помогло. Кроме того, я использую Dreamweaver CS6 для локального развития. Любая помощь будет большой. благодаря

HTML:

<div id="container">
<div id="drag"></div>
</div>

CSS:

#drag {
width: 1000px;
height: 1100px;
background-image: url(http://www.shepherd.edu/university/visitors/images/campus.jpg);
}

#container {
width: 300px;
height: 200px;
overflow: hidden;
border: 2px solid green;
}

JS:

$(document).ready(function() {
$('#drag').draggable();
})
  • 0
    Прежде чем идти дальше, вы включили JQuery в свой HTML-заголовок?
  • 0
    Какую ошибку вы видите? Вы проверили вывод консоли, чтобы увидеть, получаете ли вы 404 ошибки для интерфейса Jquery и т. Д.?
Показать ещё 4 комментария
Теги:
jquery-ui-draggable

1 ответ

1
Лучший ответ

Возможно, это не ваша проблема, но, вне всякого сомнения, это:

Код jQuery не будет работать без ссылки на библиотеку на вашей странице (обычно в тегах <head>).

Кроме того, есть несколько других библиотек, которые строятся поверх библиотеки jQuery, например, Twitter, отличная библиотека начальной загрузки или jQueryUI. В этих случаях вам нужно как библиотека jQuery, так и дополнительная библиотека - как показано для jQueryUI в первом примере ниже.

Есть несколько вариантов включения библиотек jQuery на вашу страницу.

CDN (Сети доставки контента) - это места хранения в Интернете, где веб-страницы могут захватывать указанный код, без необходимости хранить его на вашем сервере. Вот почему CDN - хорошая идея.

Один: 1. Используйте CDN:

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
</head>

Два: 2. Загрузите скрипт jQuery:

  • Перейдите сюда: http://jquery.com/download/
  • Нажмите на нужную вам версию
  • Когда вы видите код в своем браузере, сохраните его в текстовом файле
  • Проще всего просто сохранить файл jquery.js в вашем webroot (обычно public_html), но вы можете хранить его в любом месте (и называть его всем, что хотите), вам просто нужно использовать одно и то же имя/местоположение, когда вы ссылаетесь на него в своем <script>.
  • Ниже пример хранится в поддиректории js

  • Включите его в свои заголовки, таким образом:

Три: 3. Комбинация вышеперечисленного с резервным

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script> window.jQuery || document.write('<script src="../js/jquery-1.10.2.min.js"><\/script>')</script>

Вышеприведенный код делает следующее:

а. Загрузите библиотеку jQuery из CDN
б. Если CDN не загружается, загрузите jQuery из указанного места на моем сервере (обратите внимание, что библиотека jQuery также должна быть доступна на вашем сервере в указанном месте).

Заметки:

  • Существуют две формы кода jquery.js, которые вы можете использовать: minified и regular. Разница в том, что минифицированный код загружается быстрее, но обычный код кода доступен для человека. Используйте то, что вы пожелаете. Если вы решите настроить библиотеку jQuery для своих собственных целей в какой-то день, вам нужно будет отредактировать удобочитаемый человек.
Поделиться
  • 0
    Догадаться. $ и $ ui были связаны, и весь код работал. У @gibberish было это изначально, и он понял, что в начале адреса CDN должно быть указано «http:».

Ещё вопросы

Сообщество Overcoder
Наверх
Меню