Для того, что бы убрать 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 шпаргалках писали многие, приведу короткий список мною найденных. Если кому интересно их можно распечатать и повесить на стену.
Есть одна область в javascript программировании, где я ощущаю недостаток дискуссии - это отслеживание ошибок. В то время как многие девелоперы занимаются дебагом ошибок в серверных языках, в JS это делают не многие. Я постараюсь поднять интерес разработчиков к обработке javascript ошибок.
function doSomething(value){
try {
process(value);
} catch (ex){
if (debugMode){
throw ex;
} else {
log(1, "doSomething(): " + ex.message);
}
}
}Идея примера такова, что если возникла ошибка, то в зависимости от установленного дебаг мода ошибка или логируется или просто показывается. Сейчас, я постараюсь объяснить всю уязвимость данной идеи.function doSomething(value){
if (!debugMode){
process(value);
} else {
try {
process(value);
} catch (ex){
log(1, "doSomething(): " + ex.message);
}
}
}2 (Нормальный):var doSomething = debugMode ?Второй метод более предпочтительнее, так как он предотвращает проверку дебаг мода каждый раз, когда функция исполняется. Еще его легче автоматизировать. Предполагается, что у вас есть один или несколько обьектов и вы хотите, что бы все их методы имели враппер для отлова ошибок на продакшине. Вот вам пример такого кода:
function(value){
process(value);
} :
function(value){
try {
process(value);
} catch (ex){
log(1, "doSomething(): " + ex.message);
}
};
//by Nicholas C. Zakas (MIT Licensed)Этот код пробегает по всем методам объекта и заменяет его функции на другие, которые уже содержат в себе механизм отлова ошибок. Вот пример использования:
function productionize(object){
var name,
method;
for (name in object){
method = object[name];
if (typeof method == "function"){
object[name] = function(name, method){
return function(){
try {
return method.apply(this, arguments);
} catch (ex) {
log(1, name + "(): " + ex.message);
}
};
}(name, method);
}
}
}
var system = {
fail: function(){
throw new Error("Oops!");
}
};
function log(severity, message){
alert(severity + ":" + message);
}
if (!debugMode){
productionize(system);
}
system.fail(); //error is trapped!Всегда убеждайтесь в том, что ошибка сгенерировалась именно там где нужно - это первая проблема дебага JS ошибок. Удачи!
В мире программного обеспечения, ударение всегда ставилось на революцию. Вы делаете небольшую и простую вещь. Позже добавляете слой функциональности, медленно развиваете, делаете эту вещь больше, сохраняя при этом уникальность. В этой статье речь пойдет о том, как большинство Javascript библиотек превращаются из обычных вещей в хорошие продукты. YUI не исключение.
Привет!
Быстрое howto или как запустить javascript карусель у себя на сайте за 10 минут.Все! Сохраните ее, только картинки сами добавьте. Карусель готова. Результат можно наблюдать на изображении.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.6.0/build/carousel/assets/skins/sam/carousel.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>YUI Carousel Example 1</title>
</head>
<body class="yui-skin-sam">
<div id="scientists">
<ol>
<li><img src="img/scientists/bohr_thumb.jpg" alt="Niels Bohr"></li>
<li><img src="img/scientists/darwin_thumb.jpg" alt="Charles Darwin"></li>
<li><img src="img/scientists/einstein_thumb.jpg" alt="Albert Einstein"></li>
<li><img src="img/scientists/galileo_thumb.jpg" alt="Galileo Galilei"></li>
<li><img src="img/scientists/newton_thumb.jpg" alt="Isaac Newton"></li>
<li><img src="img/scientists/maxwell_thumb.jpg" alt="James Clerk Maxwell"></li>
</ol>
</div>
<script type="text/javascript"
src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript"
src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
<script type="text/javascript"
src="http://yui.yahooapis.com/2.6.0/build/carousel/carousel-beta-min.js"></script>
<script type="text/javascript">
//create carousel control
var carousel = new YAHOO.widget.Carousel("scientists");
//render to page
carousel.render();
//display
carousel.show();
</script>
</body>
</html>
Обратите внимание на очень оригинальную YUI карусель.
Привет!
В помощь js - разработчикам предлагаю хорошее хранилище готовых js - решений:Доброго времени суток всем!
Начну с предистории. Когда мне надо решить какую либо задачу, я начинаю ее гуглить. Иногда быстро, иногда медленно я нахожу решение. И когда я его нашел, я думаю о том, сколько я времени потратил на данную задачу. Так вот, в данном туториале, я хочу сократить время, потраченное девелоперами...
Также возвращаясь к предыдущему моему посту о каруселях, данный туториал будет как-никогда актуален.
Речь пойдет о колесике мышки. Заставим его крутиться. Самый яркий пример использования колесика это Гугл Мапс, там оно используется для масштабирования. Также очень хорошо колесо используется для гугл-ридера.
Итак...
Кручение колеса - это ивент, его надо приатачить к какому либо обьекту, в нашем случае это 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. Тут тоже можно найти кое-что полезное.
Спасибо за внимание.
База данних — це спеціальна система зберігання, організації та пошуку інформації. Вона містить дані у вигляді таблиць, записів та інших стру...
