четверг, 4 марта 2010 г.

jQuery tips. Часть 2. Советы и уловки

Серия статей про jQuery немного затянулась :), как всегда какие то другие идеи вытесняют намеченные планы. Попробую осилить 2 статьи из данной серии за неделю, тем более, что и накопилось материала, и появилось немного свободного времени. В этом небольшом посте хотел рассказать про советы и уловки, которые периодически делают жизнь легче :).

Альтернативный путь Document Ready


Одной из первых функций с которой я познакомился изучая jQuery, была "$(document).ready". Есть и альтернативный вариант вызова данной функции.
$(document).ready(function() {
 //document ready
});

//Альтернативный путь, и заметьте, так короче! :)
$(function(){
 //document ready
});

Используем jQuery для разбора xml(parse xml)


Используя jQuery, вы можете с легкостью обрабатывать и манипулировать xml данными. Следующий пример демонстрирует как можно преобразовать xml данные в jQuery объект.
var jquery_xml_parse = $("<xml><title>jQuery parse xml</title><data>Xml data</data></xml>");
var data_node = $("data", jquery_xml_parse);
var result = data_node.text(); // результат "Xml data"

Экранирование символов используя jQuery


jQuery настолько крут, что легко справляется с экранированием символов. Рассмотрим следующий пример.
var htmlString = "<scr"+"ipt>alert('hi!');</scr"+"ipt>";
$("#jquery_escape_html").text(htmlString);

В результате отработки данного скрипта получим HTML
<div id="jquery_escape_html">&lt;script&gt;alert(&#39;hi!&#39;);&lt;/script&gt;</div>

А на экране будет отображен текст: "<script>alert('hi!');</script>"

Отложенная загрузка контента


Очень прикольно смотрятся сайты в которых некоторые секции загружаются динамически. jQuery позволяет делаеть такие вещи крайне просто.
$('#jquery_page_load').load('content/load_form.html', function() {
    // Код, который будет выполнен после загрузки контента
});

Открываем ссылки в новом окне


Для того чтобы ссылки открывались в popup окне добавьте на свою страницу следующий код.
jQuery('a.popup_window').live('click', function(){
    newwindow=window.open($(this).attr('href'),'','height=200,width=150');
    if (window.focus) { newwindow.focus(); }
    return false;
});

Теперь, при клике на ссылку у которой будет установлен класс "popup", страница будет открыта в popup окне.

Если вам необходимо чтобы ссылки открывались в новом табе, то воспользуйтесь следующим кодом.
jQuery('a.tab').live('click', function(){
    jQuery(this).attr("target","_blank");
    return true;
});

События


Пространство имен при работе с событиями
С версии 1.2 в событиях появилась возможность задавать пространство имен. Для добавление имени в операторе bind после имени события через точку можно указать пространство имен. Данный механизм будет удобен при работе в модулях, в случае когда необходимо удалить все обработчики событий текущего модуля. Рассмотрим это на примере
$("a").bind("click.event_tracking", function(){
  //ваш код
});

$("a").bind("click.animation", function(){
  //ваш код
});

$("a").unbind(".event_tracking");


При необходимости пользуйтесь своими типами событий
Используя jQuery можно создавать свои типы событий, которые будет привязаны к определенным DOM элементам. При использовании таких событий, код получается более чистым, и можно убрать жесткие связи между модулями.
//Добавления обработчика события "custom_event"
$("p").bind("custom_event", function(e, count) {
});

//Вызов события
$("p").trigger("custom_event", [ 5 ]);

Определяем позицию курсора


Если вам необходимо отслеживать позицию курсора, то можно воспользоваться следующим примером.
$().mousemove(function(e){  
    //Записываем координату x и y в элемент с идентификатором "cursor_position"
    $('#cursor_position').html("X: " + e.pageX + "; Y:" + e.pageY + ".");
});

Как получить координаты DOM элемента?


С помощью jQuery получить координаты DOM элемента очень просто. Используйте следующий код:
var сe = $("#сoordinate_element");
var left_offset_position = сe.offset().left; //это координата left
var top_offset_position = сe.offset().top; //это координата top
var right_offset_position = сe.offset().left+сe.width(); //это координата right
var bottom_offset_position = сe.offset().top + сe.height(); //это координата bottom

Как определить какую кнопку нажали?


Если вам необходимо отслеживать какую кнопку нажали, то воспользуйтесь следующим примером.
$(function() {
    $(document).keypress(function(e){
        //e.which содержит код нажатой кнопки
        switch(e.which){
            // "ENTER"
            case 13:
                alert('enter pressed');
            break;

            // "s"
            case 115:
                alert('s pressed');
            break;
        }
    });

});

Возврат к началу страницы


В случаях, когда материал на страницах больше чем несколько экранов, стоит задуматься о возможности перехода к началу страницы. Используя jQuery и плагин jQuery.ScrollTo реализация такого возврата занимает минимум времени.
HTML
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
......  
<a id="top" style="cursor:hand;cursor:pointer">Вверх!</a>

Javascript
$('#go_top').click(function() {  
    $(document).scrollTo(0,500);  
}

Используйте клонирование для создания элементов


Для создания DOM элементов максимально используйте метод jQuery ".clone".
// клонируем элемент с идентификатором "cloneHtmlElement"
var cloned = $('#cloneHtmlElement').clone();

К сожалению, данный метод не клонирует JavaScript объекты. Для этого можно воспользоваться следующим кодом:
// Simple clone
var clone_object = jQuery.extend({}, source_object);

// Deep clone
var clone_object1 = jQuery.extend(true, {}, source_object);


Simple clone - клонирование всех свойств объекта, исключая сложные свойства.
Deep clone - рекурсивное клонирования всех свойств объекта.

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


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

Возьму банальный пример, который демонстрирует всю мощь механизма. Определим является элемент видимым или нет.

if($(element).is(":visible")) {
       //элемент видимый УРА (Visible!)
}


Жизнь стала легче? :)

5 комментариев:

  1. var сe = $("#сoordinate_element");
    var offset= сe.offset();
    var left_offset_position = offset.left;
    var top_offset_position = offset.top;
    var right_offset_position = offset.left+сe.width();
    var bottom_offset_position = offset.top + сe.height();

    Так offset() у элемента будет вычисляться один раз, а не четыре.

    ОтветитьУдалить
  2. Спасибо, Степан. Согласен с тобой :)

    ОтветитьУдалить
  3. switch(e.which){
    // "ENTER"
    case 13:
    alert('enter pressed');
    break;
    ...
    Не кроссбраузерно!

    Так лучше
    switch(e.keyCode||e.which){
    // "ENTER"
    case 13:
    alert('enter pressed');
    break;
    ...

    ОтветитьУдалить
  4. В данном случае "switch(e.which){" кросбраузерно, т.к. JQuery нормализует значение which для всех браузеров (см. документацию http://api.jquery.com/keypress/)

    ОтветитьУдалить