С рассветом WEB 2.0 получили развитие и javascript фрэймворки, позволяющие вебмастеру делать динамические элементы сайта гораздо быстрее и проще. Одним из таких фреймворков является jQuery, получивший огромную популярность за свою простоту и невероятно малый вес. Итак, представляю вашему вниманию 10 наиболее полезных скриптов jQuery для улучшения интерфейса вашего сайта.
beono @beono
Пользователь
Закрепляем jQuery — 25 отличных советов
19 мин
168KПеревод
Перевод отличной статейки. Думаю, будет полезна как новичкам, которые только приступили к использованию jQuery, так и тем, кто уже какое-то время с ним работает. А кого-то, возможно, заставит глянуть эту чудесную библиотечку. Многие советы имеют отношение не только к jQuery, но и к JavaScript в целом. Лично для меня была весьма и весьма познавательной, посему и захотелось донести это «до масс». Перевод не дословный, но передающий смысл и максимально адаптированный к русскому языку.
Далее все написано от имени автора оригинальной статьи.
jQuery прекрасен. Я использую его вот уже почти год и, хотя я и был достаточно впечатлен в самом начале, он нравится мне все больше и больше по мере использования и по мере того, как я узнаю о том, как он устроен внутри.
Я не эксперт в jQuery. И даже не претендую, поэтому, если встретите ошибки, смело поправляйте меня и вносите предложения по улучшению (поправлять и присылать поправки нужно автору статьи, а не перевода — зам. пер.).
Я называю себя «среднестатистическим» пользователем jQuery и я думаю, что всем остальным будет интересно почитать и что-нибудь почерпнуть из «фишек», «трюков» и техник, которые я освоил за последний год. Статья получилась куда длиннее, чем я предполагал изначально, так что в самом начале я привел «содержание» для более удобной навигации и возможности при желании пропустить не интересующие моменты.
Далее все написано от имени автора оригинальной статьи.
Введение
jQuery прекрасен. Я использую его вот уже почти год и, хотя я и был достаточно впечатлен в самом начале, он нравится мне все больше и больше по мере использования и по мере того, как я узнаю о том, как он устроен внутри.
Я не эксперт в jQuery. И даже не претендую, поэтому, если встретите ошибки, смело поправляйте меня и вносите предложения по улучшению (поправлять и присылать поправки нужно автору статьи, а не перевода — зам. пер.).
Я называю себя «среднестатистическим» пользователем jQuery и я думаю, что всем остальным будет интересно почитать и что-нибудь почерпнуть из «фишек», «трюков» и техник, которые я освоил за последний год. Статья получилась куда длиннее, чем я предполагал изначально, так что в самом начале я привел «содержание» для более удобной навигации и возможности при желании пропустить не интересующие моменты.
Содержание
- Загружайте фреймворк с Google Code
- Используйте «шпаргалку» (cheat sheet)
- Соединяйте все ваши скрипты и уменьшайте размер файла
- Используйте возможности Firebug для ведения логов
- Минимизируйте операции выборки в пользу кэширования
- Сводите манипуляции с DOM-деревом к минимуму
- Оборачивайте все в единый элемент, когда речь идет о любой вставке в DOM
- Используйте «id» вместо классов, где это возможно
- Задайте контекст своим селекторам
- Используйте последовательности вызовов методов с умом
- Научитесь правильно использовать анимацию
- Научитесь назначать и делегировать события
- Используйте классы для сохранения состояния
- Еще лучше — используйте встроенный в jQuery метод data() для сохранения состояния
- Пишите собственные селекторы
- Подготавливайте HTML и модифицируйте его, когда страница загружена
- Используйте «отложенную загрузку» (lazy loading) для определенного контента для выигрыша в общей скорости и преимуществ для SEO
- Используйте служебные функции jQuery
- Используйте «noconflict» для переименования глобального объекта «jquery», когда используете его с другими фреймворками
- Как узнать что картинки загружены?
- Всегда используйте последнюю версию
- Как проверить, что элемент существует?
- Добавляйте класс «JS» в элемент «html»
- Возвращайте «false» для отмены поведения по-умолчанию
- Короткая запись для события готовности документа
+176
jQuery для начинающих. Часть 4. Селекторы
11 мин
216K![jQuery Logo](https://habrastorage.org/getpro/habr/post_images/ac0/e6a/a6f/ac0e6aa6fb8b217d4e8e525e5edf581c.gif)
Последнее время мне всё чаще задают вопрос как выбрать тот или иной элемент в DOM'е, и данный пост будет сплошь посвящен селекторам в jQuery, возможно большинство из них Вы видели в различных источниках, но собрать их воедино все же стоит…
+75
Статья по мотивам моего выступления на PHPConf. Общий обзор Flex-а и связки PHP&Flex
17 мин
2KСтатья будет полезна тем, кто хочеть познакомиться с Flex и его интеграцией с PHP, оценить плюсы и минусы использование этого решения в продакшен. Хочу заметить выступление почти двух годичной давности, однако многое (практически все=) до сих пор актуально.
PHP&Flex, «новая» альтернатива для создания Rich Internet Applications
PHP&Flex, «новая» альтернатива для создания Rich Internet Applications
+50
подводные камни анимации png в IE
4 мин
2.5KВсе мы, здесь присутствующие, горячо любим IE6, чуть менее горячо — IE7 и искренне верим (правда, не все и не всегда признаёмся в этом) в IE8. Здесь писали про множество способов борьбы с особенностью шестого издания мелкомягкого браузера не понимать формат png. Но все эти обсуждения касались просто загрузки png-картинок. А передо мной возникла гораздо более интересная (и более сложная) задача — анимация этих картинок. И всё бы ничего, если бы нужна была анимация, в которой бы нужно было менять только положение и размеры картинок. Мне требовалось сделать анимацию, в которой бы плавно менялась их прозрачность. Тут-то и обнаружились новые фокусы.
+28
Тривиальные задачи по вёрстке
4 мин
60K![image](http://i045.radikal.ru/0901/c4/3421d2b95366.jpg)
+227
Горизонтальное меню без float
3 мин
20KКод и подробности под катом.
+53
Устанавливаем и настраиваем LAMP и Trac+SVN на Ubuntu
4 мин
16KПрочитав эту статью, я осознал, что Trac+SVN очень помогут в работе и решил настроить эту связку у себя на машине.
С недавних пор я использую Убунту линукс, потому установка и настройка проходили с учетом особенностей данной системы. LAMP у меня уже был установлен ранее, так же как и inadyn. В итоге я получил достаточно гибкую и удобную систему управления своими проэктами, к которой есть доступ по сети. Интересно, как сделать?
С недавних пор я использую Убунту линукс, потому установка и настройка проходили с учетом особенностей данной системы. LAMP у меня уже был установлен ранее, так же как и inadyn. В итоге я получил достаточно гибкую и удобную систему управления своими проэктами, к которой есть доступ по сети. Интересно, как сделать?
+25
Отправить POST через file_get_contents()
3 мин
86KЧтобы получить содержимое веб-страницы все с удовольствием используют file_get_contents(), например file_get_contents('http://www.habrahabr.ru/'). Но я уже давно наблюдаю, что, как дело доходит до того, чтобы отправить POST, разработчики используют либо CURL, либо открывают сокеты. Я не считаю, что это плохо или что не надо так делать, просто для решения простых задач можно использовать простые решения.
Я и сам так раньше делал, пока на наткнулся на понятие контекстов потоковых операций в PHP. Контекст позволяет передать дополнительные параметры потоковому обработчику. Для http например, можно сконфигурировать POST-запрос или передать дополнительные заголовки.
file_get_contents() принимает 3 параметром «контекст», который собственно и конфигурирует сам запрос.
Ниже пример такого запроса или RTFM
Я и сам так раньше делал, пока на наткнулся на понятие контекстов потоковых операций в PHP. Контекст позволяет передать дополнительные параметры потоковому обработчику. Для http например, можно сконфигурировать POST-запрос или передать дополнительные заголовки.
file_get_contents() принимает 3 параметром «контекст», который собственно и конфигурирует сам запрос.
Ниже пример такого запроса или RTFM
+81
Безразмерная разметка с помощью relative (без float)
2 мин
4.1KНавеянно этой темой.
Пример, как это работает.
Представим, мы имеем класс relative, внутри которого имеется текст, и не задаём ему width:
![](http://zcn.ru/tmp/cr11.png)
При этом, блок обладает неизменными padding+border и резиновым width, таким, что width_px+padding_px+border_px = 100%.
Для absolute блоков, такой трюк не прокатывает.
Пример, как это работает.
1. Введение
Представим, мы имеем класс relative, внутри которого имеется текст, и не задаём ему width:
#bar{
position:relative;
border:5px solid #00FFFF;
padding:10px;
height:200px;
}
мы получим резиновый блок:<div id="bar">
text
</div>
![](http://zcn.ru/tmp/cr11.png)
При этом, блок обладает неизменными padding+border и резиновым width, таким, что width_px+padding_px+border_px = 100%.
Для absolute блоков, такой трюк не прокатывает.
+50
Flexify плагин для выравнивания чего бы то ни было
2 мин
1.9KНаверное каждый верстальщик, хотя бы раз в жизни сталкивался с версткой двух- или трех-колоночного макета. Хотя, сам макет сверстать несложно, если конечно колонки не различаются цветом фона, как например на хабре. А вот с разноцветными придется помучаться, потому что они имеют свойство тянуться по содержимому, а содержимое у соседних колонок, как правило, разной высоты.
Мне известны два способа решения этой проблемы:
— заключить обе колонки в контейнер, и поставить в фон двухцветную картинку;
— выставить колонкам одновременно вниз отрицательный марджин и положительный паддинг.
Оба способа имеют свои достоинства и недостатки, но сегодня я хочу рассказать выравнивании колонок с помощью плагина к JQuery — Flexify.
Мне известны два способа решения этой проблемы:
— заключить обе колонки в контейнер, и поставить в фон двухцветную картинку;
— выставить колонкам одновременно вниз отрицательный марджин и положительный паддинг.
Оба способа имеют свои достоинства и недостатки, но сегодня я хочу рассказать выравнивании колонок с помощью плагина к JQuery — Flexify.
+20
Как отправлять уведомления с сайта по SMS?
3 мин
88KНа днях озаботился доставкой SMS уведомлений с нашего сайта по абонентскому обслуживанию компьютеров в Киеве, пользователи создают тикеты, администраторы должны уведомляться о проблеме у клиента моментально.
Уже сейчас работает уведомление по e-mail, icq.
Но как быть, если администратор в дороге, и не имеет доступа к почте и мессенджеру? Нужно сделать уведомление SMSкой. Это будет полезно как админу, так и пользователю, т.к. последний сможет уведомиться об обработке его проблемы/заявки.
Уже сейчас работает уведомление по e-mail, icq.
Но как быть, если администратор в дороге, и не имеет доступа к почте и мессенджеру? Нужно сделать уведомление SMSкой. Это будет полезно как админу, так и пользователю, т.к. последний сможет уведомиться об обработке его проблемы/заявки.
+39
Обработка пользовательких видео
3 мин
4.4KНекоторое время я занимался (и занимаюсь до сих пор) веб-проектом, где необходимо было добавить фичу для загрузки пользовательских видео-роликов. Собственно, какие могут быть пользовательские видео? Очень разного качества и разнообразных форматов. Начиная от обычных flash файлов, которые представляют наименьшую проблему, до различных записей с телефонов. Встала задача — сделать демона, который бы занимался обработкой очереди загруженных файлов и выполнял следующие функции:
— Конвертирование видео в flash формат (FLV), ипользуя VP6 кодек
— Обновление метаинформации видеофайла
— Создание thumbnails из видео
— Дальнейшии манипуляции с БД
Конкретно в этой статье я рассмотрю варианты обработки уже сконвертированного в формат flash видео-ролика. Итак приступим.
— Конвертирование видео в flash формат (FLV), ипользуя VP6 кодек
— Обновление метаинформации видеофайла
— Создание thumbnails из видео
— Дальнейшии манипуляции с БД
Конкретно в этой статье я рассмотрю варианты обработки уже сконвертированного в формат flash видео-ролика. Итак приступим.
+70
Функция echo в PHP может выполняться более 1 секунды
6 мин
14KИли об особенностях управления отдаваемым контентом в PHP.
Поводом для данной статьи послужило двухдневное исследование, результаты которого показали, что безобидные по своей производительности функции echo и print на самом деле могут работать очень долго и их производительность зависит от качества интернета конечного пользователя.
Начну с того, что если бы мне такое сказали вчера, то я покрутил бы сам у этого человека пальцем у виска, однако серия проведенных тестов неумолимо свидетельствует об этом.
+139
Глава 3. Оживляем страницу с jQuery
8 мин
15KОчередная глава из книги «jQuery in Action» (авторы Bear Bibeault и Yehuda Katz). Прежде всего извиняюсь перед читателями за столь большой промежуток между публикациями глав. Но все-таки я это сделал, чему, конечно же, рад. Надеюсь, что и вы тоже не останетесь равнодушными. Итак, продалжаем.
+71
Компоненты интерфейса Safari и IE7 в .psd
1 мин
1.9KРешил поделиться файликом, который я использую каждый раз, когда рисую макет или проектирую интерфейс.
Экономит мне кучу времени.
![13.30 КБ](https://habrastorage.org/getpro/habr/post_images/482/438/ee3/482438ee35890870153a7017014c6767.png)
Скачать архив с пээсдэшником (49 kb)
UPD:
Ссылка от saltommeister
Контролы для Эксплорера, Файрфокса, Оперы и Сафари
Ссылка от niker
designerstoolbox.com/designresources/elements/
Ссылка от fatal
456bereastreet.com/archive/200409/styling_form_controls/
Ссылка от AlmeZ
Free Photoshop browser templates for webdesigners and screendesigners
Ссылка от 3fonov
Yahoo Design Stencil Kit
Экономит мне кучу времени.
![13.30 КБ](https://habrastorage.org/getpro/habr/post_images/482/438/ee3/482438ee35890870153a7017014c6767.png)
Скачать архив с пээсдэшником (49 kb)
UPD:
Ссылка от saltommeister
Контролы для Эксплорера, Файрфокса, Оперы и Сафари
Ссылка от niker
designerstoolbox.com/designresources/elements/
Ссылка от fatal
456bereastreet.com/archive/200409/styling_form_controls/
Ссылка от AlmeZ
Free Photoshop browser templates for webdesigners and screendesigners
Ссылка от 3fonov
Yahoo Design Stencil Kit
+120
Стилизация файл-инпутов
5 мин
38K![Результат стилизации файл-инпута](https://habrastorage.org/getpro/habr/olpictures/521/d24/3b7/521d243b79856f47d832c9065a41daaa.jpg)
Привет. Сегодня я хочу вам рассказать о том, как можно изменить внешний вид файлового инпута.
Дело в том, что изменение внешнего вида инпутов, как правило, не вызывает трудностей, но этот вид инпутов отличается от остальных. В первую очередь это связано с безопасностью, во вторую с тем, что каждый браузер по своему отображает этот элемент, и на это почти нельзя повлиять.
+3
Оптимизация загрузки страниц на практике
4 мин
12KНаткнулся на кучу интересных статей на webo.in и зачитался. Решил применить описанное там на реальном проекте. Вот что получилось. Проектик маленький — сайт моих друзей Bookcare. Они делают обложки для книг, а их сайт — мой «проект выходного дня».
+34
1000 замечательных иконок для веб страниц
1 мин
6.6KFugue Icons
![image](http://www.pinvoke.com/icon/image/fugue.png)
Отличный пак из 1000 иконок в размере 16x16
Эти иконки распространяются по лицензии Creative Commons Attribution 3.0 license.
Ссылка на сайт
Скачать пак | Посмотреть иконки (1199.25 КБ)
+69
Подсветка синтаксиса несколькими строками javascript
4 мин
21KДа, я знаю, что такое синтаксический анализ. И знаю много разных библиотек для подсветки чего угодно. Только это всё не то, когда надо подсветить простенький примерчик, не содержащий всяких кодоизвращений. И уж совсем негоже тянуть для этого много-много байт _правильно_ разбирающих _любой_ код.
Для случаев без кодоизврата (а их большинство) можно использовать такой код:
Для случаев без кодоизврата (а их большинство) можно использовать такой код:
code = code // ключевые слова (список неполон, написал, что в голову пришло) .replace(/(var|function|typeof|new|return|if|for|in|while|break|do|continue|switch|case)([^a-z0-9\$_])/gi, '<span class="kwrd">$1</span>$2') // всякие скобочки .replace(/(\{|\}|\]|\[|\|)/gi,'<span class="kwrd">$1</span>') // однострочные комментарии .replace(/(\/\/[^\n\r]*(\n|\r\n))/g,'<span class="comm">$1</span>') // строки .replace(/('.*?')/g,'<span class="str">$1</span>') // функции (когда после идентификатора идет скобка) .replace(/([a-z\_\$][a-z0-9_]*)\(/gi,'<span class="func">$1</span>(') // не люблю восьмизначные табы, пусть лучше будет 4 пробела .replace(/\t/g,' ');
+56
Информация
- В рейтинге
- Не участвует
- Откуда
- Москва, Москва и Московская обл., Россия
- Дата рождения
- Зарегистрирован
- Активность