Форум русской поддержки Joomla!® CMS
09.12.2016, 11:50:55 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Как вызвать функцию по клику?

 (Прочитано 136 раз)
0 Пользователей и 1 Гость смотрят эту тему.
DjumaI
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 12


« : 25.11.2016, 06:26:29 »

Ребята подскажите пожалуйста!  
По клику на ссылку должна срабатывать функция.

Ссылка 1: <a class="close-link"><i class="fa fa-close"></i></a>
Ссылка 2: <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>

Функция находится в отдельном файле, Файл js подключен к шаблону сайта.

Смотрел фаербагом html-код страницы, но не вижу как вызывается эта функция.

(Функция по клику сворачивает и разворачивает блок модуля с текстом.
Пример можете посмотреть здесь https://colorlib.com/polygon/gentelella/index.html )

Скрипт смотрите в спойлере:
Показать текстовый блок
Мой HTML-код:
Показать текстовый блок
CSS:
Показать текстовый блок

Здесь https://colorlib.com/polygon/gentelella/index.html смотрите рабочие блоки  App Versions,  Device Usage,  Quick Settings
Но даже если скопировать HTML-Код (Весь модуль напр. App Versions) и вставить рядом с этими блоками на этом же сайте(в визуальном редакторе) он не будет работать!
« Последнее редактирование: 25.11.2016, 10:32:03 от DjumaI » Записан
Филипп Сорокин
Живу я здесь
******

Репутация: +121/-4
Offline Offline

Пол: Мужской
Сообщений: 1466


« Ответ #1 : 25.11.2016, 08:04:08 »

И вопрос ваш в чём?
Записан
DjumaI
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 12


« Ответ #2 : 25.11.2016, 08:23:13 »

И вопрос ваш в чём?
Почему функция у меня на сайте не вызывается а на их сайте работает?

Я штмл со стилями и файл со скриптами СКОПИРОВАЛ с того сайта!
(ШТМЛ-код копировал с помощью инструментов для разработчика в браузере, подозреваю что в ШТМЛ-коде при таком копировании упускается какое то событие типа onclick или чтото другое )

Пробовал с помощью инструмента разработчиков визуально редактировать блоки на их сайте, копировал полностью модуль и вставлял рядом его копию - в итоге копия не работает а оригинал работает сворачивается и разворачивается, почему не могу понять!
Подскажите пожалуйста, всю ночь гуглил решение так и не нашел!
Записан
Филипп Сорокин
Живу я здесь
******

Репутация: +121/-4
Offline Offline

Пол: Мужской
Сообщений: 1466


« Ответ #3 : 25.11.2016, 08:53:18 »

Цитировать
ШТМЛ
HTML, эйч-ти-эм-эль Azn

Функция, о которой вы говорите, подвешена в качестве обработчика на определённое событие. Это можно сделать не только в ШТМЛ посредством аттрибута onclick (этот вариант считается "грязным" кодингом), но также в JavaScript, встроенном или внешнем скрипте, например:

Код:
jQuery(function($){
  $('.close-link').on('click', ОБРАБОТЧИК);
});

P.S. Жирным шрифтом не злоупотребляйте. Ваши выделения никак не влияют на содержание Вашего вопроса и способность окружающих его понять.

Записан
DjumaI
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 12


« Ответ #4 : 25.11.2016, 09:13:40 »

HTML, эйч-ти-эм-эль Azn

Функция, о которой вы говорите, подвешена в качестве обработчика на определённое событие. Это можно сделать не только в ШТМЛ посредством аттрибута onclick (этот вариант считается "грязным" кодингом), но также в JavaScript, встроенном или внешнем скрипте, например:

Код:
jQuery(function($){
  $('.close-link').on('click', ОБРАБОТЧИК);
});

P.S. Жирным шрифтом не злоупотребляйте. Ваши выделения никак не влияют на содержание Вашего вопроса и способность окружающих его понять.


Спасибо за ответ и поучения  :-)
Но мне вот интересно почему мною  описаный пример у меня не работает? Где я протупил или что упустил?
Это уже дело принципа узнать и усвоить урок.

Записан
robert
Профи
********

Репутация: +344/-11
Offline Offline

Пол: Мужской
Сообщений: 3591


« Ответ #5 : 25.11.2016, 10:03:54 »

Приведите ваш HTML-код: без него нечего вам подсказать.
Записан
DjumaI
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 12


« Ответ #6 : 25.11.2016, 10:16:35 »

Приведите ваш HTML-код: без него нечего вам подсказать.
Мой HTML-код:
Показать текстовый блок
CSS:
Показать текстовый блок

