Рисовал не так давно сайт для Черниговского автосалона и невольно озадачился парочкой интересных решений на основе javascript. Об одном из них пойдёт речь в этой заметке. Другое имеет полное право быть выделено как отдельный пост, так как решает свои специфические задачи. Позволим же ему воспользоваться этим правом в полной мере.

Итак, пойдёт разговор сегодня о такой красивости, как вкладки или табы. А точнее о меню на их основе. Цель – написать наипростейший код, выполняющий полностью поставленные перед ним задачи. Конечно, скрипт обязан быть максимально кратким и надёжным. Там, где можно написать 1 строку не стоит городить десяток, что довольно часто можно наблюдать даже на сайтах, сделанных «крутыми» сайтостроительными конторами. И естественно, понимать его обязаны все более менее вменяемые браузеры.

Поехали. Вначале мной было подсмотрено решение для вкладок у ForSimple (мне оно показалось наиболее простым), а также изучено пару решений от Мастера Gordi. Были также изрядно истоптаны тропинки поисковиков по нужным запросам, однако ничего интерессного найти не удалось.

Смысл нашего скриптика в том, чтобы при запуске функции нужные вкладки выделялись (остальные при этом должны быть невыделены), а также пользователю показывается нужный слой с подменюшкой (остальные в это время обязаны быть скрыты). Выделить/снять выделение и скрыть/показать элемент просто. Это делается путём назначения стилей CSS и функции javascript getElementById.

С помощью простейшей конструкции мы можем выполнить нашу задачу.

В принципе этого скрипта уже достаточно для выполнения нашей задачи. Он будет нормально работать, причём в любом браузере. Смотрим рабочий пример на 4 вкладки. Единственные его минусы - размер и громоздкость. Ведь если вкладок довольно много, величина скрипта становится значительной. При четырёх табах каждая вкладка описывается с помощью восьми строк. Естественно, такое положение вещей не могло устроить меня, так как одним из моих принципов в вёрстке и разработке является минимализм. И я пошёл дальше.

Порывшись ешё немного в Гугле, удалось написать упрощённый вариант скрипта. Его главное отличие от предыдущего – наличие цикла. Обязательное правило: вкладкам и слоям должны быть выданы соотвествующие айдишники. То есть, первый таб – tab1, первый слой – cont1, и так далее.

Итого получилось четыре короткие функции (по количеству вкладок). Уже неплохо. Оптимизация налицо, ведь удалось в 2 раза уменьшить количество строк. Смотрим следующий рабочий пример. Однако это ещё не идеал.

Конечно, сократить функцию уже врядли получится. Зато можно сократить количество функций. В идеале нужно делать все операции с помощью одной небольшой функции, а их пока целых четыре. Далее всё очень просто. Нужно всего лишь задаться вопросом, что является исходными данными для скрипта и можем ли мы их передавать динамически. А вводной служит всего лишь одна цифра – айдишник (таба и слоя), и передавать его мы не только можем, но и обязаны, если не хотим расписывать энное количество лишних строк скрипта.

Получаем на выходе простейшее решение:

Последний рабочий пример можно лицезреть по линку.

Итого: имеем универсальное простое решение для реализации сложной динамической менюшки с использованием вкладок. Причём работает оно в любом браузере (естественно, при включённом javascript).

Кстати, хотел бы заметить, что активировать скрипт можно как угодно (по клику или наведению). Мне нравится больше вариант с onmouseover. Ведь в результате получаем меню, которое реагирует на наведение курсора, однако в ссылке вкладки всё равно стоит линк. Так, даже при выключенном жаваскрипте пользователь сможет перейти по ссылке меню.

--------------------

Денис Чекалов продолжает пополнять свой список блогов, авторы которых активно меняются постовыми.

А вы знаете как поднять ТИЦ / Pr сайта, увеличить посещаемость сайта?

Хотите научится продвигать сайт? SEO блог начинающего вам поможет.

Как известно, в базовом дистрибутиве любимого поисковиками движка Lasto-блог нет какого-нибудь, даже самого простого редактора html тегов. Это безобразие необходимо было обязательно исправить, чем и озаботился владелец данного блога. О первых потугах запись лежит вот тут. Её можете прочесть на досуге. Там описано внедрение редактора в совершенно любую страницу (даже html на бесплатном хостинге) без всякой автоматизации. Возможности только базовые. Теперь же хочу представить новую версию редактора с новым функционалом и оформленную в виде плагина.

Итак, продолжим. Автор замечательного блог-движка, гуру электронной коммерции, SEO и веб-мастерринга, Вадим Ласто, более известный как Мастер Ласто, выложил на своём сайте небольшой визуальный редактор Nice-Edit в виде плагина. Однако он подойдёт наверняка не всем. Например, не всем нужен именно визуальный редактор. Как по мне, редактор тегов BUEditor это самое то, потому как пользователь может не только тупо нажимать кнопки, заданные автором скрипта, а имеет возможность вертеть редактором как угодно. Да и потребности у людей разные. Одному нужно пять кнопок, а второму - двадцать пять.

