15 jQuery сниппетов для разработчиков

С помощью 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

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

15 jQuery сниппетов для разработчиков | | 2013-07-22 21:15:13 | | Статьи Web-мастеру | | С помощью JQuery можно создавать действительно интерактивные сайты. Мы можем манипулировать HTML элементами как хотим, создавать анимацию, и так далее. Сегодня мы покажем вам 15 фрагментов jQuery | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: