Полезные фрагменты кода jQuery

Здравствуйте, уважаемые читатели XoZbloga! После продолжительного «молчания» я снова принимаюсь за работу. Библиотека jQuery безусловно завоевала огромную популярность у веб-разработчиков и очень многие пользуются ей при создании сайтов. В этой статье я приведу несколько фрагментов кода jQuery, которые могут Вам пригодиться. Не забудьте, что должна быть подключена библиотека jQuery.

Плавная прокрутка к #якорю

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

1
2
3
<h1 id="anchor">Заголовок</h1>
<!-- Здесь много много контента -->
<p><a href="#anchor" class="topLink">К началу страницы</a></p>

Непосредственно фрагмент jQuery.

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function() {

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

});

Параметр duration отвечает за скорость прокрутки в миллисекундах, easing — эффект прокрутки (их достаточно много поэтому вот ссылка на документацию).

Автоматическая загрузка контента при прокрутке

Некоторые веб-сайты, такие как Twitter используют бесконечную прокрутку страницы. Это означает, что все содержимое динамически загружается на одной странице до тех пор, как вы прокручиваете вниз. Я уже писал о подобном jQuery плагине, в том числе и для WordPress. Вот еще один способ реализации такой прокрутки. Сначала HTML-разметка:

1
2
3
4
5
6
7
<div id="loadingbar" style="display:none;position:fixed;bottom:0;left:0;right:0;background-color:#000;color:#FFF;text-align:center;"><b><i>Загрузка следующих 50...</i></b></div>
<!-- Скрытое поле с количеством загружаемых строк -->
<input type="hidden" value='50' id="loaded_max" />
<!-- -->
LINE #0: Просто какой-то текст.<br/>
...
LINE #50: Просто какой-то текст.<br/>

Теперь, сам фрагмент который подгружает строки из файла load.php в количестве, указанном в скрытом поле.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function() {
   $('#loaded_max').val(50);
});
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;
         });
      }
   }
});

И на последок исходный код файла load.php который генерирует строки с текстом.

1
2
3
4
5
6
<?php
$_GET['start'] = preg_replace('~[^0-9]~','',$_GET['start']); // simple force num
for($i=intval($_GET['start']);$i<=($_GET['start']+50);$i++){
   echo 'LINE #'.$i.': Просто какой-то текст.<br/>';
}
?>

Изменение размера изображения средствами JQuery

Следующий фрагмент может пригодится для того, чтобы иметь возможность изменить размер изображений.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(window).bind("load", function() {
   // IMAGE RESIZE
   $('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;
      }
   });
});

Проверка пароля на прочность

Этот фрагмент кода с использованием регулярных выражений для проверки пароля на надежность. В примере также используются классы для раскраски предупреждения. Разметка выглядит так:

1
2
<input type="password" name="pass" id="pass" />
<span id="passstrength"></span>

Сам фрагмент:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$('#pass').keyup(function(e) {
     var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
     var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
     var enoughRegex = new RegExp("(?=.{6,}).*", "g");
     if (false == enoughRegex.test($(this).val())) {
             $('#passstrength').html('Больше символов');
     } else if (strongRegex.test($(this).val())) {
             $('#passstrength').removeClass().addClass('ok');
             $('#passstrength').html('Сильный!');
     } else if (mediumRegex.test($(this).val())) {
             $('#passstrength').removeClass().addClass('alert');
             $('#passstrength').html('Средний!');
     } else {
             $('#passstrength').removeClass().addClass('error');
             $('#passstrength').html('Слабый!');
     }
     return true;
});

Чередующиеся цвета строк

В больших списках или таблицах, чередуя цвета строк можно существенно улучшить читаемость. Вы можете использовать любой HTML элемент TD, TR, Li, и т.д. Вот как можно чередовать цвета строк в списке элементов, используя JQuery:

1
2
3
4
5
<!-- html пример -->
<div>Row 1</div>
<div>Row 2</div>
<div>Row 3</div>
<div>Row 4</div>
1
2
3
4
5
$(document).ready(function(){
     //jquery
     $('div:odd').css("background-color", "#F4F4F8");
     $('div:even').css("background-color", "#EFF1F1");
});

Сделать все DIV интерактивными

Вот простой способ сделать блок DIV интерактивным — при нажатии на содержимое произойдет переход по ссылке, находящейся в блоке. Допустим, у вас есть этот HTML код:

1
2
3
4
<div class="myBox">
     blah blah blah.
    <a href="http://google.com">link</a>
</div>

Следующие строки JQuery сделают весь DIV интерактивными:

1
2
3
4
5
6
$(document).ready(function(){
     $(".myBox").click(function(){
          window.location=$(this).find("a").attr("href");
          return false;
     });
});

Замена «битых» изображений

Следующий фрагмент jQuery заменяет отсутствующие изображения на странице, на заготовленную «заглушку».

1
2
3
4
5
$(document).ready(function(){
    $("img").error(function () {
        $(this).unbind("error").attr("src", "c.png");
    });
});

Отслеживать нажатие клавиши

Допустим вы не хотите, чтобы посетители случайно нажали клавишу Enter и отправили форму. Можно использовать этот фрагмент, чтобы отключить нажатие клавиши Enter в формах. Остальные Коды клавиш.

1
2
3
4
5
6
7
$(document).ready(function() {
     $("body").keypress(function(e) {
          if (e.which == 13) {
              return false;
          }
     });
});

Чтобы оставаться в курсе свежих статей и уроков следите за XoZblog в Facebook или добавляйте в круги на Google+. Не забывайте оставлять комментарии к статьям и урокам. Спасибо!

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!