<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>NilColor &#187; jquery</title>
	<atom:link href="http://nilcolor.com/category/tech/jquery/feed/" rel="self" type="application/rss+xml" />
	<link>http://nilcolor.com</link>
	<description>Guess what? You&#039;re on my site!</description>
	<lastBuildDate>Thu, 06 Oct 2011 05:31:53 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>`!` в имени события</title>
		<link>http://nilcolor.com/2011/02/22/exclamation-mark-in-event-name/</link>
		<comments>http://nilcolor.com/2011/02/22/exclamation-mark-in-event-name/#comments</comments>
		<pubDate>Tue, 22 Feb 2011 14:13:45 +0000</pubDate>
		<dc:creator>NilColor</dc:creator>
				<category><![CDATA[jquery]]></category>
		<category><![CDATA[data-link]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://nilcolor.com/?p=676</guid>
		<description><![CDATA[Следующий код довольно часто можно видеть, если используется библиотека jQuery: $('#foo') .bind('click', function(){ console.log('click event') }) .bind('click.my', function(){ console.log('click.my event') }); //namespaced event //потом это обработчики могут вызываться... console.log('step 1'); $('#foo').trigger('click'); console.log('step 2'); $('#foo').trigger('click.my'); Результатом этих вызовов будет вывод в консоль следующего: step 1 click event click.my event step 2 click.my event Это хорошо известно, [...]]]></description>
			<content:encoded><![CDATA[<p>Следующий код довольно часто можно видеть, если используется библиотека <a href="http://jquery.com">jQuery</a>:</p>

<pre><code>$('#foo')
  .bind('click', function(){ console.log('click event') })
  .bind('click.my', function(){ console.log('click.my event') }); //namespaced event
//потом это обработчики могут вызываться...
console.log('step 1');
$('#foo').trigger('click');
console.log('step 2');
$('#foo').trigger('click.my');
</code></pre>

<p>Результатом этих вызовов будет вывод в консоль следующего:</p>

<pre><code>step 1
click event
click.my event
step 2
click.my event
</code></pre>

<p>Это хорошо известно, про это написано в доках по jQuery и это понятно. А вот про что там не написано, это про то, что можно написать так:</p>

<pre><code>console.log('step 3');
$('#foo').trigger('click!');
</code></pre>

<p>(обратите внимание на восклицательный знак в имени ивента). И вот тогда в консоле мы увидем такое:</p>

<pre><code>step 2
click event
</code></pre>

<p>И все. Т.е. вывода <code>click.my event</code> мы не увидим. Если посмотерть в исходники jQuery, то там это выглядит так:</p>

<pre><code>...
if ( type.indexOf("!") &gt;= 0 ) {
    event.type = type = type.slice(0, -1);
    event.exclusive = true;
}
...
</code></pre>

<p>т.е. это некий вариант <code>exclusive</code> событий. И этим, в частности, пользуется плагин <a href="https://github.com/jquery/jquery-datalink">DataLink</a>, изучение исходников которого (на предмет &#8220;переделать для себя&#8221;) и всплыло это странное exclusive.</p>
]]></content:encoded>
			<wfw:commentRss>http://nilcolor.com/2011/02/22/exclamation-mark-in-event-name/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Расширение jQuery</title>
		<link>http://nilcolor.com/2008/01/11/extend-jquery/</link>
		<comments>http://nilcolor.com/2008/01/11/extend-jquery/#comments</comments>
		<pubDate>Fri, 11 Jan 2008 09:16:17 +0000</pubDate>
		<dc:creator>NilColor</dc:creator>
				<category><![CDATA[jquery]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://nilcolor.com/2008/01/11/extend-jquery/</guid>
		<description><![CDATA[jQuery &#8211; небольшая и крайне удобная JavaScript библиотека позволяющая сильно расширить возможности вэб-приложения не рисую при этом жутковатых конструкций если надо сделать AJAX-запрос или потеребить DOM документа. Вот например вполне себе работающий кусок JavaScript с использованием jQuery: $alertHolder = $('&#60;div&#62;&#60;/div&#62;') .attr('id', 'tsm_alert') .addClass('tsm_alert') .append($('&#60;h1 id="alert_title"&#62;&#60;/h1&#62;')) .append($('&#60;img src="/media/tsm/img/close.gif" title="Закрыть" /&#62;').click(tsm_alert_close)) .append($('&#60;div id="alert_text"&#62;&#60;/div&#62;')) .insertBefore(document.body.firstChild) .hide(); Что тут [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://jquery.com">jQuery</a> &#8211; небольшая и крайне удобная JavaScript библиотека позволяющая сильно расширить возможности вэб-приложения не рисую при этом жутковатых конструкций если надо сделать AJAX-запрос или потеребить DOM документа. Вот например вполне себе работающий кусок JavaScript с использованием jQuery:</p>

<pre><code>$alertHolder = $('&lt;div&gt;&lt;/div&gt;')  
.attr('id', 'tsm_alert')  
.addClass('tsm_alert')  
.append($('&lt;h1 id="alert_title"&gt;&lt;/h1&gt;'))  
.append($('&lt;img src="/media/tsm/img/close.gif" title="Закрыть" /&gt;').click(tsm_alert_close))  
.append($('&lt;div id="alert_text"&gt;&lt;/div&gt;'))  
.insertBefore(document.body.firstChild)  
.hide();
</code></pre>

<p>Что тут делается? Это кусок из кода, который приделывает к вэб-приложению аналог alert&#8217;а, но не такой раздражающий ;)</p>

<p>Ну и как и положено такого рода библиотекам (да и JavaScript&#8217;у в целом) &#8211; ее можно расширять своими плагинами.</p>

<p><span id="more-137"></span></p>

<p>Больших творений у меня пока нет &#8212; пока только одно расширение (для удобства) проникло в мои скрипты:</p>

<pre><code>//Проверка элемента на его существование  
jQuery.fn.exists = function() {
    return this.length &gt; 0;
};
</code></pre>

<p>В итоге можно писать не <code>if $('#tsm_alert').length)...</code>, а более красиво <code>if $('#tsm_alert').exists()...</code>. Мелочь конечно &#8211; но визуально более приятно.</p>

<p>И вот буквально сегодня попалась мне очень интересное (и понятное) описание того, как можно писать <a href="http://www.learningjquery.com/2007/10/a-plugin-development-pattern/trackback">свои плагины для jQuery</a>. Теперь думаю я таки смогу добавить в jQuery свой idleTracker как плагин ;) Ибо текущая его реализация не очень красива:</p>

<pre><code>$(document).ready(function() {
    // ----------------------------------------------------- //
    // Отслеживание активности в окне браузера. После 10 сек.
    // неактивности
    // генерится событие state:idle. При активности
    // пользователя -- генерится state:active
    // Активность пользователя - прокрутка окна браузера,
    // изменение размеров окна, движения мышью или нажатие
    // клавиш на клавиатуре
    // 
    var _events = [[window, 'scroll'],
                   [window, 'resize'],
                   [document, 'mousemove'],
                   [document, 'keydown']];
    var _timer;
    jQuery.each(_events, function(i, e) {
        $(e[0]).bind(e[1], function () {onActive();});
    });
    // 
    // обработчик состояния state:active в окне браузера и
    // перезапуск 10-и сек. ожидания не активности пользователя
    // 
    function onActive(){
        $(document).trigger('state:active');
        clearTimeout(_timer);
        _timer = setTimeout(
            function () {$(document).trigger('state:idle');},
            10000
        );
    }
    // 
    // обработчик состояния state:idle в окне браузера
    // 
    $(document).bind(
        'state:idle',
        // можно сделать что-то более полезное, чем
        // банально писать в console
        function () {console.log('system idled');}
    );
});
</code></pre>

<p><strong>update</strong>: что-то по началу у меня были проблемы с markdown&#8230; блоки кода выглядели &#8211; ужас. сейчас вроде ОК. Если что &#8211; пишите в коменты.</p>
]]></content:encoded>
			<wfw:commentRss>http://nilcolor.com/2008/01/11/extend-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

