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

4 июля 2008

3.6 из 5

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

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

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. А мы будем на них отвечать.

Комментарии — 21

Да, пятничные сниппеты - это вам не субботние сиськи.©

как на jQuery сымитировать таймаут? То есть как сделать, чтобы функция запустилась через некоторе количество секунд после нажатия на сцылку?

Можно использовать функцию animate, при этом ничего не выполняя (я добавил в обзор функцию, которая ничего не делает с шириной и через пять секунд показывает алерт). Хотя это, безусловно, неразумное решение. В js для этого есть SetTimeout.

<!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>

Вопрос к педантичному отморозку: И чё?

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();
});

Забыл добавить, что если после center() к элементу применяются другие функции, изменяющие его вид/состояние (как например fadeIn()) то значения размеров и положения могут (а может и всегда так) вернуться к прописанным ранее в CSS, т.е. при определенных условиях стили переданные через jQuery не применяются :( Короче если делаешь center() то не стоит указывать соответствующие свойства в CSS. Надеюсь я донес свою мысль вполне ясно.

хорошая подборка, а еще есть?) вот пример паузы:


function ___pause(ms) {
var date = new Date(); 
curDate = null;
do { var curDate = new Date(); }
while ( curDate - date < ms);
 };

А можно живой готовый пример ко второму сниппету? А то что-то не получается ничего, а очень нужно

Пожалуйста.
Пример использования второго сниппета .

Хорошие примеры ,
а есть примеры по замене текста внутри ссылки ?

seo: да нет ничего проще. Просто $('a:last').html('чем заменить текст в ссылке'); после выполнения текст последней ссылки будет заменен на указанный. а если указать $('#mylinkid').html('новый текст') то именно у ссылки с айди mylinkid будет заменен текст.

Здравствуйте!
Раз можно любые вопросы о jQuery...
Как можно сортировать строки в таблице? Типа: по дате, по имени и тд.
Спасибо.

Брюсли,
специально для этой цели есть хороший плагин TableSorter.
Надеюсь документация будет понятна, если нет - мы можем расширить этот вопрос на статью.

А вообще, для вопросов у нас спецовый раздел.

Спасибо за ответ!
TableSorter уже нашёл, и есть ещё frequency decoder.
Но хочется хоть маленько понимать, что происходит. Пока, для меня код jQuery - фарш...
Нашёл ешё такую инфу, думаю начать копать оттуда.
Статья это хорошо, если вам интересно, а то для моей скромной персоны - черезчур :).
Спасибо.

У меня такой вопрос - как можно из одной формы послать запрос сразу на два сервера ?

Ну как обычно.
по клику на баттон

params = $(this).parents("form").serialize();
$.ajax({url: 'index.php',
			type: 'POST',
			data: params
		});

$.ajax({url: 'log.php',
			type: 'POST',
			data: params
		});

и все. форма сабмитнулась на два урла. И даже страница не перезагрузилась. :)
А если с перезаугрзкой то

params = $(this).parents("form").serialize();
$.ajax({url: 'log.php',
			type: 'POST',
			data: params,
success: function(html){
document.forms.formname.submit();}
		});

тоесть аяксом сабмитишь форму на лог пхп а потом по саксесу аякса сабмитишь форму. У формы имя formname ну и экшн на index.php
ps одинарные кавычки забекслешились... ну это не я.

Так вот, проблема в том, что Opera и IE7 не хочет понимать метод attr. В инете вычитал что нужно делать таймаут примерно в 300 мс перед применением метода. подскажите как сделать!!!

function color(data){
$('#color123').attr('value', data);
}

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

Спасибо, Эд. Поправил.

Поясните пож-та как работать с регистронезависимым :contains
вставка кода как есть не привела к требуемому результату..

Новый комментарий

как выглядит	какой тег
жирный текст	<b>жирный текст</b>
курсивный тект	<i>курсивный тект</i>
~~зачеркнутый текст~~	<s>зачеркнутый текст</s>
подчеркнутый текст	<u>подчеркнутый текст</u>
ссылка	<a href="адрес">ссылка</a>
`function foo() { ... }`	<pre><code>function foo() { ... } </code></pre>

разрешенные теги или посмотреть как будет выглядеть

Имя

Эл. почта используется для Граватарки

Сайт

Имя в Твиттере

Сообщение

как выглядит	какой тег
жирный текст	<b>жирный текст</b>
курсивный тект	<i>курсивный тект</i>
~~зачеркнутый текст~~	<s>зачеркнутый текст</s>
подчеркнутый текст	<u>подчеркнутый текст</u>
ссылка	<a href="адрес">ссылка</a>
`function foo() { ... }`	<pre><code>function foo() { ... } </code></pre>

разрешенные теги или посмотреть как будет выглядеть

Спонсоры

Последние комментарии

Мы в соцсетях

Блогорол