Javascript → jQuery плагин Twitty Drop Down Menu — кнопки в стиле Twitter

27.03.2010

Twitty Drop Down Menu — мой jQuery плагин для создания кнопок в стиле Twitter.

Гугл по запросу jQuery drop down menu twitter не выдал ничего интересного, поэтому пришлось написать самому. Результатом делюсь.

Пример работы.

Подключение:

<script type="text/javascript" src="jquery.twittyDropDownMenu.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />

HTML разметка:

<ul class="twittyMenu" title="Настройки">
    <li><a href="#">Редактировать</a></li>
    <li><a href="#">Активировать</a></li>
    <li><a href="#">Очистить</a></li>
    <li><a href="#">Удалить</a></li>
</ul>

После загрузки DOM, все списки с классом twittyMenu будут преобразованы в кнопки. Текст кнопки берётся из атрибута списка title.

Поддерживаемые браузеры: IE8+, Opera 10.50+, Firefox 3.6+, Chrome 4+. В IE6 есть небольшие проблемы с выпадающим меню, работа в IE7 пока не проверена.

Архив с плагином.

Пожелания, предложения, критика, приветствуются :)

Похожие записи

Комментарии

Гость
28.03.2010, 13:30

не подскажите как плагин привязать к шаблону Drupal?

в page.tpl.php подключаете скрипт и стиль, при выводе списков прописывать им класс twittyMenu и какой-нибудь title

Гость
03.10.2010, 01:10

Очень симпатичный, я буду использовать

"работа в IE7 пока не проверена": в IE8 "Сервис -> Средства разработчика -> Режим обозревателя IE7"

Хорошо, что написано без привязки к доллару $ :)
только... не в последней конструкции, инициализирующей меню) и тот же Drupal 7 не понимает (точнее броузер)
если подправить (заменить на jQuery как во всем остальном коде), то вещь вообще отличная!!!

Спасибо, полезная штука!
Возникла одна проблемка - позиция всплывающего меню вычисляется на основе $button.position() в момент загрузки страницы. Если использовать внутри div'a у которого есть скроллинг, то для нижних элементов (к которым нужно скроллить) меню выскакивает далеко внизу. Решил проблему переносом строки var buttonPosition = $button.position() в обработчик $button.click(function(){...})

Добавить комментарий