вход

Полезные сниппеты jQuery

Полезные хитрости и приемы jQuery

jQuery — библиотека JavaScript, является очень простой и функциональной в использовании, и часто при верстке макета, она настолько тесно взаимодействует с CSS и HTML, что без jQuery уже становится трудно представить современный функционал, но все же это не CSS и не HTML. jQuery это отдельный язык, со своими приёмами и хитростями в использовании. Поэтому советы по использованию jQuery будут всегда полезны.

И сегодня несколько полезных и простых советов при верстке макетов и использовании jQuery. Советы очень простые, поэтому комментировать каждый почти не нужно. Суть строк понятна из названия, поэтому оставил только код, чтобы было нагляднее.

Генерация случайных величин цвет с помощью JavaScript

Фрагмент JavaScript кода для генерации случайных цветов в системе RGB.

var hue = 'rgb(' + 
	(Math.floor(Math.random() * 256)) + ',' + 
	(Math.floor(Math.random() * 256)) + ',' + 
    (Math.floor(Math.random() * 256)) + ')';

/* попробуем изменить цвет фона */
$('body').css("background",hue);

демо

Как отследить закрытие всплывающего окна при помощи jQuery

//отслеживаем закрытие popup окна
var win = window.open("http://site/page.html",'','height=500,width=500');
var winTimer = window.setInterval(function()
{
    if (win.closed !== false)
    {
        // !== обязательно для совместимости с Opera
        window.clearInterval(winTimer);
        log('окно закрыто...');
    }
}, 200);

 

Как выделить несколько символов при помощи jQuery

