Создание закладок в Joomla 1.5.х двумя способами
Опубликовано: 01.09.2018
Пользователям и вебмастерам нравится интерфейс панели Joomla — закладки, которые позволяют скрывают от пользователя ненужные для него данные и показывают ему то, что важно на данный момент времени. Такой интерфейс на практике можно реализовать двумя методами – при помощи PHP и HTML . Первый метод приведен ниже – код с комментариями, который можно применять в скриптах. Комментарии поясняют действие.
Кнопка ДОБАВИТЬ В ЗАКЛАДКИ для Joomla 3
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | < ?php //Подключение класса закладок jimport('joomla.html.pane'); //Представитель класса $pane =& Jpane::getInstance(); //Вывод строки tabs-pane с закладками echo $pane->startPane("tabs-pane"); //Название первой закладки с идентификатором first-tab echo $pane->startPanel("Закладка №1", "first-tab"); //Вывод данных, которые будут размещаться в закладке№1 echo '<h1>Мы создали первую закладку</h1>'; //Здесь закладка №1 закрывается echo $pane->endPanel(); //Название второй закладки с идентификатором second-tab echo $pane->startPanel("Закладка №2", "second-tab"); //Вывод данных, которые будут размещаться в закладке№2 echo '<h1> Закладка №2</h1>'; //Здесь закладка №2 закрывается echo $pane->endPanel(); //Строка с закладками закрывается echo $pane->endPane(); ?> |
< ?php //Подключение класса закладок jimport('joomla.html.pane'); //Представитель класса $pane =& Jpane::getInstance(); //Вывод строки tabs-pane с закладками echo $pane->startPane("tabs-pane"); //Название первой закладки с идентификатором first-tab echo $pane->startPanel("Закладка №1", "first-tab"); //Вывод данных, которые будут размещаться в закладке№1 echo '<h1>Мы создали первую закладку</h1>'; //Здесь закладка №1 закрывается echo $pane->endPanel(); //Название второй закладки с идентификатором second-tab echo $pane->startPanel("Закладка №2", "second-tab"); //Вывод данных, которые будут размещаться в закладке№2 echo '<h1> Закладка №2</h1>'; //Здесь закладка №2 закрывается echo $pane->endPanel(); //Строка с закладками закрывается echo $pane->endPane(); ?>
Установка модуля соц закладок в любой компонент
Чтобы вывести содержимое закладок не в виде таблиц, а в виде так называемого аккордеона, необходимо передать параметр
| 1 | sliders: $pane =& Jpane::getInstance('sliders'); |
sliders: $pane =& Jpane::getInstance('sliders');
Второй метод состоит в том, чтобы, имея страницу, иметь возможность для визуального управления блоками с помощью javacsript . Недостаток первого метода – нужно перезагружать страницу, а второй не будет работать с отключенным javacsript в браузере. Однако для кого-то оба эти метода могут быть хорошим решением проблемы отображения закладок. Вывод при помощи HTML – выводим все содержимое страницы, и видимая вкладка определяется значением атрибута class со строкой «on» и таблицей CSS. Следующая вкладка становится видимой при клике на нее при помощи javacsript – снимается атрибут «on» у первой и присваивается второй вкладке, и т.д. HTML-код будет выглядеть таким образом:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | < !DOCTYPE html> <html> <head> <title>tabs</title> <!-- Подключается tabs.js. --> <script type="text/javascript" src="/tabs.js"></script> <!-- Подключается tabs.css. --> <link rel="stylesheet" type="text/css" href="/tabs.css"/> </head> <body> <div id="tabs"> < !—Список вкладок Первая вкладка включена - class="on" --> <ul id="tabs-ul"> <li id="li1" class="on"><span class="tab">Первая закладка</span></li> <li id="li2"><span class="tab">Вторая закладка</span></li> <li id="li3"><span class="tab">Третья закладка</span></li> </ul> < !—Контент вкладок. div для первой закладки включен - class="mod on" --> <div id="dd1" class="mod on"><p>Контент первой закладки</p></div> <div id="dd2" class="mod"><p> Контент второй закладки </p></div> <div id="dd3" class="mod"><p> Контент третьей закладки </p></div> </div> </body> </html> |
< !DOCTYPE html> <html> <head> <title>tabs</title> <!-- Подключается tabs.js. --> <script type="text/javascript" src="/tabs.js"></script> <!-- Подключается tabs.css. --> <link rel="stylesheet" type="text/css" href="/tabs.css"/> </head> <body><div id="tabs"> < !—Список вкладок Первая вкладка включена - class="on" --> <ul id="tabs-ul"> <li id="li1" class="on"><span class="tab">Первая закладка</span></li> <li id="li2"><span class="tab">Вторая закладка</span></li> <li id="li3"><span class="tab">Третья закладка</span></li> </ul> < !—Контент вкладок. div для первой закладки включен - class="mod on" --> <div id="dd1" class="mod on"><p>Контент первой закладки</p></div> <div id="dd2" class="mod"><p> Контент второй закладки </p></div> <div id="dd3" class="mod"><p> Контент третьей закладки </p></div> </div></body> </html>
Дальше выводим содержимое tabs.js, заключительной части кода на языке javascript:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | var last; /* Последняя вкладка */ /* Подключение обработчика documentDown клик левой клавиши мышки*/ addHandler(document,'mousedown',documentDown); function addHandler(e,event,action){ if(document.addEventListener) //все браузеры, кроме Internet Explorer e.addEventListener(event,action,false); else if(document.attachEvent) // Internet Explorer, кроме остальных браузеров e.attachEvent('on' + event,action); else e['on' + event] = action; } /* Обработчик клика */ function documentDown(e){ e = e || event; var target = e.target || e.srcElement; if(target.tagName == 'SPAN' && target.className == 'tab' && target.parentNode.tagName == 'LI'){ //Если клика не было - !last, то результат //элемент с ID tabs-ul и первый li, который будет //last if(!last){ last = getElsByTagName(getElById('tabs-ul'),'li')[0]; } //Удаление у предыдущего элемента li из класса строчку «on» removeClass(last,'on'); //Из блока с содержимым вкладки удаляем //из класса строчку «on» removeClass(getElById(last.id.replace('li','dd')),'on'); //Установка кликнутой вкладки last = target.parentNode; // Строка «on» добавляется в класс названия и контента закладки addClass(last,'on'); addClass(getElById(last.id.replace('li','dd')),'on'); } } //Получение элемента по ID function getElById(id){ return document.getElementById(id); } //Массив name, внутри e function getElsByTagName(e,name){ return e.getElementsByTagName(name); } //Добавление строчки name в класс e function addClass(e,name,index){ if(e.nodeType == 1){ if(index){ e.className = name; } else e.className += ' ' + name; } } //Удаление строки name из класса e function removeClass(e,name){ if(name){ var sentence = new RegExp('\\s*\\b' + name + '\\b','g'); e.className = e.className.replace(sentence,''); } else e.className = ''; } |
var last; /* Последняя вкладка *//* Подключение обработчика documentDown клик левой клавиши мышки*/ addHandler(document,'mousedown',documentDown);function addHandler(e,event,action){ if(document.addEventListener) //все браузеры, кроме Internet Explorer e.addEventListener(event,action,false); else if(document.attachEvent) // Internet Explorer, кроме остальных браузеров e.attachEvent('on' + event,action); else e['on' + event] = action; }/* Обработчик клика */ function documentDown(e){ e = e || event; var target = e.target || e.srcElement; if(target.tagName == 'SPAN' && target.className == 'tab' && target.parentNode.tagName == 'LI'){ //Если клика не было - !last, то результат //элемент с ID tabs-ul и первый li, который будет //last if(!last){ last = getElsByTagName(getElById('tabs-ul'),'li')[0]; } //Удаление у предыдущего элемента li из класса строчку «on» removeClass(last,'on'); //Из блока с содержимым вкладки удаляем //из класса строчку «on» removeClass(getElById(last.id.replace('li','dd')),'on'); //Установка кликнутой вкладки last = target.parentNode; // Строка «on» добавляется в класс названия и контента закладки addClass(last,'on'); addClass(getElById(last.id.replace('li','dd')),'on'); } }//Получение элемента по ID function getElById(id){ return document.getElementById(id); }//Массив name, внутри e function getElsByTagName(e,name){ return e.getElementsByTagName(name); }//Добавление строчки name в класс e function addClass(e,name,index){ if(e.nodeType == 1){ if(index){ e.className = name; } else e.className += ' ' + name; } }//Удаление строки name из класса e function removeClass(e,name){ if(name){ var sentence = new RegExp('\\s*\\b' + name + '\\b','g'); e.className = e.className.replace(sentence,''); } else e.className = ''; }
Понравилась запись? Подпишитесь на обновления по почте: