Slyweb
На разработку сайта! Скидки 50%!

Сниппеты jQuery для HTML

jQuery сниппеты

Сниппеты, о которых пойдёт речь далее, проверены на работоспособность в следующих браузерах:

  • Google Chrome 9+
  • Opera 10.5+
  • Firefox 5+
  • Safari 3.2+
  • Internet Explorer 6 +

Сниппет, выбирающий URL из текста и превращающий его в ссылку:

  • Код
  • Чистый код
  1.<script type="text/javascript">
  2.$(document).ready(function(){
  3. $.fn.replaceUrl = function() {
  4. var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
  5. this.each(function() {
  6. $(this).html(
  7. $(this).html().replace(regexp,'<a href="$1">$1</a>')
  8. );
  9. });
10. return $(this);
11. }
12. //usage
13. $('p').replaceUrl();
14.
15.});
16.</script>
17.
18.<p>http://test.ru/ucheba/jq/</p>
19.

        

Сниппет проверяет полную загрузку изображений:

  • Код
  • Чистый код
  1. $('#theImage').attr('src', 'image.jpg').load(function() {
  2. alert('This Image Has Been Loaded');
  3. });
  4.

        

Сниппет для обхода элементов XML разметки:

  • Код
  • Чистый код
  1.$(document).ready(function(){
  2. function parseXml(xml) {
  3. //find every Tutorial and print the author
  4. $(xml).find("name").each(function()
  5. {
  6. $("#output").append($(this).attr("author") + "");
  7. });
  8. }
  9.
10.});
11.

        

Сниппет для проверки значения выбранной опции элемента SELECT соответствует ли оно определенному значению из массива:

  • Код
  • Чистый код
  1.$(document).ready(function(){
  2. $("select#category").change(function () {
  3. var str = "";
  4.
  5. str = $("#category option:selected").val();
  6.
  7.
  8. console.log(str)
  9.var arr = ["Alex", "Pete", "Bushes", "John" ];
10.
11. find = jQuery.inArray(str, arr);
12.console.log(find)
13. if (find >= 0){
14. $("#trackershow").show();
15. }
16. else
17. {
18. $("#trackershow").hide();
19. }
20. });
21.});
22.

        

Сниппет для обхода элементов XML разметки:

  • Код
  • Чистый код
  1.
  2. $('.someClass').filter(function() {
  3. return $(this).attr('value') == $('input#someId').val() ;
  4. })
  5.

        

Сниппет для отметки всех checkbox:

  • Код
  • Чистый код
  1. var tog = false; // or true if they are checked on load
  2. $('a').click(function() {
  3. $("input[type=checkbox]").attr("checked",!tog);
  4. tog = !tog;
  5. });
  6.

        

Сниппет, позволяющий сделать открытие ресурса ссылки в новой вкладке:

  • Код
  • Чистый код
  1.jQuery('a.newTab').live('click', function(){
  2. newwindow=window.open($(this).href);
  3. jQuery(this).target = "_blank";
  4. return false;
  5.});
  6.

        

Сниппет. определяющий родительский элемент в порядке перехода вверх по структуре DOM:

  • Код
  • Чистый код
  1. $('#searchBox').closest('div');
  2.

        

Сниппет, центрирующий элемент на странице:

  • Код
  • Чистый код
  1.$(document).ready(function(){
  2. jQuery.fn.center = function () {
  3. this.css('position','absolute');
  4. this.css('top', ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + 'px');
  5. this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');
  6.
  7. return this;
  8.
  9. }
10.
11. $('div').center();
12.
13.});
14.

        

Сниппет, проверяющий видимость элемента.

  • Код
  • Чистый код
  1.if($(element).is(':visible') == 'true') { }
  2.

        

Сниппет, ограничивающий ввод информации определённым количеством знаков для полей формы.

  • Код
  • Чистый код
  1. jQuery.fn.maxLength = function(max){
  2. this.each(function(){
  3. var type = this.tagName.toLowerCase();
  4. var inputType = this.type? this.type.toLowerCase() : null;
  5. if(type == "input" && inputType == "text" || inputType == "password"){
  6. //Apply the standard maxLength
  7. this.maxLength = max;
  8. }
  9. else if(type == "textarea"){
10. this.onkeypress = function(e){
11. var ob = e || event;
12. var keyCode = ob.keyCode;
13. var hasSelection = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;
14. return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection);
15. };
16. this.onkeyup = function(){
17. if(this.value.length > max){
18. this.value = this.value.substring(0,max);
19. }
20. };
21. }
22. });
23.};
24.
25.$('#mytextarea').maxLength(500);
26.

        

Сниппет удаляющий значение по умолчанию для поля формы.

  • Код
  • Чистый код
  1.swap_val = [];
  2.$(".swap").each(function(i){
  3. swap_val[i] = $(this).val();
  4. $(this).focusin(function(){
  5. if ($(this).val() == swap_val[i]) {
  6. $(this).val("");
  7. }
  8. }).focusout(function(){
  9. if ($.trim($(this).val()) == "") {
10. $(this).val(swap_val[i]);
11. }
12. });
13.});
14.

        

