Предыдущий ролик Следующий ролик  

Видео урок: Загрузка контента при помощи jQuery

Создание отзывчивого веб-дизайна

Теперь, когда наш скприпт с функцией document.ready хорошо работает внутри JavaScript файла, мы можем начать загружать контент. Давайте вернемся к design.js. Вне функции document.ready давайте напишем несколько return и создадим нашу собственную пользовательскую функцию. Мы пишем function, пробел, и назовем ее "loadHero". Круглые скобки, фигурные скобки. Открываем ее. Внутри этой функции мы используем функцию JQuery load, чтобы загрузить контент из HTML в наш div с id равным hero. Внутри этой функции нам нужно нацелиться на div с id равным hero, а затем использовать функцию JQuery load.

Мы пишем знак доллара, открываем круглую скобку, ставим одинарную кавычку, первый строковый литерал, знак фунта, hero, закрывающая круглая скобка, .load. Круглые скобки, строковый литерал. Мы хотим указать на контекстный файл. Итак, content/hero_content_large.html. Строковый литерал, круглые скобки, затем точка с запятой. Теперь, когда создана наша пользовательская функция, нам нужно вызвать функцию, как только документ будет готов. Давайте скопируем имя функции loadHero. Идем к document.ready, вставляем loadHero, начинаем с круглых скобок, а затем точка с запятой.

Давайте перейдем сюда и перед алертом поставим два дефиса, чтобы его закомментировать. И вот что произойдет: если кто-то загрузит эту HTML страницу, будет вызвана наша функция loadHero, и она найдет HTML файл, а также она примет весь контент HTML файла и вставит весь этот HTML внутрь div с id равным hero. Чтобы протестировать это, давайте вернемся к myWebsite и перезагрузим index.html в браузере. И теперь мы увидим, что изображение грузится сверху. Мы видим текст верхнего колонтитула для большого экрана, наше описание и вызов кнопки для действия.

Если вы достигли этой точки и HTML не грузится на страницу, но ранее вы видели алерт, это означает, что ваш браузер не поддерживает локальную загрузку HTML файла на существующую HTML страницу. Во время записи этого видео ни Firefox, ни Chrome не поддерживали локальную загрузку HTML файла. Это означает, что если вы работаете с HTML файлом, который находится на вашем жестком диске, вы не можете загрузить другой HTML файл на существующую страницу. Все, что вы можете сделать по этому поводу, - использовать другой браузер. В данном конкретном курсе я использую Safari от Apple.

Еще вы можете загружать файлы на веб-сервер. Все браузеры поддерживают загрузку AJAX с веб-сервера. Другой возможностью является работа с веб-сервера на вашем локальном компьютере, если таковой есть. Либо вы можете установить приложение, например, MAMP или WAMP, которое позволит вам запустить веб-сервер в качестве приложения на вашем компьютере. Если вы хотите рассмотреть такой вариант, на lynda.com есть два курса Мортена Ренд-Хендриксена, который покажет вам, как установить WAMP или MAMP на вашем компьютере, чтобы иметь возможность запустить сервер.

А теперь, когда контент должным образом загружен на страницу, давайте поработаем над стилизацией этого контента.