Немного повторюсь и расскажу о BUEditor. На самом деле это очень хороший модуль для CMS Drupal. Самостоятельной версии этот редактор не имеет, но использовать вне КМС его при желании можно и, как показывает практика, даже нужно.

По сути плагин является редактором BUEditor, оснащённым новыми функциями (аплоадом файлов) и оформленным в виде плагина для простой интеграции в Ласто-блог. Главными его достоиствами являются:

• простая интеграция (требуется загрузить плагин на сервер и прописать несколько строк настроек);
• малый размер (33 килобайта с картинками в архиве);
• повышеная поддатливость к изменениям;
• умение загрузить изображения и файлы на сервер;
• функции помощи и предпросмотра.

В базовой комплектации идёт довольно большой набор кнопок, а также пару очень полезных функций: Предпросмотр и Помощь. Если вдруг вы забудите назначение кнопочек своего редактора, он с радостью напомнит вам эту важную информацию. А если захочется глянуть одним глазком на результат своих стараний, в этом поможет функция Предпросмотр.

Также очень радует, что набор кнопок полностью зависит от владельца блога. Например, у вас есть особый класс для первого абзаца. Вы легко сможете задать кнопке функцию вставки <p class="first">текст абзаца</p> и больше не заниматься писаниной классов вручную.

Ещё один вариант использования редактора - задание кнопкам разных шаблонов. Например, у вас разные разделы сайта/блога имеют разные шаблоны оформления или просто предоставления информации. Так вот. Такой редактор запросто выплюнет по клику вам этот самый шаблон. Если говорить проще - любая комбинация тегов и текста отныне вам подвластна. Плюс к тому, он ещё и javascript умеет исполнять.

Однако хватит слов об этом чудесатом редакторе. Лучше взгляните на демонстрашку и нажимайте кнопку даунлоада в шопе.

Конечно BUEditor можно использовать не только на блоге от Ласто. Его можно задействовать где угодно. Для этого выложена другая версия.

Использовать или нет данную тулзу решать конечно вам, но лично я буду и в дальнейшем пользоваться БУЭдитором. Думаю, во всех скриптах, к которым я приложу руку в ближайшее время, можно будет лицезреть эти кнопочки.

UPDATE: Найдена серьёзная уязвимость в процедуре загрузки файлов на сервер. Посему линки даунлоада временно убраны из шопа. Всем, кто уже скачал данный плагин НЕОБХОДИМО удалить файлы, отвечающие за аплоад. По дефолту это up.php и up2.php Извиняюсь за причинённые неудобства. Вскоре плагин будет обновлён и доступен к скачиванию. Спасибо за терпение.

Продолжение поста Все реальные способы поднятия рейтинга вконтакте, который вызвал серьёзный приток пользователей на блог из Гугла. Сейчас это самая посещаемая страница блога, а основные запросы, по которым приходят сёрферы:

1. поднять рейтинг вконтакте
2. рейтинг вконтакте
3. как поднять рейтинг вконтакте

Также сыпется множество комментариев к записи. Все пытаются прорекламировать свои услуги по поднятию рейтинга вконтакте или найденную дырку в системе. И конечно же все они являются обманом. Да. Люди даже не удосуживаются прочесть пост, в котором говорится, что такая халява - это стопроцентный кидок. Кидалы продолжают атаковать, однако комментарии у меня премодерирутся, и всякую чушь я не публикую.

Кстати, ни один из повышателей рейтинга за бабло так и не откликнулся ни в аську, ни на почту, поэтому посоветовать трастовый источник покупки рейтинга я до сих пор не могу.

В заключении публикую несколько не прошедших модерацию комментариев. Весь инет завален аналогичными. Повторяю ещё раз. Не ведитесь на развод! Зарабатывайте деньги в интернете, а не тратьте. И НИКОГДА НЕ ОТСЫЛАЙТЕ SMS НЕИЗВЕСТНО КОМУ!

Гавно-комменты от кидал: (айдишники и ссылки вырезаны, чтобы никто, не дай Бог, не повёлся на развод)

Subject: рейтинг
Привет всем меня зовут Сергей, я сам раньше не верил в эти накрутки с помошью смс сразу на 50, 75, 100%, но как-то раз наткнулся на ХАК форуме на интересную стотью: там говорилось что нужно отправить сообщение с текстом idудалено на номер 1045 и получишь +11% в течении 15 минут я не поверил (с меня сняли всего 0.2 $ у меня билайн), я попробывал и не поверил своим глазам - рейтинг действительно поднялся!!! Я поднял свой рейтинг до невиданых размеров, смотрите сами!!!!!! [линк на профиль с чудо-рейтингом] - интересное число не правдо ли попробуйте сами!!! Прошу не распристранять эту информацию в обширных кругах!!!!
сергей

Subject: 2
Чушь всё это... Я имею, несколько программ, созданных для взлома Серва, путём внедрения иньекций в БД (спс. нашему хакеру). Но здесь вылаживать такое, равно - убийству Контакта, единственное, чем я могу поделиться так это, для поднятия рейтинга и то...! [ссылка на чудо-программу для повышения рейтинга] Не забываем говорить спасибо!
Пурик

