Полезные сниппеты 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 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

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

18 − десять =