Здесь https://colorlib.com/polygon/gentelella/index.html смотрите рабочие блоки  App Versions,  Device Usage,  Quick Settings
Но даже если скопировать HTML-Код (Весь модуль напр. App Versions) и вставить рядом с этими блоками на этом же сайте ( с помощью инструмента для разработчика (визуальный редактор) ) он не будет работать!


« Последнее редактирование: 25.11.2016, 10:33:05 от DjumaI » Записан
robert
Профи
********

Репутация: +344/-11
Offline Offline

Пол: Мужской
Сообщений: 3591


« Ответ #7 : 25.11.2016, 10:40:05 »

Все работает же: https://jsfiddle.net/n_robert/weL0o3Lg/. Но зачем так много лишнего, если хотите лишь сворачивать/разворачивать элемент?
Записан
DjumaI
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 12


« Ответ #8 : 25.11.2016, 11:09:43 »

Все работает же: https://jsfiddle.net/n_robert/weL0o3Lg/. Но зачем так много лишнего, если хотите лишь сворачивать/разворачивать элемент?
Спасибо, действительно вижу у вас работает.
А у меня на локальном сервере не хочет вот скрин

Создаю сайт на базовом шаблоне Joomla 3.4.6 Протостар + Bootstrap 3 - может это какой то баг этого шаблона или конфликт бутстрапа?
Поставил Joomla options-master и отключил :
  • Mootools
  • Jquery
  • Bootstrap
Все ошибки исчезли но модуль все равно не сворачивается!
« Последнее редактирование: 25.11.2016, 12:27:14 от DjumaI » Записан
DjumaI
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 12


« Ответ #9 : 25.11.2016, 12:38:13 »

Все работает же: https://jsfiddle.net/n_robert/weL0o3Lg/. Но зачем так много лишнего, если хотите лишь сворачивать/разворачивать элемент?
(Извините что не ответил сразу )
Хочу сделать чтобы модульные позиции сворачивались и разворачивались и чтобы можно было закрыть блок.
Так как опыта в js практически ноль, пытаюсь кое как учиться взяв понравившийся готовый пример и переделывать под себя.
Записан
SmokerMan
Профи
********

Репутация: +694/-25
Offline Offline

Пол: Мужской
Сообщений: 5225



« Ответ #10 : 25.11.2016, 12:51:59 »

Создаю сайт на базовом шаблоне Joomla 3.4.6 Протостар + Bootstrap 3 - может это какой то баг этого шаблона или конфликт бутстрапа?
зачем лепить какие-то скрипты если это есть в Bootstrap?
http://getbootstrap.com/javascript/#collapse
Записан
DjumaI
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 12


« Ответ #11 : 25.11.2016, 13:06:38 »

зачем лепить какие-то скрипты если это есть в Bootstrap?
http://getbootstrap.com/javascript/#collapse
Спасибо незнал!  Бутстрап тогда решает сворачивание модуля и закрытие (alert).
А как на счет смены иконки при клике (шеврон вниз и шеврон вверх) - как ее организовать лучше?

И еще хотел бы Вас спросить, Роберт Н. сбросил мне ссылку на рабочий пример https://jsfiddle.net/n_robert/weL0o3Lg/ но если нажать на кнопку Run слева вверху (или CTRL + Return) то после этого пример перестает работать. Почему так?
Записан
DjumaI
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 12


« Ответ #12 : 25.11.2016, 13:14:15 »

Все работает же: https://jsfiddle.net/n_robert/weL0o3Lg/. Но зачем так много лишнего, если хотите лишь сворачивать/разворачивать элемент?
После нажатия на рун пример перестаёт работать.
Записан
robert
Профи
********

Репутация: +344/-11
Offline Offline

Пол: Мужской
Сообщений: 3591


« Ответ #13 : 25.11.2016, 14:13:45 »

После нажатия на рун пример перестаёт работать.
Не перестает. Не знаю, на что вы там нажимали.
Убрал лишний код. И еще пример, чтобы вы поняли, как все работает.
Записан
DjumaI
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 12


« Ответ #14 : 27.11.2016, 18:46:16 »

Не перестает. Не знаю, на что вы там нажимали.
Убрал лишний код. И еще пример, чтобы вы поняли, как все работает.
Извините что на несколько дней пропал и не ответил Вам!
Спасибо Вам большое за исправленный код (как только заменил его у себя - все заработало). Особенно Вам благодарен за обучающий пример  который объясняет как это работает!
Спасибо Вам за то, что поделились своими знаниями!
Вопрос решен!
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet