289

Пятничные сниппеты. jQuery, часть вторая

4 июля 2008, 18:24JavaScriptрейтинг +14-

Пятничные сниппеты jQueryСегодняшние сниппеты опять про jQuery. Так же не проходите мимо прошлого набора.








jQuery, полезные функции, сниппеты, javascript
Здесь могла бы быть Ваша реклама
показать рекламу :)убрать рекламу

Расположение объекта по центру экрана

jQuery.fn.center = function() 
{
var w = $(window);
this.css("position","absolute");
this.css("top",(w.height()-this.height())/2+w.scrollTop() + "px");
this.css("left",(w.width()-this.width())/2+w.scrollLeft() + "px");
return this;
}

Замена текста внутри элемента, используя регулярные выражения

Полезно, например при замене «скрыть» - «показать»

jQuery.fn.toggleText = function(a,b) 
{
return this.html(this.html().replace(new RegExp("("+a+"|"+b+")"),
function(x){return(x==a)?b:a;}));
}

Запуск события resize после задержки

Задержка нужна по той причине, что событие resize() постоянно, пока юзер изменяет размер окна. А с использование этой функции, ресайз будет запускаться только через некоторое количество мс после того, как юзер прекратит изменять размер экрана.

jQuery.fn.resizeComplete = function(fn, ms) 
{
var timer = null;
this.resize(function()
{
if (timer)
{
clearTimeout(timer);
}
timer = setTimeout(fn,ms);
});
}

Создание селекторая :contains, чувствительного к регистру

jQuery.extend(jQuery.expr[':'], {
containsIgnoreCase: "(a.textContent||a.innerText||jQuery(a).text()||'').toLowerCase().indexOf((m[3]||'').toLowerCase())>=0"
});

Имитация таймаута

$('a').click(function()
{
$(this).animate({width:$(this).width()},5000,
function()
{
// Эта функция запустится только через 5 секунд
alert('Ссылка была нажата 5 секунд назад');
})
});

В комментариях можете задавать любые вопросы, касающиеся jQuery. А мы будем на них отвечать.

Memori.rumister-wong.combobrdobr.rumoemesto.rudel.icio.uszakladki.yandex.rugoogle.com/bookmarks/

Комментарии

Да, пятничные сниппеты - это вам не субботние сиськи.©
Zena - королева воинов, 5 июля 2008, 18:59
как на jQuery сымитировать таймаут? То есть как сделать, чтобы функция запустилась через некоторе количество секунд после нажатия на сцылку?
iRobo, 5 июля 2008, 19:20
Можно использовать функцию animate, при этом ничего не выполняя (я добавил в обзор функцию, которая ничего не делает с шириной и через пять секунд показывает алерт). Хотя это, безусловно, неразумное решение. В js для этого есть SetTimeout.
Жека, 5 июля 2008, 19:41
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Some title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    /*<![CDATA[*/
    (function ($) {
      $(function () {
        $('#elm').bind('click', function (e) {
          e.preventDefault();
          var $this = $(this);
          var timoutHandler = function () { 
            window.alert('timeout handler, clicked elm id="' + $this.attr('id') + '"'); 
          };
          window.setTimeout(timoutHandler, 1500);
        });
      });
    })(jQuery);
    /*]]>*/
    </script>
  </head>
  <body>
    <a href="javascript:void(0)" id="elm">Click me</a>
  </body>
</html>
Q-Zma, 18 июля 2008, 23:30
Вопрос к педантичному отморозку: И чё?
Жека, 19 июля 2008, 1:39
scrollTop() и scrollLeft() должны быть без скобочек - это не функции. К сожалению не сработал первый сниппет, но для себя я в свое время нашел такое решение (см. Some CSS):
jQuery.fn.center = function() {
	this.css("top",		document.documentElement.scrollTop + "px");
	this.css("left",	document.documentElement.scrollLeft   "px");
	this.css("width",	document.documentElement.clientWidth   "px");
	this.css("height",	document.documentElement.clientHeight   "px");
	return this;
}
Ну и дополнительно к этому коду я добавил обработчик изменения размера окна, немного упрощенный вариант:
$(window).bind('resize', function() {
	$('#modal').center();
});
Shimon, 23 июля 2008, 8:29
Забыл добавить, что если после center() к элементу применяются другие функции, изменяющие его вид/состояние (как например fadeIn()) то значения размеров и положения могут (а может и всегда так) вернуться к прописанным ранее в CSS, т.е. при определенных условиях стили переданные через jQuery не применяются :( Короче если делаешь center() то не стоит указывать соответствующие свойства в CSS. Надеюсь я донес свою мысль вполне ясно.
Shimon, 23 июля 2008, 8:35