пятница, 15 июля 2011 г.

jQuery. Проверить существование элемента на странице

Для того, чтобы проверить существует или нет заданный элемент, можно использовать 2 способа. В основе всего, лежит тот факт, что jQuery селекторы возвращают массив и мы можем искать его длину. Даже если найден только 1 элемент (когда мы конкретный элемент ищем) то размер ответа будет равен 1.

Способ первый - стандартный:
if($("#findID").length>0) {
  // exists
}
//еще проще:
if($("#findID").length) {
  // exists
}
// Еще вариант:
if($('#findID')[0]) {
 // exists
}

Способ второй - удобный (создадим пользовательскую функцию exists() ):
// Один раз объявляем функцию, потом используем так, как в примере
jQuery.fn.exists = function() {
   return $(this).length;
}
// Пример использования:
if($("#findID").exists()) {
   // exists
}

Можно и так:
jQuery.exists = function(selector) {
   return ($(selector).length > 0);
}

// Пример использования:
if ($.exists(selector)) {
  // exists
}

вторник, 12 июля 2011 г.

jQuery, CSS. Как отключить выделение мышкой текста для отдельного блока

Иногда нужно запретить выделение текста в некоторых блоках - например при динамическом изменении размера, текст блока будет выделяться, что не есть красиво.

Решений тут два: используем jQuery либо CSS.

jQuery:
$(".classname").attr('unselectable','on').css('MozUserSelect','none');

CSS:
.classname{
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
Учитывая пожелания высказанные в комментариях, привожу пример яваскриптового отключения выделения (организованного в плагин), с явным отключением самого ивента 'onselectstart', а также содержащий весь уже выше перечисленный функционал:
jQuery.fn.extend({ 
    disableSelection : function() { 
            this.each(function() { 
                    this.onselectstart = function() { return false; }; 
                    this.unselectable = "on"; 
                    jQuery(this).css({
                      '-moz-user-select': 'none',
                      '-khtml-user-select': 'none',
                      '-webkit-user-select': 'none',
                      '-o-user-select': 'none',
                      'user-select': 'none'
                    });

            }); 
    },
    enableSelection : function() { 
            this.each(function() { 
                    this.onselectstart = function() {}; 
                    this.unselectable = "off";
                    jQuery(this).css({
                      '-moz-user-select': 'auto',
                      '-khtml-user-select': 'auto',
                      '-webkit-user-select': 'auto',
                      '-o-user-select': 'auto',
                      'user-select': 'auto'
                    });
            }); 
    } 
});

// Example:
var selector = "td, span, div";
$(selector).disableSelection(); // disable
....
$(selector).enableSelection(); // enable