Subject: Клево
Рейтинг вконтакте, бесплатно! [ссылка на чудо-сайт, который якобы повышает рейт]
Anonymous

Subject: Поднять рейтинг Вконтакте
!!!!!!!!!!!!!!!!!!Если ты не такой как все, если ты хочешь выделяться из серой массы, ты просто обязан стать V I P пользователем ВКонтакте, плюс к этому мы добавляем 150% к вашему рейтингу! Для этого нужно просто отправить 2 [СМС] сообщения с текстом [idудалено](ВСЁ БЕЗ СКОБОК ПИШЕМ) на короткий номер [1046]. Если смс не отправляется, тогда используйте сервис с номером 1045, с таким же текстом В ответном сообщении придёт пароль, который нужно ввести со своим паролем при входе в контакт! Платное только первое сообщение. Остальные в течение десяти минут бесплатны, так что лучше отправлять сразу. Вот так: (свой пароль)(пробел)(пароль с ответного сообщения) 1смс- 150% 2смс- 330% 3смс- 550% 4смс- 700% 5смс- 1000% 6смс- 4000% и VIP статус 7смс- 5000% и Голден ВИП ВТОРОЕ И СЛЕДУЩИЕ СООБЩЕНИЯ БЕСПЛАТНЫ!!! После этого полоска рейтинга станет золотого цвета. На вашей аватарке появится статус 'V I P', и Ваша страничка будет отображаться на первых местах в поиске, а также Вам станут доступны для просмотра альбомы и видеозаписи всех пользователей, даже закрытые настройками приватности! Стоимость [СМС] сообщения: ------------- Россия: TELE2 (3.3 руб) Билайн (3 руб) СМАРТС (3.23 руб) МТС (3 руб) Мегафон (3.3 руб) или ~(0.20 usd) УкАзАнО Без nds..... ЕсЛи Вы ЧтО То СдЕлАлИ Не ПрАвИлЬнО, То УсЛуГа СчИтАеТсЯ ОкАзАнНоЙ, и ДеНьГи Не ВеРНУть!!! ЕСЛИ НЕ ПОЛУЧИЛОСЬ ПОПРОБУЙТЕ ЕЩЁ РАЗ!!! ВТОРАЯ ПОПЫТКА БЕСПЛАТНАЯ Украина: UMC (1,1 гривна) др. операторы (1 гривна) Приблизительная стоимость сообщения для БУДЬТЕ ВНИМАТЕЛЬНЫ!!! БЫСТРЕЕ СКОРО УДАЛЮ ВСЁ ОГРАНИЧЕНО!!! ВСЕ ОСТАЛЬНОЕ НАЕБ!!! Андрей

Subject: Без темы
вот эти боты!! idудалено и вот этот idудалено , т.е. отправляем смс на номер 1046 (30 голосов) или 1045 (100 голосов) с текстом idудалено или с текстом idудалено
Bot Reiting

Subject: Повышайте рейтинг, пока работает
Ребята, я один из разработчиков программы, которая поднимает рейтинг Вконтакте(Vkontakte). Но в ответ того, что меня мои партнёры кинули и собираются эту прогу продавать, я даю бесплатно, но ограничил Вам её, за 1 раз можно поднимать не более 50% рейтинга и она работает на общем, а не приватном сервере=) [ссылка на чудо-прогу] Качайте на здоровье. ВИРУСОВ НЕТ!!! Проверено Касперским и доктором ВЕБом с последними базами! Тем, кто хочет иметь платную версию (Всегда гарантированная работа программы и возможность увеличения рейтинга до 5000 за раз) нужно отправить смс с текстом #удалено на номер удалено, в ответном смс Вам придёт сообщение с ссылкой на скачивание и кодом активации. Ещё раз повторяю,распространением вирусов я НЕ ЗАНИМАЮСЬ!!!Всё имеет чисто коммерческий интерес!
Сергей

Узнали короткий номер для отправки SMS в большинстве комментариев? Конечно, именно на него нужно отправлять SMS со своим айдишником, чтобы получить голоса. Всё подробно описано на странице vkontakte.ru. Не позволяйте себя так глупо обмануть!

Ещё мне очень понравился коммент, в котором товарищ писал «ЕСЛИ НЕ ПОЛУЧИЛОСЬ ПОПРОБУЙТЕ ЕЩЁ РАЗ!!!!ВТОРАЯ ПОПЫТКА БЕСПЛАТНАЯ» и «ВТОРОЕ И СЛЕДУЩИЕ СООБЩЕНИЯ БЕСПЛАТНЫ!!!» Конечно, пока нерадивый пользователь отошлёт десяток SMSок в надежде на халяву и поймёт, что никакого кода подтверждения ему не приходит, денежки уже будут списаны, и вернуть их он никак уже не сможет.

Кстати, не думаете ли, что это администрация самого Вконтакта запустила спаммеркую поддержку своего проекта? Ей то выгодно:) Деньги то им идут:)

Но конечно в этом никто никогда не признается.

--------------------

На последок, отгадайте загадку. Что такое Коллекция мужских сникерсов от компания Pantone? Да, у меня тоже глаза были по пять копеек, когда я такое услышал.