Делаем меню с использованием вкладок с помощью javascript
Рисовал не так давно сайт для Черниговского автосалона и невольно озадачился парочкой интересных решений на основе javascript. Об одном из них пойдёт речь в этой заметке. Другое имеет полное право быть выделено как отдельный пост, так как решает свои специфические задачи. Позволим же ему воспользоваться этим правом в полной мере.
Итак, пойдёт разговор сегодня о такой красивости, как вкладки или табы. А точнее о меню на их основе. Цель – написать наипростейший код, выполняющий полностью поставленные перед ним задачи. Конечно, скрипт обязан быть максимально кратким и надёжным. Там, где можно написать 1 строку не стоит городить десяток, что довольно часто можно наблюдать даже на сайтах, сделанных «крутыми» сайтостроительными конторами. И естественно, понимать его обязаны все более менее вменяемые браузеры.
Поехали. Вначале мной было подсмотрено решение для вкладок у ForSimple (мне оно показалось наиболее простым), а также изучено пару решений от Мастера Gordi. Были также изрядно истоптаны тропинки поисковиков по нужным запросам, однако ничего интерессного найти не удалось.
Смысл нашего скриптика в том, чтобы при запуске функции нужные вкладки выделялись (остальные при этом должны быть невыделены), а также пользователю показывается нужный слой с подменюшкой (остальные в это время обязаны быть скрыты). Выделить/снять выделение и скрыть/показать элемент просто. Это делается путём назначения стилей CSS и функции javascript getElementById.
С помощью простейшей конструкции мы можем выполнить нашу задачу.
document.getElementById('tab1').className='sel';
document.getElementById('cont1').style.display='block';
//выделяем нужный таб и показываем нужный слой
document.getElementById('tab2').className='nonsel';
document.getElementById(‘cont2’).style.display='none';
…
…
//снимаем выделение с остальных табов, а слои скрываем
}
В принципе этого скрипта уже достаточно для выполнения нашей задачи. Он будет нормально работать, причём в любом браузере. Смотрим рабочий пример на 4 вкладки. Единственные его минусы - размер и громоздкость. Ведь если вкладок довольно много, величина скрипта становится значительной. При четырёх табах каждая вкладка описывается с помощью восьми строк. Естественно, такое положение вещей не могло устроить меня, так как одним из моих принципов в вёрстке и разработке является минимализм. И я пошёл дальше.
Порывшись ешё немного в Гугле, удалось написать упрощённый вариант скрипта. Его главное отличие от предыдущего – наличие цикла. Обязательное правило: вкладкам и слоям должны быть выданы соотвествующие айдишники. То есть, первый таб – tab1, первый слой – cont1, и так далее.
for(i=1;i<=4;i++) {
document.getElementById('tab'+i).className='nonsel';
document.getElementById('cont'+i).style.display='none';
}
//снимаем выделение со всех табов, все слои скрываем
document.getElementById('tab1').className='sel';
document.getElementById('cont1').style.display='block';
//выделяем нужный таб и показываем нужный слой
}
Итого получилось четыре короткие функции (по количеству вкладок). Уже неплохо. Оптимизация налицо, ведь удалось в 2 раза уменьшить количество строк. Смотрим следующий рабочий пример. Однако это ещё не идеал.
Конечно, сократить функцию уже врядли получится. Зато можно сократить количество функций. В идеале нужно делать все операции с помощью одной небольшой функции, а их пока целых четыре. Далее всё очень просто. Нужно всего лишь задаться вопросом, что является исходными данными для скрипта и можем ли мы их передавать динамически. А вводной служит всего лишь одна цифра – айдишник (таба и слоя), и передавать его мы не только можем, но и обязаны, если не хотим расписывать энное количество лишних строк скрипта.
Получаем на выходе простейшее решение:
for(i=1;i<=4;i++) {
document.getElementById('tab'+i).className='nonsel';
document.getElementById('cont'+i).style.display='none'
}
//снимаем выделение со всех табов, все слои скрываем
document.getElementById('tab'+n).className='sel';
document.getElementById('cont'+n).style.display='block';
//выделяем нужный таб и показываем нужный слой
}
Последний рабочий пример можно лицезреть по линку.
Итого: имеем универсальное простое решение для реализации сложной динамической менюшки с использованием вкладок. Причём работает оно в любом браузере (естественно, при включённом javascript).
Кстати, хотел бы заметить, что активировать скрипт можно как угодно (по клику или наведению). Мне нравится больше вариант с onmouseover. Ведь в результате получаем меню, которое реагирует на наведение курсора, однако в ссылке вкладки всё равно стоит линк. Так, даже при выключенном жаваскрипте пользователь сможет перейти по ссылке меню.
--------------------
Денис Чекалов продолжает пополнять свой список блогов, авторы которых активно меняются постовыми.
А вы знаете как поднять ТИЦ / Pr сайта, увеличить посещаемость сайта?
Хотите научится продвигать сайт? SEO блог начинающего вам поможет.
Бесплатный редактор для Lasto-блог. Новая версия
Как известно, в базовом дистрибутиве любимого поисковиками движка Lasto-блог нет какого-нибудь, даже самого простого редактора html тегов. Это безобразие необходимо было обязательно исправить, чем и озаботился владелец данного блога. О первых потугах запись лежит вот тут. Её можете прочесть на досуге. Там описано внедрение редактора в совершенно любую страницу (даже html на бесплатном хостинге) без всякой автоматизации. Возможности только базовые. Теперь же хочу представить новую версию редактора с новым функционалом и оформленную в виде плагина.
Итак, продолжим. Автор замечательного блог-движка, гуру электронной коммерции, SEO и веб-мастерринга, Вадим Ласто, более известный как Мастер Ласто, выложил на своём сайте небольшой визуальный редактор Nice-Edit в виде плагина. Однако он подойдёт наверняка не всем. Например, не всем нужен именно визуальный редактор. Как по мне, редактор тегов BUEditor это самое то, потому как пользователь может не только тупо нажимать кнопки, заданные автором скрипта, а имеет возможность вертеть редактором как угодно. Да и потребности у людей разные. Одному нужно пять кнопок, а второму - двадцать пять.
Немного повторюсь и расскажу о BUEditor. На самом деле это очень хороший модуль для CMS Drupal. Самостоятельной версии этот редактор не имеет, но использовать вне КМС его при желании можно и, как показывает практика, даже нужно.
По сути плагин является редактором BUEditor, оснащённым новыми функциями (аплоадом файлов) и оформленным в виде плагина для простой интеграции в Ласто-блог. Главными его достоиствами являются:
- простая интеграция (требуется загрузить плагин на сервер и прописать несколько строк настроек);
- малый размер (33 килобайта с картинками в архиве);
- повышеная поддатливость к изменениям;
- умение загрузить изображения и файлы на сервер;
- функции помощи и предпросмотра.
В базовой комплектации идёт довольно большой набор кнопок, а также пару очень полезных функций: Предпросмотр и Помощь. Если вдруг вы забудите назначение кнопочек своего редактора, он с радостью напомнит вам эту важную информацию. А если захочется глянуть одним глазком на результат своих стараний, в этом поможет функция Предпросмотр.
Также очень радует, что набор кнопок полностью зависит от владельца блога. Например, у вас есть особый класс для первого абзаца. Вы легко сможете задать кнопке функцию вставки <p class="first">текст абзаца</p> и больше не заниматься писаниной классов вручную.
Ещё один вариант использования редактора - задание кнопкам разных шаблонов. Например, у вас разные разделы сайта/блога имеют разные шаблоны оформления или просто предоставления информации. Так вот. Такой редактор запросто выплюнет по клику вам этот самый шаблон. Если говорить проще - любая комбинация тегов и текста отныне вам подвластна. Плюс к тому, он ещё и javascript умеет исполнять.
Однако хватит слов об этом чудесатом редакторе. Лучше взгляните на демонстрашку и нажимайте кнопку даунлоада в шопе.
Конечно BUEditor можно использовать не только на блоге от Ласто. Его можно задействовать где угодно. Для этого выложена другая версия.
Использовать или нет данную тулзу решать конечно вам, но лично я буду и в дальнейшем пользоваться БУЭдитором. Думаю, во всех скриптах, к которым я приложу руку в ближайшее время, можно будет лицезреть эти кнопочки.
UPDATE: Найдена серьёзная уязвимость в процедуре загрузки файлов на сервер. Посему линки даунлоада временно убраны из шопа. Всем, кто уже скачал данный плагин НЕОБХОДИМО удалить файлы, отвечающие за аплоад. По дефолту это up.php и up2.php Извиняюсь за причинённые неудобства. Вскоре плагин будет обновлён и доступен к скачиванию. Спасибо за терпение.
Реализуем сервис публикации новостей в nano-CMS
Продолжаем колдовать над nano-CMS.
Ранее был опубликован мануал по реализации сервиса комментирования в nano-CMS. А сегодня мы поговорим о том, как внедрить в nano-CMS сервис публикации новостей и RSS-ленту с помощью того же скрипта комментариев. Ежели вам лень читать много буков и влазить в программный код КМС-ки, посетите страничку покупки готовой сборки Ajax 3.8 Comentit и nano-CMS - nano-News-Simple в магазине Инструменты сайто-строителя. Демонстрация лота находится здесь.
Как вы несомненно знаете, nano-CMS это очень простая и лёгкая система управления контентом. Однако в базовой комплектации мы получаем всего лишь статичный сайт, неспособный к самостоятельному наполнению материалом. Ранее мы рассмотрели как оборудовать нану сервисом комментариев (демо-сайт со всеми пояснениями). Теперь с помощью того же скрипта мы реализуем на базе nano-CMS небольшой новостной сервис.
Расширять возможности nanoCMS мы будем с помощью чудесного скрипта Ajax CommentIt. Мы сможем добавить сервис новостей, оборудовать нану блоком последних ньюсов и новостной RSS-лентой. Всё это несомненно улучшит перелинковку и индексацию вашего сайта.
Итак, начнём наш моддинг наны.
Договоримся для начала, что будем оперировать файлом news.php, а не comment.php. Однако comment.php нам тоже пригодится, поэтому продублируем этот файл и назовём его news.php.
Правка файла index.php
Всё точно также, как и с комментариями. Исчерпывающую информацию можно получить здесь и здесь
Правка файла _design.php
Аналогично предыдущему пункту. Не вижу смысла 2 раза писать одно и тоже.
Вставляем новости
В нужном месте (обычно после переменной $content) нужно вставить строку:
Вставляем блок последних новстей
В нужном месте (например после переменных $leftmenu или $rightmenu) нужно вставить строку:
Убираем форму комментирования в админку
Так как мы собираемся публиковать новости с помощью панели администратора, то форма добавления новости нам не нужна на сайте.
Для этого в файле news.php следует удалить строки:
if ($coder==1) {$titleloading=" Идёт загрузка...";} else {$titleloading=" Рдёт загрузка...";}
и
echo "<div id='addfomz'>";
viewform();
echo "</div>";
<input type="hidden" name="url" id="urls" value="/папка_со_скриптом/news.htm">
<input type="hidden" name="for" id="forms" value="123">
<input type="hidden" name="maxcom" id="maxcom" value="<?echo$sumvl;?>">
Затем на нужно вставить форму публикации в админку. Ведь её там нет по умолчанию. Для этого в нужном месте в файла adm.php например после строк:
<font color="#CCCCCC"><span style="font-size:24pt;">CommentIt - Администрирование</span></font>
<hr />
вставляем форму публикации новости:
<br />
<hr />
И конечно, нам нужно, чтобы новости отображались только на нашей странице news.htm. Для этого редактируем файл comment.php. Заменяем строку:
строкой:
Редактируем форму публикации и убираем капчу
Практически всё сделано, однако в админке хочется удобства. Для этого нужно убрать лишние поля и капчу. Поэтому редактируем файл skin/addcom.html. Добавляем стиль style="display:none;" полю Ваша почта: и div'у, в который заключён шаблон {$capt}. И удаляем поле ввода капчи, так как оно нам больше не понадобится.
Также было бы неплохо добавить полю input id="nick" параметр value="Admin", чтобы каждый раз не вводить своё имя.
Далее удаляем саму проверку капчи при публикации новости. Это можно сделать двумя путями.
Первый: В файле func.php убираем строки:
}else{
echo '<input type="hidden" name="errorcamp" id="errorcamp" value="1">';
if ($coder==1) {$bad.="Вы не правильно ввели символы, повторите попытку";} else {$bad.="Р’С‹ РЅРµ правильно ввели символы, повторите попытку";}
}
Второй: В файле config.php после строки: # CAPTCHA string length поставить $length = 0;
Теперь вам не придётся вводить капчу и своё имя при публикации новостей, а сама форма отправки данных приобретёт удобный вид.
Напомню, что готовую сборку вы можете приобрести в нашем шопе. Вам не придётся проделывать все эти операции, а потребуется только загрузить сборку на хостинг, создать 1 таблицу в базе данных MySQL и выставить настройки. Все необходимые инструкции по установке вы получите при покупке.
Если же интересует помощь в настройке этого хозяйства, могу ответить на ваши вопросы в мыл. Возможна также и оплачиваемая услуга по интеграции в ваш шаблон или адаптации шаблона под nano-CMS с добавлением возможности публикации новостей. Все предложения несомненно будут рассмотрены. Конечно возможно одновременно реализовать на сайте и сервис новостей и сервис комментариев. Скрипт для этого покупать заново не нужно.
--------------------
Новый конкурс raznoblog’a Первый блог-портал для женщин и мужчин меняется постовыми шесть к одному!
Сode Is Art тоже менятся постовыми, но один к одному.
И Блог Seo от Fewal (Фьюал) туда же. Тоже предлагает обмен ссылками. К сожалению, 1 к 1. Немного в тырнете сейчас проходит акций, участники которых могут получить за свой линк 2 или 3 ссылки.
