Создание плагина для 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 не заносится объект элемента? |
(Sandr),
стилевый свойства вроде jQuery сам перетранслирует для текущего бразера Или у Вас специфические ? К примеру тоже opaсity=0.7 |
Deff,
проблема не в задании свойств элементу, а в том, что this ни на что не ссылается. alert(this.innerHTML) выдаёт undefined. Хотя, как я уже написал выше, элемент #my_select существует. Даже если пробовать использовать не специфические свойства: this.style.color = 'white'; То выдаёт, в общем-то, тоже самое: "Uncaught TypeError: Cannot set property 'color' of undefined". |
$('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/ |
1) Это лучше не плагином оформить, а хуком на установку стилей (если jQuery позволяет это делать, думаю да)
2) Нужно выставлять нужное свойство для текущего браузера, а не все подряд. Подойдет проверка this.style[prop] !== undefined 3) oUserSelect - такого свойства нет, и врядли будет, с учетом будущего перехода Оперы на вебкит. http://caniuse.com/#feat=user-select-none |
imsha,
спасибо, работает) |
danik.js,
1) Что такое "хук"? 2) Ок. 3) Хмм.. Как же тогда в опере запретить выделения текста? Я хочу сделать своеобразную библиотеку, основанную на jQuery. Не подскажите, как лучше всего это оформить? В виде отдельных плагинов? Или как-то всё это в один собрать? |
<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 не подходит? |
danik.js,
спасибо за пример. Насчёт event.preventDefault как-то не подумал, попробую. |
Часовой пояс GMT +3, время: 02:04. |