Добавить в избранное

10 вставок кода jQuery

Дата: 2011-12-01

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

Более ранняя загрузка изображений

Более ранняя загрузка изображений очень полезна, ведь картинки будут загружаться, пока что пользователь занят просмотром другого материала. С помощью jQuery задача решается очень просто: 

(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");

Снабжаем ссылки атрибутом target=”blank”

Последующий код будет обнаруживать все ссылки, снабженные атрибутом rel="external" в новой закладке или окне. Код легко видоизменять для открытия ссылок только с именно определенным классом. 

$('a[@rel$='external']').click(function(){ 
 this.target = "_blank"; 
 }); 
 
 /* 
 Использование:

 */ 

Добавляем класс к тегу если разрешен JavaScript

Данный код представляет собой всего одну строку. Но это самый простой способ определить разрешение использования JavaScript в браузере клиента. Если разрешение есть, класс hasJS будет добавлен к тегу .

$('body').addClass('hasJS');

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

JQuery известен своим функционалом для создания впрямь визуальных эффектов. Действительно буржуазный, но удивительно лестный эффект - плавное проскальзывание содержания до ссылки. Именно последующий код создает этакий эффект, в отдельных случаях нажимается ссылка с классом topLink.

$(document).ready(function() {
$("a.topLink").click(function() { 
$("html, body").animate({ 
 scrollTop: $($(this).attr("href")).offset().top + "px"
}, { 
duration: 500, 
easing: "swing"
}); 
return false; 
}); 
}); 

 

Плавное проявление/затухание при наведении курсора мыши

Еще одинакий более лестный несказанно визуальный эффект, который очень популярен - плавное проявление/затухание элементов при наведении на них курсора мыши. Необыкновенно последующий код устанавливает непрозрачность 100% при наведении курсора мыши, и 60% - при потере фокуса. 

$(document).ready(function(){ 
$(".thumbs img").fadeTo("slow", 0.6); // Устанавливаем непрозрачность миниатюр до 60% при загрузке страницы. 
$(".thumbs img").hover(function(){ 
$(this).fadeTo("slow", 1.0); // При наведении курсора, непрозрачность становится 100%. 
},function(){ 
$(this).fadeTo("slow", 0.6); // Пр потере фокуса непрозрачность опять становится 60%. 
}); 
}); 

Равная высота колонок

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

var max_height = 0; 
$("div.col").each(function(){ 
if ($(this).height() > max_height) { max_height = $(this).height(); } 
}); 
$("div.col").height(max_height);

Enable HTML5 markup on older browsers

HTML5 определенно представляет собой будущее веб разработки клиентский приложений. К сожалению, действительно старые браузеры не распознают необыкновенно новых тегов, таких как header или section. Этот код принуждает удивительно старые браузеры распознавать действительно новые теги HTML5.

(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])}})() 

Лучшим вариантом решения будет присоединять файл .js в раздел вашей страницы HTML:

 

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

Тут приводится обыкновенная функция jQuery для проверки поддержки браузером клиента, в действительности, определенных свойств CSS3. В необыкновенно данном примере проверяется свойство border-radius, но код можно легко варьировать для проверки другого свойства.

Примечание: нужно выбрасывать тире при передаче имени свойства в качестве парметра. Скажем, вместо border-radius, нужно внедрять “borderRadius” или “BorderRadius”. 

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 ) { 
// Браузер поддерживает свойство. 
// Или можно использовать оператор отрицания (!). 
return true; 
} 
} 
return false; 
}; 
})(); 
if ( supports('borderRadius') ) { 
document.documentElement.className += ' borderRadius';

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

Получение параметров URL с помощью jQuery - очень простой процесс. 

$.urlParam = function(name){ 
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href); 
if (!results) { return 0; } 
return results[1] || 0; 
}

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

По умолчанию, форма может быть отправлена нажатием клавиши “Enter”. Но в некоторых формах, без сомнения, подобный функционал может оказаться в действительности, лишним и вызывать потрясающе отдельные проблемы при вводе, по-моему, данных. Ниже приведенный код подавляет функционирование клавиши “Enter” в форме.

$("#form").keypress(function(e) { 
if (e.which == 13) { 
return false; 
} 
});

Данный урок подготовлен для Вас сайтом  tiwebmaster.ru
Источник урока: www.catswhocode.com/blog/10-awesome-jquery-snippets

Просмотров: 2223

Последние 5 уроков

Обработка AJAX с помощью jQuery (часть 2)

В предыдущем уроке серии мы дали общее определение технологии AJAX и рассмотрели простой пример с использованием метода $.get(). Теперь продвинемся дальше и посмотрим, что еще можно делать с помощью AJAX и как.


Обработка AJAX с помощью jQuery (часть 1)

Первая статья посвящеа общему описанию технологии AJAX и потроение запросов при помощи метода $.get().


Размножения полей формы на сайте

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


Автосохранение данных, введенных в поля формы

Представьте, какую бурю эмоций испытает пользователь, которому нужно добавить всего лишь пару символов, чтобы отправить форму с большим объемом вручную заполненных полей, и вдруг все данные теряются. Ужасно. Если, конечно, нет способа восстановить данные, чтобы избежать участи Сизифа.


10 вставок кода jQuery

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


Видео уроки по php,jquery,ajax,css,html,сео