Сниппет для копирования содержимого элемента вместе с его тегом

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

  • Код
  • Чистый код
  1.<script src="http://code.jquery.com/jquery-latest.js"></script>
  2. <script>
  3. jQuery.fn.outerHTML = function() {
  4. return $('<div>').append( this.eq(0).clone() ).html();
  5.};
  6. $(document).ready(function(){
  7.
  8.
  9. console.log($("#vsemi #vs").next().outerHTML())
10. });
11.</script>
12.

        

Сниппет для получения родительского элемента с использованием .closest()

Начиная с версии Jquery 1.4 появилась возможность перемещения от определенных элементов вверх по структуре DOM с помощью метода .closest(), который принимает один параметр - селектор или элемент.

  • Код
  • Чистый код
  1.<script src="http://code.jquery.com/jquery-latest.js"></script>
  2. <script>
  3. $("li").click(function(){
  4. $(this).closest(".me").addClass("smile");
  5. });
  6.</script>
  7.

        

Сниппет выделяющий слова

Пример, в котором происходит выделение первого слова в ссылке и помещение его в элемент span.

  • Код
  • Чистый код
  1.<script type="text/javascript">
  2.
  3.$(document).ready(function(){
  4.
  5.$('li').each(function(){
  6.
  7.var first = $(this).find('a').text().slice(0,3);
  8.var last = $(this).find('a').text().slice(3,$(this).text().length);
  9.
10.$(this).find('a').html('<span style="color:red;">'+first+'</span>' + last);
11.});
12.
13.});
14.
15.</script>
16.<ul>
17.<li class="cat_level_1">
18.<a href="#">01 Первая категория</a></li>
19.<li class="cat_level_1">
20.<a href="#">02 Первая категория 2</a></li>
21.<li class="cat_level_1">
22.<a href="#">03 Первая категория 3</a></li>
23.</ul>
24.

        

Сниппет jQuery, создающий затемнённый слой на всё окно.

  • Код
  • Чистый код
  1.$(function() {
  2.
  3. var docHeight = $(document).height();
  4.
  5. $("body").append("<div id='overlay'></div>");
  6.
  7. $("#overlay")
  8. .height(docHeight)
  9. .css({
10. 'opacity' : 0.4,
11. 'position': 'absolute',
12. 'top': 0,
13. 'left': 0,
14. 'background-color': 'black',
15. 'width': '100%',
16. 'z-index': 5000
17. });
18.
19.});
20.

        

Сниппет jQuery создающий затемнённый слой на всё окно и выводящий индикатор загрузки

Сниппет jQuery создающий затемнённый слой на всё окно и выводящий индикатор загрузки страницы(нажмите для примера). В версии jQuery 1.5 данный скрипт не будет работать в IE9, необходимо перейти на версию 1.5.1. Пример рассчитан на 3 секунды, после истечения 3 секунд прозрачный слой исчезнет самостоятельно.

  • Код
  • Чистый код
  1.<script type="text/javascript">
  2.$(function() {
  3.
  4.
  5. jQuery.fn.center = function () {
  6.
  7.
  8. var docHeight = $(document).height();
  9. var myel = $(this);
10.
11. $("body").append("<div id='overlay'></div>");
12.
13. $("#overlay")
14. .height(docHeight)
15. .css({
16. 'display' : 'none',
17. 'opacity' : 0.4,
18. 'position': 'absolute',
19. 'top': 0,
20. 'left': 0,
21. 'background-color': 'black',
22. 'width': '100%',
23. 'z-index': 5000
24. }).fadeIn(2000, function(){
25.
26. myel.css({
27. 'width': '224px',
28. 'background-color': '#fff',
29. 'padding': '10px',
30. 'text-transform': 'uppercase',
31. 'font': 'bold 11px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif',
32. 'border': '1px solid #d8d8d8',
33. 'color': '#7d7c7d',
34.
35. '-webkit-box-shadow': '0 0 10px #f1f1f1',
36. '-moz-box-shadow': '0 0 10px #f1f1f1',
37. 'box-shadow': '0 0 10px #f1f1f1',
38.
39. '-moz-border-radius': '6px',
40. '-webkit-border-radius': '6px',
41. 'border-radius': '6px',
42. 'text-align': 'center',
43. })
44. .append('<img src="images/ajaxloader.gif" alt="Loading..."><div><em>Загрузка страницы...</em></div>');
45.
46. myel.css('position','absolute');
47. myel.css('top', ( $(window).height() - myel.height() ) / 2+$(window).scrollTop() + 'px');
48. myel.css('left', ( $(window).width() - myel.width() ) / 2+$(window).scrollLeft() + 'px');
49.
50. return myel;
51. });
52.
53.
54. }
55.
56. $('#loadpage').center();
57.
58.
59.
60.});
61.</script>
62.
63.
64.<div id="loadpage"></div>
65.

        

Александр Ермаков