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

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

Как создать несколько HTML разметок в шаблоне и почему Joomla не любит jquery?

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

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

Сообщений: 24


« : 13.07.2016, 16:14:00 »

Ребят всем привет, занялся созданием шаблона, и сделал разметку в index.php шаблона, когда закончил
шаблон,
все вроде бы ничего, но тут меня осенило что шаблон визуально статичен, то есть
файл с HTML разметкой всего один, это index.php и только он 1 подстраивается под
все переходы по ссылкам категориям и так далее на сайте, но хотелось бы создать хотябы
парочку допустим 1 HTML файл отвечает за главную страницу, другой за остальные
, я бы хотел узнать как это реализовать.

Плюс создал меню на HTML CSS js
в чем фишка меню, в том что при наведении на элемент списка  меню, начинает
светится блок под элементом меню, каким образом работает код:

                                        $(".beetwen__position__li1").hover(function(e)

                    {

                                        $("#block1").css("background", "#7CC900");

                  

                    });


класс меню <li> это .beetwen__position__li1 , и на него наводится курсор, и срабатывает функция на блок
с идентификатором  #block1, и у него меняется цвет фона.

Теперь зачем же я сделал у списка класс, а у блока идентификатор, потому что просто на HTML CSS js,
js подхватывает и с классом и с идентификатором элементы без проблем.
Но как известно Joomla списки меню создает сама, и только с классом, id прописать нельзя.
Так вот вставляю рабочий код HTML CSS js в index.php шаблона, а там скрипт не работает
Куда копать? !
Записан
umbabaraumba
Практически профи
*******

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

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

если помог можете поставить +


« Ответ #1 : 13.07.2016, 16:29:24 »

Ребят всем привет, занялся созданием шаблона, и сделал разметку в index.php шаблона, когда закончил
шаблон,
все вроде бы ничего, но тут меня осенило что шаблон визуально статичен, то есть
файл с HTML разметкой всего один, это index.php и только он 1 подстраивается под
все переходы по ссылкам категориям и так далее на сайте, но хотелось бы создать хотябы
парочку допустим 1 HTML файл отвечает за главную страницу, другой за остальные
, я бы хотел узнать как это реализовать.
вот и вот

Плюс создал меню на HTML CSS js
в чем фишка меню, в том что при наведении на элемент списка  меню, начинает
светится блок под элементом меню, каким образом работает код:

                                        $(".beetwen__position__li1").hover(function(e)

                    {

                                        $("#block1").css("background", "#7CC900");

                  

                    });


класс меню <li> это .beetwen__position__li1 , и на него наводится курсор, и срабатывает функция на блок
с идентификатором  #block1, и у него меняется цвет фона.

Теперь зачем же я сделал у списка класс, а у блока идентификатор, потому что просто на HTML CSS js,
js подхватывает и с классом и с идентификатором элементы без проблем.
Но как известно Joomla списки меню создает сама, и только с классом, id прописать нельзя.
Так вот вставляю рабочий код HTML CSS js в index.php шаблона, а там скрипт не работает
Куда копать? !

Проще сделать через CSS :hover, или замените в jQuery $ на jQuery
Записан
Beyl
Захожу иногда
**

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

Сообщений: 24


« Ответ #2 : 13.07.2016, 16:51:57 »

Спасибо umbabaraumba почитаю насчет 1 пункта.
Что касается 2 заменить знак переменной на jquery можно попробовать, про hover в сss он у меня уже есть и он меняет
стиль кнопок меню, а hover через jquery еще меняет и другие блоки вот в чем задумка)
Записан
Beyl
Захожу иногда
**

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

Сообщений: 24


« Ответ #3 : 13.07.2016, 17:00:52 »

Записан
umbabaraumba
Практически профи
*******

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

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

если помог можете поставить +


« Ответ #4 : 13.07.2016, 17:03:47 »

про hover в сss он у меня уже есть и он меняет
стиль кнопок меню, а hover через jquery еще меняет и другие блоки вот в чем задумка)
Так можно все сделать через CSS и кнопки и другие блоки .
Записан
Beyl
Захожу иногда
**

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

Сообщений: 24


« Ответ #5 : 13.07.2016, 17:10:28 »

Так можно все сделать через CSS и кнопки и другие блоки .
А каким образом CSS может менять абсолютно другие блоки несвязанные с меню?
Записан
umbabaraumba
Практически профи
*******

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

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

если помог можете поставить +


« Ответ #6 : 13.07.2016, 17:38:09 »

Вы хотите сделать чтоб при наведении на пункт меню менялся цвет горизонтальной линии под ним ?
Записан
Beyl
Захожу иногда
**

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

Сообщений: 24


« Ответ #7 : 13.07.2016, 19:17:57 »

Вы хотите сделать чтоб при наведении на пункт меню менялся цвет горизонтальной линии под ним ?
Да именно мне кажется CSS так пока не умеет
Записан
vipiusss
Профи
********

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

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


Skype: renor_


« Ответ #8 : 13.07.2016, 19:27:51 »

http://ianlunn.github.io/Hover/
Там есть и ваше решение.
CSS умеет:Border Transitions
Записан
Beyl
Захожу иногда
**

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

Сообщений: 24


« Ответ #9 : 13.07.2016, 19:43:51 »

http://ianlunn.github.io/Hover/
Там есть и ваше решение.
CSS умеет:Border Transitions
свойство hover в CSS может воздействовать непосредственно на элемент, то есть в данном случае на его бардюр,
но у меня блоки абсолютно не контачат с меню просто дивы сами по себе.
Записан
vipiusss
Профи
********

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

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


Skype: renor_


« Ответ #10 : 13.07.2016, 20:24:53 »

div:hover{ border-bottom: 5px solid #ccc; }

Если плавное появление линии, то можно добавить:
-webkit-transition: width 2s; /* для Safari  */
transition: width 2s;

В секундах регулируете.

Показать текстовый блок
Записан
Beyl
Захожу иногда
**

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

Сообщений: 24


« Ответ #11 : 13.07.2016, 20:34:18 »

div:hover{ border-bottom: 5px solid #ccc; }

Если плавное появление линии, то можно добавить:
-webkit-transition: width 2s; /* для Safari  */
transition: width 2s;

В секундах регулируете.

Показать текстовый блок
Мне кажется этого не сделать только в CSS что прояснить картину скидываю код:
   
Показать текстовый блок
Записан
Страниц: [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