Сегодня мне показали еще один, мне кажется самый удобный – jqapi.com/
Если кто знает еще какие-либо ресурсы – оставляйте их в коментариях
]]>
На днях мне удалось впервые посмотреть видео курс о JavaScript на русском языке. Мне его предоставили бесплатно для обзора на блоге, без каких-либо требований, так что обзор постораюсь написать наиболее непритязательно. О а как звучит – “JavaScript. Больше, чем просто сайт”! При просмотре рекламного ролика с их промо-сайта – действительно начинаешь в это верить :)
Но увы мы живем во времена, когда различного рода информация переполняет просторы интернета, и зачастую она некачественная, поэтому доверять информации мы можем только после проверки. Я посмотрел этот видео курс, и захотел рассказать вам непосредственно о моем впечатлении.
Рекламный ролик:
Сразу скажу – видео курс ориентирован на людей, которые о javascript ничего не знают или только начинают постигать этот язык. Если бы мне попался этот курс в те времена когда я начинал учится искусству javascript программирования – я бы был очень доволен находкой.
Но и не скажу, что данный курс был бесполезен мне на данный момент, хотя имею 2х летний опыт постоянной работы с технологией javascript. Как говорится “повторение – мать учения”, благодаря ему вспомнил несколько интересных тонкостей, респект автору курса ;)
Видео по времени занимает чуть более 7.5ч, качество видео и звук приятно удивили. Автор четко излагает материал. Приятный, ненавязчивый интерфейс прохождения уроков. Почти по каждой теме прилагаются готовые примеры кода представленные автором в уроках, с которыми вы можете экспериментировать после прохождения лекции. Прилагается коллекция всех основных ссылок на справочные материалы, ссылки на документацию по средствам разработки… т.е. по восприятию материала притензий никаких нет.
Еще добавлю немного плюсов, ну и немного минусов…
Плюсы:
- подобных курсов в рунете довольно мало.
- неплохая последовательность изложения материала.
- заметно что автор является профессионалом, излагает материал своими словами, а не заученными фразами из учебников или онлайновых мануалов.
- параллельно рассказу по теме приводятся пример кода, причем автор сразу экспериментирует с кодом, что позволяет легко запомнить различные методики или вариации кода.
- наглядные примеры по отладке кода, что тоже очень важно.
Минусы:
Минусы есть, но наверное большая часть их основана на том, что мне уже хочется получить что-то большее от такого курса…
- был удивлен что нет текстовой копии курса, мне ее не хватило, пригодилась бы для повтора пройденного материала.
- курс немного бегловат, много чего не рассказывается, но с другой стороны это ж и не справочная книга…
- нет ознакомительных лекций по популярным фреймверкам (jQuery, Mootools, Prototype)
- никак не затронута технология AJAX.
- мало примеров готовых решений и описаний по ним.
Вывод:
Если вы наслышаны о javascript, но не знаете с чего начать его обучение, этот видео курс именно для вас. Он конечно не сделает из вас гуру джса, но определенно даст хорошую базу начальных знаний, на которых вы смело можете построить свое дальнейшее развитие в этой области.
Если после моего обзора у вас возникло желание приобрести данный курс, в знак благодарности можете заказать диск по моей партнерской ссылке…
disableSelection : function() {
this.each(function() {
this.onselectstart = function() { return false; };
this.unselectable = "on";
jQuery(this).css('-moz-user-select', 'none');
});
},
enableSelection : function() {
this.each(function() {
this.onselectstart = function() {};
this.unselectable = "off";
jQuery(this).css('-moz-user-select', 'auto');
});
}
});
// кроссбраузерный вызов
$(document).ready(function(){
$('body *').disableSelection();
});
$(‘body *’) – именно такой селектор будет для этих метов кроссбраузерным, просто $(‘body’) или $(document) – не работает в Opera.
- disableSelection – запрет выделения
- enableSelection – возврат выделения
Ничего нового я в этой статье не открыл, а просто хотел поделится функциями с вами, т.к. до определенного момента вечно искал что-то подобное в инете.
]]>На скрине наглядно видно эффект плагина. До применения все блоки обтекают друг друга из-за чего получается некрасивые строки и много свободного места, а после блоки расставлены наиболее оптимальным образом.
Я упоминал выше о моей модификации, теперь подробнее :), я изменил всего-лишь одну строчку, и на мой взгляд плагин от этого только выиграл. Для наглядности эффекта поресайзете окно браузера.
Моя модификация, а вот еще страничка с живым примером.
Параметры плагина для инициализации:
singleMode: false,
// Этот параметр ставится в true, если все ваши блоки имеют одинаковую ширину
columnWidth: 240,
// Ширина колонки в вашей сетке, параметр по умолчанию - ширина первого блока
itemSelector: '.box:visible',
// Селектор блоков
resizeable: true,
// Перестройка сетки блоков при ресайзе окна
appendedContent: $('.new_content'),
// Объект элемента который вставляется в сетку динамически
saveOptions: true,
// Этот параметр сохраняет параметры инициализации первого вызова
}, function() {}
// callback.
);
Моя версия скрипта
]]>
Если вы хотите повысить функциональность Вашего сайта – этот материал для вас. Одна фича которая есть практически в каждой CMS – текстовый редактор, поэтому хочу вас познакомить с 5 лучшими, на мой взгляд, скриптами.
1) TinyMCE
Пожалуй самый мощный плагин для этих целей, это можно сказать уже только потому, что его используют в своих проектах такие известные бренды как WordPress, Microsoft, Oracle, Apple и Joomla. Также можно отметить:
- Подключение в несколько строк кода
- Возможность кастомить под различные темы
- Кроссбраузерный – Mozilla, MSIE, FireFox, Opera, Safari и Chrome
- AJAX совместимый – сохранение и загрузка результатов
- Поддержка различных языковых пакетов
- Открытый код – LGPL лицензия
2) HTMLBox
Плагин использует jQuery фреймверк, а значит также легко имплементируется как и обыные плагины jQuery, скачав доку вы легко в этом убедитесь. В этом текстовом редакторе есть весь необходимый минимум для редактирования текста.
- Простое подключение
- Кроссбраузерный – FF, MSIE, Opera, Safari и Chrome
- Маленький размер
- AJAX поддержка
- Удобное руководство пользователя
- Кастомизация тем
3) markitup
Очень дружелюбный плагин. Очень понравилось оформление сайта плагина и примеры. Это конечно
не полноценный текстовый редактор, но если таков и не нужен, это лучший выбор.
- Простое подключение
- Поддержка keyboard shortcuts
- Кастомизация тем
- AJAX превью
4) CKeditor
Еще один очень мощный плагин, который подтверждает свои достоинства тем, что его используют множество авторитетных сайтов. В плагине очень много плюсов, поэтому перечислять все не буду, выберу лишь самые весомые.
- Хорошая документаци
- Кроссбраузерность
- Поддержка keyboard shortcuts
- AJAX
- Кастомизация
- Техническая поддержка, комьюнити
5) jWYSIWYG
на последок – плагин попроще.
- AJAX превью
- Кроссбраузерность
Данный эффект стал встречаться в моих проектах довольно часто, поэтому я решил написать небольшой плагин – jquery.movingBlock.js.
Требования для работы плагина:
HTML/CSS
Как всегда свои плагины я стараюсь сделать наиболее универсальными, чем меньше они зависят от HTML/CSS кода – тем лучше, поэтому для данного плагина определенных требований при верстке нет!
javaScript:
<script type="text/javascript" src="js/jquery.movingBlock.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#sidebar').movingBlock({
holder:'div.wrapper',
topDif:0,
bottomDif:0,
toEl:false,
cssTop:'marginTop',
duration:350
});
});
</script>
В роли главного объекта $(‘#sidebar’) выступает непосредственно скролящийся элемент, а теперь детальнее о параметрах:
- holder – селектор обертки (родителя) скроляшегося элемента, главный параметр, т.к. указывает в каком элементе будет скролиться блок;
- topDif – отступ элемента от верхней части экрана;
- bottomDif – отступ элемента от нижней части экрана;
- toEl – если вы хотите что бы блок скролился в обертке до определенного элемента, то в данном праметре вам нужно указать селектор этого элемента;
- cssTop – изменяющееся свойство при скроле (marginTop или top);
- duration – время анимации.
Для наглядности хочу продемонстрировать еще пару примеров: пример 2, пример 3.
Скачать плагин
]]>По каждому плагину есть детальная информация, представленная в очень удобном формате, здесь представлены версии релизов, информация об авторе, документация и примеры.
P.S. Если бы они еще сделали примеры для методов фреймверка…
]]>