$.fn.selectRange = function(start, end) {
    return this.each(function() {
        if (this.setSelectionRange) {
            this.focus();
            this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};

Использование:

$('#elem').selectRange(3,5);

демо

 

Как использовать курсор в jQuery

//cursor functions

//как установить позицию курсора
$.fn.setCursorPosition = function(position){
    if(this.length == 0) return this;
    return $(this).setSelection(position, position);
};

//диапазон выделения
$.fn.setSelection = function(selectionStart, selectionEnd) {
    if(this.length == 0) return this;
    input = this[0];

    if (input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', selectionEnd);
        range.moveStart('character', selectionStart);
        range.select();
    } else if (input.setSelectionRange) {
        input.focus();
        input.setSelectionRange(selectionStart, selectionEnd);
    }

    return this;
};
//фокус начала ввода
$.fn.focusStart = function(){
    this.setCursorPosition(0);
};
//фокус конца ввода
$.fn.focusEnd = function(){
    this.setCursorPosition(this.val().length);
};

 

Как выделить элемент основываясь на дате при помощи jQuery

HTML код должен быть в виде:

<p finish="1339549200" start="1339543800">

/**
  * $.dateTimeHighlightNow()
  * Author: Sam Deering
  * Adds/removes a selected class on elements based on the current date and time.
  * usage: $('.program p').dateTimeHighlightNow();
  */
jQuery.fn.dateTimeHighlightNow = function()
{
    return this.each(function()
    {
        var datetimestamp = Math.round(new Date().getTime() / 1000)
            elem = $(this),
            start = elem.attr('start'),
            finish= elem.attr('finish');

            log('datetimestamp = '+datetimestamp);

        if (start < datetimestamp &amp;&amp; finish > datetimestamp)
        {
            elem.addClass('selected');
            log(elem);
        }
        else
        {
            elem.removeClass('selected');
        }

    });
};

использование:

$('.program p').dateTimeHighlight();

 

Как преобразовать вводимый текст в обычный текст при помощи jQuery

$form = $('#register-form1');
$form.find(':input').each( function(i,v)
{
    var iElem = $(v),
        name = iElem.attr('name'),
        type = iElem.attr('type'),
        labelElem = iElem.parents().find('label[for="'+name+'"]'),
        labelTxt = labelElem.html(),
        iVal = iElem.val();

    if(type == 'input')
    {
    iElem.parent().prepend('<p>'+labelTxt+' <span class="'+name+'">'+iVal+'</span></p>');

    }
else if (type == 'password')
{
    iVal = iVal.substr(i).replace(/[\S]/g, "*");
    iElem.parent().prepend('<p>'+labelTxt+' '+iVal+'</p>');
}
    //remove old input elements
    iElem.remove();
    labelElem.remove();
});

 

Как получить массив индексов отмеченных чекбоксов при помощи jQuery

var checkedIds = Array();
$('form:input[type="checkbox"][checked]').each( function(i,v)
{
    checkedIds.push($(v).attr('id'));
});
console.log(checkedIds);

 

Как заменить все символы звездочками при помощи jQuery

//iVal is your string of characters (with asterisks).
iVal = iVal.substr(i).replace(/[\S]/g, "*");

 

Как проверить наличие горизонтальной полосы прокрутки при помощи jQuery

  //util function to check if an element has a scrollbar present
  jQuery.fn.hasScrollBar = function(direction)
  {
    if (direction == 'vertical')
    {
      return this.get(0).scrollHeight > this.innerHeight();
    }
    else if (direction == 'horizontal')
    {
      return this.get(0).scrollWidth > this.innerWidth();
    }
    return false;

  }
  //$('#c3 .mbcontainercontent').hasScrollBar('horizontal');

версия 2

  //util function to check if an element has a horizontal scrollbar present
  jQuery.fn.hasHScrollBar = function()
  {
    // log(this.get(0).scrollWidth);
    // log(this.width());
    // log(this.innerWidth());
      return this.get(0).scrollWidth > this.innerWidth();
  }
  $('#c3 .mbcontainercontent').hasScrollBar();

  //util function to check if an element has a vertical scrollbar present
  jQuery.fn.hasVScrollBar = function()
  {
    // log(this.get(0).scrollHeight);
    // log(this.height());
    // log(this.innerHeight());
      return this.get(0).scrollHeight > this.innerHeight();
  }
  $('#c3 .mbcontainercontent').hasScrollBar();

версия 3

function hasScroll(el, direction) {
    direction = (direction === 'vertical') ? 'scrollTop' : 'scrollLeft';
    var result = !! el[direction];

    if (!result) {
        el[direction] = 1;
        result = !!el[direction];
        el[direction] = 0;
    }
    return result;
}

alert('vertical? ' + hasScroll(document.body, 'vertical'));
alert('horizontal? ' + hasScroll(document.body, 'horizontal'));

 

Как разместить элемент на самый верхний уровень стека Z-Index при помощи jQuery

  jQuery.fn.mb_bringToFront= function(zIndexContext){
    var zi=1;
    var els= zIndexContext &amp;&amp; zIndexContext!="auto" ? $(zIndexContext): $("*");
    els.not(".alwaysOnTop").each(function() {
      if($(this).css("position")!="static"){
        var cur = parseInt($(this).css('zIndex'));
        zi = cur > zi ? parseInt($(this).css('zIndex')) : zi;
      }
    });
    $(this).not(".alwaysOnTop").css('zIndex',zi+=1);
    return zi;
  };

 

Как позиционировать элемент в поле зрения на странице при скроллинге

//keep element in view
(function($)
{
    $(document).ready( function()
    {
        var elementPosTop = $('#jq4u-sidebar-ads').position().top;
        $(window).scroll(function()
        {
            var wintop = $(window).scrollTop(), docheight = 
			$(document).height(), winheight = $(window).height();
            
            //if top of element is in view
            if (wintop > elementPosTop)
            {
                //always in view
                $('#jq4u-sidebar-ads').css({ "position":"fixed", "top":"10px" });
            }
            else
            {
                //reset back to normal viewing
                $('#jq4u-sidebar-ads').css({ "position":"inherit" });
            }
        });
    });
})(jQuery);

версия в плагине:

/**
 *  jQuery keep element in view plugin.
 *
 *  @author      Sam Deering
 *  @copyright   Copyright (c) 2012 jQuery4u
 *  @license     http://jquery4u.com/license/
 *  @link        http://jquery4u.com
 *  @since       Version 1.0
 *  @notes       Plugin only works on scroll down elements.
 *
 */

(function($)
{
    $.fn.keepElementInView = function()
    {
        var elemPosTop = this.position().top;
        $(window).scroll(function()
        {
            var wintop = $(window).scrollTop(), docheight = 
			$(document).height(), winheight = $(window).height();
            
            if (wintop > elemPosTop)
            {
                this.css({ "position":"fixed", "top":"10px" });
            }
            else
            {
                this.css({ "position":"inherit" });
            }
        });
        return this;
    };

    $(document).ready( function()
    {
        jQuery('#jq4u-sidebar-ads').keepElementInView();
    });
})(jQuery);

 

Как отследить изменение высоты и ширины

//capture window resize
$(window).bind('resize', function(e)
{
    var win = $(this),
        w = win.width(),
        h = win.height();

    console.log('window resized to: ' + w + ' by ' + h);
});

//output: window resized to: 1598 by 521

 

Как узнать координаты элемента при помощи jQuery

// способ 1
var pos = $('#wrapper').position();

//способ 2
var offset = $('#wrapper').offset();

//способ 3
var elem = $("#wrapper");
var x = $("#wrapper").offset().left;
var y = $("#wrapper").offset().top;

плагин:

jQuery.fn.getCoord = function()
{
  var elem = $(this);
  var x = elem.offset().left;
  var y = elem.offset().top;
  console.log('x: ' + x + ' y: ' + y);
  //output: x: 70 y: 40

  return {
      "x" : x,
      "y" : y
  };

  //note that it is not efficient as it breaks the jQuery chain
  //return elem;
};

$('#wrapper').getCoord();
//output: Object { x=70, y=40 }

 

Как проверить существование функции

if(typeof $form.validate == 'function')
{
    console.log('function is here!');
}
else
{
    console.log('function is absent... naughty!');
}
if(typeof window.md5 == 'function') {
    // function exists, so we can now call it
    md5(286);
}
if( jQuery.isFunction(jQuery.fn.rtFunction) ){
  // function exists, so we can now call it
  jQuery(document).rtFunction();
}

 

Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
Оставить комментарий

Статья → Полезные сниппеты jQuery

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.