Недавно узнал об jQuery библиотеке, которая является очень простым и легковесным аналагом jQuery UI (функционал правда слабее). Библиотека называется JQuery Tools, а подробно я хотел бы остановиться на создании с помощью нее табов. JS-движок табов занимает всего 3.3 Kb.

Делаются табы с помощью спрайта, в котором создаются шаблоны разной длины, чтобы покрыть как короткий так и длинный текст в заголовке таба. Делаются в 3-х экземплярах:

1. Активный таб
2. При наведении
3. Таб в пассивном состоянии

Процесс создания табов

1. Создание спрайта. Спрайт создал в фотошопе. GIMP что-то для меня остается пока загадкой (Да и разбираться нет желания).

2. Создается CSS файл. Здесь тоже сложного ничего нет, единственные хлопоты - вычислить координаты каждого шаблона. Пример CSS файла возьмите в тестовых примерах - http://flowplayer.org/css/tabs.css

3. html код. Выглядит он так:

<!-- the tabs -->
<ul class="tabs" id="my_tabs">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a class="w4" href="#">Длинный заголовок в табе</a></li>
</ul>

<!-- tab "panes" -->
<div class="panes" id="my_panes">
<div>First tab content. Tab contents are called "panes"</div>
<div>Second tab content</div>
<div>Third tab content</div>
</div>

Обратите внимание. Если текст в заголовке большой, то применяйте соответствующий класс (w1,w2,w3,w4 и т.д.) Читать далее »

WYSIWYG

Работаю сейчас над личными блогами пользователей rybalka.tv. Встроил визуальный редактор (другими словами WYSIWYG). До этого никогда не работал с WYSIWYG, и попросил помощи на форуме MaxSite CMS, там мне Юрий Белотицкий посоветовал использовать встроенный в админку MaxSite CMS jWYSIWYG который является плагином для jQuery.

Посмотрел так же что из себя представляют конкуренты jWYSIWYG (блин ну и название). Флагманы в этой нише TinyMCE и FCKeditor. Если первый просто громоздкий и долго грузится, то второй просто монстр, по функционалу напоминающий Microsoft Word.

Я думаю пользователям моей соц. сети не нужны какие-то излишества в виде вставки таблицы или печать напрямую из редактора, и они вполне обойдутся минимальным набором функций форматирования (жирный, курсив, подчеркивание, лево, право, центр, сцыль и вставить картинку). К тому же размер плагина jquery.wysiwyg.js всего 21 КБ (и это не запакованная версия). Выбор был очевиден. Сам редактор поставился и настроился очень легко.

Дальше необходимо было создать свою кнопку загрузки картинки и прикрутить обработчик события к ней. Я решил расширить функционал редактора, чтобы из него можно было загрузить фото с компа, подогнать его размеры под контентную часть  поставить копирайты и вставить картинку в редактор (в общем как в вордпрессе). Читать далее »

Чем глубже изучаю фреймворк jQuery, тем больше возможностей он мне открывает. Если раньше чтобы реализовать работоспособный диалог выбора даты на javascript, я искал среди доисторических громоздких монстров, сам русифицировал, сам дописывал нужный мне функционал, сам обеспечивал кроссбраузерность.

Но все это в прошлом. Оказывается jQuery UI (дополнительные библиотеки пользовательского интерфеса) содержат в себе виджет Datepicker, а jQuery UI это кроссбраузерность, локализация, надежность jQuery и возможность темизации (пользовательской стилизации) виджетов. Читать далее »