ПоделитьсяTweetПоделитьсяGoogle
Всем доброго дня, здравия, настроения, полицейских, депутатов, доброго попутного ветра в спину и добрых денег (шоб, цены не кусались 🙂 )!
Продолжаем уроки по ткачу мечт или снов — Дримвиверу. Похоже программу придумал Морфеус из Матрицы, так как Морфей формирует сны…
В этом уроке разберём Ява скрипт — js. Как с ними работать.
Для чего воронке ява скрипт ( js )? Ну прежде всего для раскрывающегося меню или остальной части вороки. То есть есть 10 отзывов о продукте или скринов с описанием прелестей продукта и чтобы наша воронка не раскрывалась сразу на полтора метра вниз, мы делаем 2 блока открытых, а остальные раскроются по кнопке, если посетитель заинтересуется. Читатель полюбопытствует и кликнет на кнопку типа » Посмотреть всё» и остальной текст раскроется.
Ставим js в сайт воронку
Для начала нам нужно прописать доступ нашей воронки в библиотеку jQuery. Для этого действия мы переходим в режим Код и вверху в голове документа перед тегом ставим код включения библиотеки, но прежде всего надо саму библиотеку jQuery закинуть в папку нашего сайта.
Библиотека jQuery
Способов несколько, мы возьмём самый удобный и быстрый. Скачаем с официального сайта и закинем в папку нашего сайта вонорнки. Можно ещё просто код доступа прописать от гугл, но тогда воронка будет медленнее грузится, пока запрос на гугл пойдёт, да и всякие не подключения, могут просто не сработать однажды. Такой вариант мы отодвинем в сторону. Лучше взять с сайта разработчика последнюю версию которая постоянно обновляется.
Итак берём библиотеку на официальном сайте разаработчика , где находятся 2 версии, одна минимизированная другая для разработчиков. Мы не конструкторы , берём минимизированную
ЧИТАТЬ: Онлайн генераторы в помощь.
Кликаем , откроется страница с кодом, его там много :-), правой кнопкой мыши и сохранить как , отправляете в папку сайта воронки с которым и боремся в данный момент…
Создадим в папке сайта новую папку js и забросим библиотеку ( им. Горького ) в неё :good:
Есть такое дело…
Далее пропишем код доступа к библиотеке в нашем сайте воронка вверху документа в голове перед тегом
Можно просто прописать код, но мы будем делать по правилам. Как у Марк Твена в «» Том Соер» — » Если будем делать не так как в книжках написано то скоро совсем запутаемся»
- Кликаем по тому месту куда ставить будем ( перед тегом ) и enter , то есть отступим , сделаем пространство.
- В Дриме вверху кнопка скрипта, жмём её
- Открываем папку Источника
- Указываем библиотеку и «Ок»
И вот этот код
Встал в текст, кому лень делать движения, просто код вставьте. А мы едем дальше, делаем класс для отзывов или скринов с текстом которые должны быть не видимыми и раскрываться по кнопке
ЧИТАТЬ: Программа для чистки компьютера
Кликаем на иконку с+ для редакции ,
Выбираем класс и даём название, я дал more, затем «Ок»
Выберим Display: none
Теперь зададим всем блокам которые будут скрытыми ( это 3-4;5 и последующие) этот класс)
Переключаемся в режим Код и так, как у нас блоки (div) уже имеют код мы добавим через пробел ещё один перед кавычками
На скрине 2 вверху уже добавлены, третий добавляется, как только ставите пробел появляется подсказка с классом ( more ) двойной щелчёк мыши и вы в дамках.
Можете убедится просмотрев в браузере изменения внешнего вида воронки. Кликаете на иконку с глобусом и выбираете любимый браузер — конечно же Гугл Хром 🙂
Вот теперь зададим кнопку. На панели инструментов кликаем «Формы»
берём кнопку, в открывшемся окошке пишем индификатор, например testButton ( без пробела ). «Ок», второе окошко спросит «Добавить…» не соглашаемся ( «Нет» так как нам не нужно вставлять кнопку в форму ) и кнопка встала в текст.
Далее сделаем кнопку абзацем ( заключим её в теги абзаца
…
), переключаемся в режим «Код«
ЧИТАТЬ: Как проверить шаблон wordpress
Теперь в режим «Дизайн» и кликаем по тегу абзаца внизу и задаём класс centerContent
Кнопка стала по средине и теперь можно вернутся в режим Код и вместо текста на кнопке «Отправить» вписать свой, например у меня » Показать остальное«
Теперь идём вверх до кода включения библиотеки и после него, то есть ниже и добавляем , в режиме «Общий«жмём «Сценарий«
добавляем пустой скрипт, в коде он выглядит так;
В середине пишем вот такой код, даю полностью, так как это тема целого урока, как сделать скрипт самому. Кому интересно есть курс по Дримвиверу в видеоформате
Короче прописали включение и задали 2 (2000)секунды, так симпатичнее он всплывает.
Копируйте полностью и вставляйте, между началом скрипта
и его концом
|
$(document).ready(function(e) { $(‘#testButton’).click(function(){ $(‘.more’).fadeIn(2000); }); }); |
смотрите в браузере и несказанно радуетесь :yahoo: , за это кликаете по рекламе яндекс и гугул на сайте раз 15-20, тогда и я радуюсь 🙂
Всё работает. И библиотека jQuery и ява скрипт — js.
На этом именно этот урок закончен. Дальше-больше…
ПоделитьсяTweetПоделитьсяGoogle