С помощью JQuery можно создавать действительно интерактивные сайты. Мы можем манипулировать HTML элементами как хотим, создавать анимацию, и так далее. Сегодня мы покажем вам 15 фрагментов jQuery кода, которые могут вам пригодиться!
1. Пред-загрузка изображения
(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»);
2. Делаем всё дружественным к мобильным устройствам
var scr = document.createElement(‘script’); scr.setAttribute(‘src’, ‘https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js’); document.body.appendChild(scr); scr.onload = function(){ $(‘div’).attr(‘class’, »).attr(‘id’, »).css({ ‘margin’ : 0, ‘padding’ : 0, ‘width’: ‘100%’, ‘clear’:’both’ }); };
3. Изменение размеров изображений с помощью jQuery
$(window).bind(«load», function() { $(‘#product_cat_list img’).each(function() { var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $(this).width(); var height = $(this).height(); if(width > maxWidth){ ratio = maxWidth / width; $(this).css(«width», maxWidth); $(this).css(«height», height * ratio); height = height * ratio; } var width = $(this).width(); var height = $(this).height(); if(height > maxHeight){ ratio = maxHeight / height; $(this).css(«height», maxHeight); $(this).css(«width», width * ratio); width = width * ratio; } }); //$(«#contentpage img»).show(); // IMAGE RESIZE });
4. Ссылка “Наверх”
$(document).ready(function(){ $(‘.top’).click(function() { $(document).scrollTo(0,500); }); }); <a href=»#» class=»top»>Back To Top</a>
5. jQuery акардион
var accordion = { init: function(){ var $container = $(‘#accordion’); $container.find(‘li:not(:first) .details’).hide(); $container.find(‘li:first’).addClass(‘active’); $container.on(‘click’,’li a’,function(e){ e.preventDefault(); var $this = $(this).parents(‘li’); if($this.hasClass(‘active’)){ if($(‘.details’).is(‘:visible’)) { $this.find(‘.details’).slideUp(); } else { $this.find(‘.details’).slideDown(); } } else { $container.find(‘li.active .details’).slideUp(); $container.find(‘li’).removeClass(‘active’); $this.addClass(‘active’); $this.find(‘.details’).slideDown(); } }); } };
6. Пред-загрузка предыдущего и следующего фото
var nextimage = «/images/some-image.jpg»; $(document).ready(function(){ window.setTimeout(function(){ var img = $(«»).attr(«src», nextimage).load(function(){ }); }, 100); });
7. Авто заполнение элементов Select с помощью jQuery & Ajax
$(function(){ $(«select#ctlJob»).change(function(){ $.getJSON(«/select.php»,{id: $(this).val(), ajax: ‘true’}, function(j){ var options = »; for (var i = 0; i < j.length; i++) { options += » + j[i].optionDisplay + »; } $(«select#ctlPerson»).html(options); }) }) });
8. Авто-замена несуществующих изображений
$(«img»).error(function () { $(this).unbind(«error»).attr(«src», «missing_image.gif»); }); $(«img»).error(function () { $(this).attr(«src», «missing_image.gif»); });
9. Эффекты появления и затухания при наводке и отводке мыши
$(document).ready(function(){ $(«.thumbs img»).fadeTo(«slow», 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads $(«.thumbs img»).hover(function(){ $(this).fadeTo(«slow», 1.0); // This should set the opacity to 100% on hover },function(){ $(this).fadeTo(«slow», 0.6); // This should set the opacity back to 60% on mouseout }); });
10. Очищаем данные формы
function clearForm(form) { $(‘:input’, form).each(function() { var type = this.type; var tag = this.tagName.toLowerCase(); // normalize case if (type == ‘text’ || type == ‘password’ || tag == ‘textarea’) this.value = «»; else if (type == ‘checkbox’ || type == ‘radio’) this.checked = false; else if (tag == ‘select’) this.selectedIndex = -1; }); };
11. Предотвращение множественной отправки формы
$(document).ready(function() { $(‘form’).submit(function() { if(typeof jQuery.data(this, «disabledOnSubmit») == ‘undefined’) { jQuery.data(this, «disabledOnSubmit», { submited: true }); $(‘input[type=submit], input[type=button]’, this).each(function() { $(this).attr(«disabled», «disabled»); }); return true; } else { return false; } }); });
12. Динамическое добавления элементов формы
$(‘#password1′).change(function() { $(«#password1»).append(«<input type=’text’ name=’password2′ id=’password2′ />»); });
13. Создаём кликабельный Div
$(«.myBox»).click(function(){ window.location=$(this).find(«a»).attr(«href»); return false; }); <div class=»myBox»> blah blah blah. <a href=»http://google.com»>link</a> </div>
14. Уравниваем ширину элементов Div
var maxHeight = 0; $(«div»).each(function(){ if ($(this).height() > maxHeight) { maxHeight = $(this).height(); } }); $(«div»).height(maxHeight);
15. Загрузка контента при сколле
var loading = false; $(window).scroll(function(){ if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){ if(loading == false){ loading = true; $(‘#loadingbar’).css(«display»,»block»); $.get(«load.php?start=»+$(‘#loaded_max’).val(), function(loaded){ $(‘body’).append(loaded); $(‘#loaded_max’).val(parseInt($(‘#loaded_max’).val())+50); $(‘#loadingbar’).css(«display»,»none»); loading = false; }); } } }); $(document).ready(function() { $(‘#loaded_max’).val(50); });
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/fuBb6Kn-6tA/lessons.php
Источник: