Для того, что бы убрать tabIndex с кнопок tinyMCE используйте простое решение при помощи JQuery.И сам callback:
tinyMCE.init({
mode : "exact",
elements : "about",
theme: "advanced",
…all your advanced options…
init_instance_callback : "setTabIndex"
});
function setTabIndex()
{
$(".mceToolbarContainer > *").attr("tabIndex", "-1");
}
О JQuery шпаргалках писали многие, приведу короткий список мною найденных. Если кому интересно их можно распечатать и повесить на стену.
Привет!
В продолжении прошлого поста по поводу каруселей...
Снова возникла потребность создать очередную карусель для нового проекта используя JS.
Образцом была взята навигационная карусель Apple (кстати замечательная идея использовать подобную штуку для навигации).
После получения задания сразу кидаюсь шерстить форумы, сайты наподобии Аяксиана, Динамик Драйв... Также незабываю стырить карусельку с самого Apple.
И того что мы имеем? Готовую и работоспособную эппловскую карусель и howto по созданию карусели аля "как на эппл".
В новом проекте этот слайдер должен отображать свежий видео/фото контент. Вроде бы все есть, но есть одно НО! Все это дело весит огромных килобайт JS. Только подумайте, что бы закрутить этот слайдер на Apple нам надо 250 кб JS и это на глагне (главной страничке).
Apple в своей карусели использовал 2 библиотеки: 1) Prototype, 2) script.aculo.us. Все это добро использует 2 внешних JS файла для обработки библиотек и функций написаных ручками.
И того имеем 4 внешних тяжелейших JS файла для реализации навигации.
Что касается JQuery, там та же история, те же 4 файла но если использовать сжатый JQuery-lite, то весить это будет 50 кб. В 5 раз меньше!!!!!!!!!!!!! Все равно нам для глагне не подходит. Решаюсь и сажусь писать сам, написал за 2 дня.
Итого что я имею? Полностью реализованый функционал эппловской карусели и 4 кб JS.
Спрашивается, зачем использовать Прототипы, JQuery и прочую лабуду, если можно самому все написать и получить (в данном варианте выигрыш в 62 раза) ???????????????
Доброго времени суток всем!
Начну с предистории. Когда мне надо решить какую либо задачу, я начинаю ее гуглить. Иногда быстро, иногда медленно я нахожу решение. И когда я его нашел, я думаю о том, сколько я времени потратил на данную задачу. Так вот, в данном туториале, я хочу сократить время, потраченное девелоперами...
Также возвращаясь к предыдущему моему посту о каруселях, данный туториал будет как-никогда актуален.
Речь пойдет о колесике мышки. Заставим его крутиться. Самый яркий пример использования колесика это Гугл Мапс, там оно используется для масштабирования. Также очень хорошо колесо используется для гугл-ридера.
Итак...
Кручение колеса - это ивент, его надо приатачить к какому либо обьекту, в нашем случае это div. Вся проблема в том, что название этих ивентов в разных браузерах разные. В IE это событие называется onmousewheel, а в FireFox называется DOMMouseScroll.Opera в свою очередь использует название IE только без приставки on, тоесть mousewheel. Но Opera атачит ивенты как FireFox, а не как IE.
Есть две отличные функции, которые атачат и деатачат ивенты к html-элементам, но предварительно эти элементы надо снабдить id.
function hookEvent(element, eventName, callback)
{
if(typeof(element) == "string")
element = document.getElementById(element);
if(element == null)
return;
if(element.addEventListener)
{
if(eventName == 'mousewheel')
{
element.addEventListener('DOMMouseScroll',
callback, false);
}
element.addEventListener(eventName, callback, false);
}
else if(element.attachEvent)
element.attachEvent("on" + eventName, callback);
}
function unhookEvent(element, eventName, callback)
{
if(typeof(element) == "string")
element = document.getElementById(element);
if(element == null)
return;
if(element.removeEventListener)
{
if(eventName == 'mousewheel')
{
element.removeEventListener('DOMMouseScroll',
callback, false);
}
element.removeEventListener(eventName, callback, false);
}
else if(element.detachEvent)
element.detachEvent("on" + eventName, callback);
}
Посредством этих функций, можно приатачить любое событие к любому элементу. Может возникнуть вопрос, что при использовании Firefox/Opera/Safari мы атачим два события сразу (и DOMMouseScroll и mousewheel). Это не беда, так как это никак не повлияет на работу...
Но приатачить событие колесика мыши это всего лишь пол беды, главное впереди.
После атача, нам необходимо забрать значение вращения колеса. Тоесть вперед или назад (например zoom в гугл мапс).
Есть два пути, как сделать это: detail (для Firefox и Opera), а также wheelData (для Internet Explorer, Safari, и Opera). Opera по некоторым причинам включает в себя и тот и другой путь.
Функция которая будет возвращать нам значения, должна выглядеть примерно так:
function MouseWheel(e)
{
e = e ? e : window.event;
var wheelData = e.detail ? e.detail : e.wheelData;
//js код
}
Вроде бы все, но тут есть несколько подводных камней.
Например значение 3 для FireFox и Opera в detail равняется значению 120 в WheelData для Internet Explorer или Safari. Также скролл вниз это положительное число для detail, но отрицательное число для WheelData. Это может быть легко пофикшено немного модифицируя нашу функцию.
function MouseWheel(e)
{
e = e ? e : window.event;
var wheelData = e.detail ? e.detail * -1 : e.wheelDelta / 40;
//js код
}
Следующий шаг будет остановка скроллинга страницы при скроллинге html-элемента.
function cancelEvent(e)
{
e = e ? e : window.event;
if(e.stopPropagation)
e.stopPropagation();
if(e.preventDefault)
e.preventDefault();
e.cancelBubble = true;
e.cancel = true;
e.returnValue = false;
return false;
}
Если мы остановили скролл, значит страница скроллится не будет.
Для этого можно модифицировать нашу функцию следующим образом.
function MouseWheel(e)
{
e = e ? e : window.event;
var wheelData = e.detail ? e.detail * -1 : e.wheelDelta / 40;
//js код
return cancelEvent(e);
}
Теперь мы имеем все функции, необходимые нам для организации скролла над каким-то элементом. Все предельно просто и ясно.
Организуем некоторый div.
Ниже опишем наглядную функцию для деммонстрации всего выше перечисленного
function printInfo(e)
{
e = e ? e : window.event;
var raw = e.detail ? e.detail : e.wheelDelta;
var normal = e.detail ? e.detail * -1 : e.wheelDelta / 40;
document.getElementById('scrollContent').innerHTML =
" Raw Value: " + raw +
" Normalized Value: " + normal;
cancelEvent(e);
}
hookEvent('scrollContent', 'mousewheel', printInfo);
Вот впринципе и все. Теперь можно данный скролл прикрутить к карусели, к гугл мапсу, к ридеру, к счетчику или к чему-либо.
Люблю хорошие и простые туториалы.
Данный туториал написан не мною (а жаль), это всего лишь перевод. Но я считаю, что опубликовав его здесь, я добьюсь поставленной цели укоротить время, потраченное девелоперами на поиск решения по данному вопросу.
Данный туториал был найден благодаря:
1) http://forum.dklab.ru/
2) http://adomas.org/javascript-mouse-wheel/
3) http://blog.paranoidferret.com/index.php/2007/10/31/javascript-tutorial-...
На последней ссылке можно посмотреть данное решение в действии, перевод был взят оттуда же.
Всем спасибо!
В последнее время я очень часто наблюдаю всевозможные виды каруселей на всевозможных сайтах. Как украинских, так и иностранных.
Одна из первых каруселей, попавшихся мне на глаза, была флешовая на бывшем сайте UMC. После UMC был Amazon.com, они также используют флеш карусель. Флешовые карусели хороши тем, что они более красочны, чем карусели построенные посредством (HTML,CSS)+JS. После флешовых каруселей я стал интересоваться джава-скриптовыми. Для примера возьмем такие популярные сайты как Nytimes или Америка онлайн. Из российских порталов заметил карусель на mail.ru. Что касается украинских проектов, не считая UMC, каруселями стали пользоваться активнее... Так как карусель это маленькое пространство куда можно уместить много информации... Минимум усилий - максимум полезности...
Гугля этот вопрос я натыкался на множество бесплатных примеров, с использованием всевозможных библиотек. Ajax, JQuery, Prototype, Классы на JS... Вертикальные карусели, горизонтальные карусели... Карусели с прелоадом, без него... 2 карусели на странице и т. д. и т. п. Сотни строчек кода, в которых не хочется разбираться, а проще написать свое решение.
Я хочу сделать обзор трех вариантов решения карусели, которые используются на трех разных известных сайтах в уанете.
Первый из вариантов: bigmir)net.
В данном случае карусель реализована при помощи аякса и нарезки html-кешей. Обьясню более подробно сам принцип.
Имеется 10 картинок, на экране видимых только 3 картинки, соответственно у нас будет 4 html-кеша по три картинки (3 уникальных кеша и четвертый кеш будет состоять из 1 уникальной картинки и двух добавленных раннее картинок). Происходит так называемая нормализация... При нажатии на кнопку вправо или влево мы аяксом дергаем необходимый нам кеш и на место старого ставим новый. Задумка как видим интересная. Тем более при отключенном JS мы рандомно подсасываем любой из кешей, тем самым имитируем работу карусели.
Плюсы и минусы решения.
Плюсы:
1) Работа на основе кешей, существенно облегчает загрузку страницы.
2) Загрузка Аяксом не забирает много времени и мы видим новые три картинки.
3) Простота реализации - максимум эффекта.
4) При отключенном JS мы каждый раз будем видеть новые картинки.
5) 4) Работает IE 6.0-7.0 Safari, Opera, Firefox...
Минусы:
1) При отключенном JS для смены картинок необходимо зарефрешить страницу.
Здесь абсолютно другой вариант решения реализации карусели. В данном случае мы имеем так называемую вращающуюся карусель. Тоесть карусель вращается (эффект движения) по кругу.
Имеется 10 картинок, видимых 4. Остальные 6 спрятаны в скрытом диве. При нажатии на кнопку вправо или влево происходит плавный прирост margin-right или margin-left. Тем самым реализуется эффект движения, одна картинка прячется в срытый див, а другая выезжает из этого дива. Вращение по кругу реализуется клонированием этих 10 картинок. В итоге мы имеем два дива по 10 картинок стоящих друг за другом. Просматривая первый див, следом идет второй. Потом они меняются. Этот эффект интересно наблюдать фаербагом в фаерфоксе.
Плюсы и минусы решения.
Плюсы:
1) Эффект движения.
2) Благодаря верстке, при отключенном JS мы наблюдаем горизонтальный скролл всех картинок.
3) Реализация через класс. Возможность размещения на странице бесконечное колличество каруселей, регулирование скорости карусели, регулирование количества видимых картинок и т.д и т.п.
4) Работает IE 6.0-7.0 Safari, Opera, Firefox...
Минусы:
1) При большом колличестве картинок наблюдается эффект тормоза JS.
2) При большом колличистве картинок все они загружаются в скрытый див - снижается скорость загрузки страницы.
3) Благодаря верстке в некоторых старых браузерах не поддерживающих скрытые дивы очень интересно все это смотрится. (старая Opera под Linux)
4) Благодаря верстке в Opere в режиме Ctrl-F11 схлапывается весь сайт с такой каруселью.
Третий вариант. Верстка на основе списка (ul, li). Каждая картинка это элемент списка. Видимых картинок 4. Всего 10. Все 10 картинок (урлы на эти картинки), лежат во внешнем JS массиве. При загрузке страницы JS рандомит 4 видимые картинки. С рандомом картинок рандомится и сам JS массив. Мы видим первые 4 элемента массива. При нажатии кнопки вправо или влево происходит вырезание элемента li и на его место вставка нового li с новой картинкой. Благодаря такому механизму происходит эффект движения. На загрузку картинки поставлен прелоадер, тоесть пока картинка не загрузилась мы видим вращающийся кружок. Большое преимущество этой карусели, что на нее повешено событие перехватывающее вращание колесика мышки. Тоесть можно легко пробежаться по всем картинкам вращая колесо - очень удобно.
Плюсы и минусы решения.
Плюсы:
1) При большом количестве картинок ничего страшного, все картинки хранятся в отдельно вынесенном JS массиве.
2) Довольно простая верстка.
3) Эффект прелоадера.
4) Эффект скролла.
5) Нету эффекта торможения JS.
6) Быстрая загрузка страницы
7) Работает IE 6.0-7.0 Safari, Opera, Firefox...
Минусы:
1) Старые браузеры неадекватно реагируют на очищение ul.
2) При отключенном JS мы видим статику в 3 картинки и никакого эффекта карусели.
* Последний вариант карусели, в скором времени появится на Корр.нете.
Вот три варианта решения карусели. Решать Вам, какой вариант наиболее хорош... Конечно же реализаций море. Но мне кажется эти три самый ходовые. Кто писал карусели на аяксе, с подгрузкой в скрытый див. Буду рад за предложение реализации.
Надеюсь я секономил кому-то время.
Все эти решения можно просмотреть на приведенных сайтах.
Также вот ссылочка на ресурс: dynamicdrive.com. Тут тоже можно найти кое-что полезное.
Спасибо за внимание.
База данних — це спеціальна система зберігання, організації та пошуку інформації. Вона містить дані у вигляді таблиць, записів та інших стру...
