Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Создание плагина для jQuery 1.9.1 (https://javascript.ru/forum/jquery/36196-sozdanie-plagina-dlya-jquery-1-9-1-a.html)

(Sandr) 07.03.2013 01:13

Создание плагина для jQuery 1.9.1
 
Привет, JavaScript'еры :)

У меня возникла проблема с созданием плагина для jQuery 1.9.1.
Подключаю jQuery, ниже пишу:

(function( $ ) { 

    $.fn.userSelect = function(value) {
      alert(this.innerHTML);  // undefined
      this.style.webkitUserSelect = value;
      this.style.mozUserSelect = value;
      this.style.oUserSelect = value;
      this.style.msUserSelect = value;
      this.style.userSelect = value;
    };
  })(jQuery);


В консоли хрома пишет: "Uncaught TypeError: Cannot set property 'webkitUserSelect' of undefined ".

Вызываю метод так:

$(document).ready(function() {
$('#my_select').userSelect();
});

Элемент с id my_select существует.

Подскажите, почему в this не заносится объект элемента?

Deff 07.03.2013 01:28

(Sandr),
стилевый свойства вроде jQuery сам перетранслирует для текущего бразера
Или у Вас специфические ?
К примеру тоже opaсity=0.7

(Sandr) 07.03.2013 01:50

Deff,
проблема не в задании свойств элементу, а в том, что this ни на что не ссылается.
alert(this.innerHTML) выдаёт undefined. Хотя, как я уже написал выше, элемент #my_select существует.

Даже если пробовать использовать не специфические свойства:
this.style.color = 'white';

То выдаёт, в общем-то, тоже самое: "Uncaught TypeError: Cannot set property 'color' of undefined".

imsha 07.03.2013 04:22

$('element') - может быть выбран не один элемент, поэтому нужно использовать к примеру each

(function( $ ) { 
	$.fn.userSelect = function(value) {
		this.each(function(){
		  alert(this.innerHTML);  // undefined
		  this.style.webkitUserSelect = value;
		  this.style.mozUserSelect = value;
		  this.style.oUserSelect = value;
		  this.style.msUserSelect = value;
		  this.style.userSelect = value;
		});
	};
})(jQuery);


вот рабочий пример http://jsfiddle.net/eZDAY/

danik.js 07.03.2013 04:48

1) Это лучше не плагином оформить, а хуком на установку стилей (если jQuery позволяет это делать, думаю да)
2) Нужно выставлять нужное свойство для текущего браузера, а не все подряд. Подойдет проверка this.style[prop] !== undefined
3) oUserSelect - такого свойства нет, и врядли будет, с учетом будущего перехода Оперы на вебкит. http://caniuse.com/#feat=user-select-none

(Sandr) 07.03.2013 16:37

imsha,
спасибо, работает)

(Sandr) 07.03.2013 16:45

danik.js,

1) Что такое "хук"?
2) Ок.
3) Хмм.. Как же тогда в опере запретить выделения текста?



Я хочу сделать своеобразную библиотеку, основанную на jQuery. Не подскажите, как лучше всего это оформить?
В виде отдельных плагинов? Или как-то всё это в один собрать?

danik.js 07.03.2013 17:56

<script src="//code.jquery.com/jquery-latest.js"></script>
<script>
var userSelectProp = (function(name, style){
    var cssPrefixes = [ "webkit", "o", "moz", "ms" ];
	if ( name in style ) {
		return name;
	}

	var capName = name.charAt(0).toUpperCase() + name.slice(1),
		origName = name,
		i = cssPrefixes.length;

	while ( i-- ) {
		name = cssPrefixes[ i ] + capName;
		if ( name in style ) {
			return name;
		}
	}

	return origName;
})('userSelect', document.createElement('div').style);


jQuery.cssHooks.userSelect = {
    get: function( elem, computed ) {
	    // не умею
	},

	set: function( elem, value ) {
        elem.style[userSelectProp] = value;
    }
};
</script>
<div>Тестовый текст. Пробуй выделить</div>
<button onclick="$('div').css('user-select', 'none')">Сделать невыделяемым</button>


Опера не поддерживает это свойство. Вариант с event.preventDefault по onmousedown не подходит?

(Sandr) 08.03.2013 19:18

danik.js,
спасибо за пример. Насчёт event.preventDefault как-то не подумал, попробую.


Часовой пояс GMT +3, время: 02:04.