10 отличных jQuery-сниппетов

dreamhelg — Tue, 22 Nov 2011 11:39:00 +0000

jQuery вдохнул новую жизнь в JavaScript-программирование. Благодаря этому замечательному инструменту, появилась возможность с легкостью создавать мощные и интерактивные страницы. В сегодняшней статье собраны 10 полезных примеров jQuery-кода, которые обязательно вам пригодятся при разработке клиентской стороны сайта.

Предзагрузка изображений

Предзагрузка изображений весьма удобна: вместо того чтобы загружать картинку по запросу пользователя, мы предварительно подгружаем их в фоне, для того чтобы они сразу были готовы к показу. С помощью jQuery это делается очень просто, смотрите: [javascript] (function($) { var cache = []; // Аргументами являются пути картинок, относительно текущей страницы $.preLoadImages = function() { var args_len = arguments.length; for (var i = args_len; i--;) { var cacheImage = document.createElement('img'); cacheImage.src = arguments[i]; cache.push(cacheImage); } } jQuery.preLoadImages("image1.gif", "/path/to/image2.png"); [/javascript] Источник: http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

Ссылки target=”blank”

Следующий фрагмент предназначен для того, чтобы все ссылки, имеющие атрибут rel=”external”, открывались в новом табе/окне. Код легко можно изменить, например открывать ссылки только с определенным классом. [javascript] $('a[@rel$='external']').click(function(){ this.target = "_blank"; }); /* Использование: catswhocode.com */ [/javascript] Источник: http://snipplr.com/view/315/-jquery–target-blank-links

Добавление класса тэгу при включенном ява-скрипте

Этот пример состоит всего из одной строчки, но он является самым простым способом определить включен ли ява-скрипт в клиентском браузере. Если ява-скрипт включен, класс hasJs будет добавлен к тегу . [javascript] $('body').addClass('hasJS'); [/javascript] Источник: http://eisabainyo.net/weblog/2010/09/01/10-useful-jquery-snippets

Плавная прокрутка по ссылке

jQuery хорошо известен своей возможностью легко создавать красивые визуальные эффекты. Одним из таких эффектов, является плавная прокрутка страницы, при нажатии на ссылку. Следующий пример демонстрирует пример такой прокрутки страницы, по клику на ссылку с классом topLink. [javascript] $(document).ready(function() { $("a.topLink").click(function() { $("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top + "px" }, { duration: 500, easing: "swing" }); return false; }); }); [/javascript] Источник: http://snipplr.com/view.php?codeview&id=26739

Изменение прозрачности при наведении

Еще один красивый эффект – очень популярный среди клиентов – эффект затухания элемента при движении мыши. Следующий пример кода, реализует плавное изменение прозрачности картинки при наведении/отведении мыши. [javascript] $(document).ready(function(){ $(".thumbs img").fadeTo("slow", 0.6); // Эта строчка при загрузке страницы задает всем миниатюрам прозрачность равную 60% $(".thumbs img").hover(function(){ $(this).fadeTo("slow", 1.0); // Делаем картинку непрозрачной, при наведении мыши },function(){ $(this).fadeTo("slow", 0.6); // Снова возвращаем прозрачность 60%, при отведении мыши }); }); [/javascript] Источник: http://snipplr.com/view/18606

Колонки одинаковой высоты

При создании сайта с колонками, очень часто требуется, чтобы все колонки были одинаковой высоты, как это можно было сделать в старых, добрых таблицах. Этот пример кода вычисляет высоту самой длинной колонки, и автоматически задает ту же высоту всем остальным. [javascript] var max_height = 0; $("div.col").each(function(){ if ($(this).height() > max_height) { max_height = $(this).height(); } }); $("div.col").height(max_height); [/javascript] Источник: http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4

Включаем HTML5-разметку в старых браузерах

HTML5 – это будущее клиентской веб-разработки. К сожалению, некоторые старые браузеры не умеют распознавать новые теги, такие как header и section. Этот пример кода, научит старые браузеры распознавать новые HTML5-тэги. [javascript] (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})() [/javascript] Еще лучше будет, если вы подключите .js-файл в секции вашей html-страницы. [javascript] [/javascript] Источник: http://remysharp.com/2009/01/07/html5-enabling-script/

Проверяем поддерживает ли браузер определенное CSS3-свойство

Ниже представлена простая jQuery-функция, проверяющая, поддерживает ли браузер клиента определенное CSS3-свойство. В этом примере, мы проверяем свойство border-radius, но его конечно, легко можно изменить на любое другое. Обратите внимание, что при указании свойства, вам нужно опустить дефис, чтобы предотвратить ошибку синтаксиса. Поэтому вместо border-radius, вам нужно написать “borderRadius” или “BorderRadius”. [javascript] var supports = (function() { var div = document.createElement('div'), vendors = 'Khtml Ms O Moz Webkit'.split(' '), len = vendors.length; return function(prop) { if ( prop in div.style ) return true; prop = prop.replace(/^[a-z]/, function(val) { return val.toUpperCase(); }); while(len--) { if ( vendors[len] + prop in div.style ) { // browser supports box-shadow. Do what you need. // Or use a bang (!) to test if the browser doesn't. return true; } } return false; }; })(); if ( supports('textShadow') ) { document.documentElement.className += ' textShadow'; [/javascript] Источник: http://snipplr.com/view/44079

Получаем параметры url

Получение url-параметров с помощью jQuery – довольно простая задача. Следующий пример это продемонстрирует. [javascript] $.urlParam = function(name){ var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href); if (!results) { return 0; } return results[1] || 0; } [/javascript] Источник: http://snipplr.com/view/26662

Отключаем клавишу “Enter” в формах

По умолчанию, форма отправляется на сервер при нажатии клавиши “Enter”. Но для некоторых форм, нажатие этой клавиши может вызвать проблемы. Следующий пример кода, поможет вам предотвратить нежелательную отправку формы, путем отключения клавиши “Enter”, с помощью jQuery. [javascript] $("#form").keypress(function(e) { if (e.which == 13) { return false; } }); [/javascript] Источник: http://snipplr.com/view/10943/disable-enter-via-jquery Перевод статьи “10 awesome jQuery snippets”, автор Jean-Baptiste Jung

10 полезных CSS/JS-решений для веб-разработчика

dreamhelg — Thu, 16 Jul 2009 04:07:30 +0000

Нередко творческие и поистине замечательные дизайнерские решения остаются неизвестными, потому что мы, дизайнеры просто не замечаем их. Будучи занятыми в своих собственных проектах, мы иногда, интуитивно пытаемся понять, за сложным [...]

Изучаем JQuery. Изменение CSS-свойств

dreamhelg — Thu, 09 Jul 2009 11:10:56 +0000

Давно в моем блоге не было статей про JQuery. Нет, статьи с его применением были, конечно, но он там выступал в роле вспомогательного инструмента, а рубрика «Изучаем JQuery» тем временем [...]

Как использовать Firebug в других браузерах

dreamhelg — Mon, 16 Mar 2009 09:14:54 +0000

Firebug - лучший друг разработчика. Это расширение для Firefox, позволяющее легко отлаживать и разрабатывать веб-страницы. Он предоставляет вам возможность инспектировать элементы страницы и выполнять многие другие функции. Но как быть [...]

Селекторы JQuery — как получить все что вы хотите

dreamhelg — Tue, 20 Jan 2009 10:32:53 +0000

В прошлой статье, мы разобрались что именно представляет собой JQuery, где его можно скачать и как подключить, а также простенький пример по раскрашиванию ссылок. В этой статье речь пойдет об [...]

Изучаем JQuery вместе

dreamhelg — Wed, 24 Dec 2008 18:59:59 +0000

Давно и всем известно, что если хочешь в чем-то хорошо разобраться нужно начать объяснять это другому человеку. Именно поэтому, практически ничего не зная о JQuery, я решила написать серию статей [...]

Очередной блог фрилансера » javascript