Как изменить указатель мыши при зажатой кнопке(выделении)?
сабж, делаю слайдер, копаюсь в jQuery UI Slider, но пока безрезультатно
|
это можно сделать через
jQuery(element).css("cursor", <cursor> );
пример ниже. но без jquery
<body>нажми кнопку и держи</body>
<script>
document.body.onmousedown = document.body.onmouseup = function(e){
*!*this.style.cursor*/!* = (e||event).type === "mousedown" ? *!*"help":"default";*/!*
}
</script>
|
это не работает
|
Это сработает, только если вы для элемента запретите выделение.
Для этого в каждом браузере будет свой подход, согласно CSS3 можно использовать user-select: none (element.style.userSelect = "none"), но это будет работать только в браузерах, поддерживающих CCS3. В IE и старых Opera браузерах можно использовать аттрибут (не стиль) элемента unselectable="on". В браузерах mozilla можно использовать css-свойство -moz-user-select: none (mozUserSelect через JS) и -webkit-user-select: none (webkitUserSelect через JS). Таким образом полное выключение выделения внутри элемента будет выглядеть так:
.unselectable { -moz-user-select: none; -webkit-user-select: none; user-select: none; }
<div unselectable="on" class="unselectable">This content cannot be selected by mouse or keyboard.</div> Однако следует обратить внимание, что реализация unselectable отличается от CCS3 user-select: none; тем, что выбрать unselectable элемент все равно можно, если "начать" выделение вне самого элемента. В случае CSS3 свойства выделить элемент нельзя будет и таким способом. Но если вы уберете возможность выделения, то сможете подавить встроенный функционал браузера, согласно которому курсор меняется на "text" и поставить свой. |
Соответственно полным решением вашей задачи, если вам нужен будет один из стандартных курсоров, а не полностью кастомный, будет объявления стиля для псевдо-класса active, или написание соответствующего скрипта, который по событию mousedown сменит курсор. Для моего примера можно использовать такой стиль (в IE будет работать только если элемент с классом unselectable будет тегом "a"):
.unselectable { cursor: default; } .unselectable:active { _cursor: hand; cursor: pointer; }
|
Андрей Параничев,
спасибо, буду пока копать дальше, в jq ui slider сделано иначе, изучаю |
abc_ua,
Хм, насколько я знаю, в jQuery UI slider вообще нет изменения курсора при нажатии мышкой на каретку. Выделение в нем не срабатывает, потому что при mousedown делается preventDefault(). И вообще, я бы не советовал брать jQuery UI, как эталон. Эта библиотека прошита нитками виджетов, плагинов и внутренних методов самого jQuery, её нелегко изучать, кроме того, реализация некоторых плагинов из набора jQuery UI далека от идеала настолько, что мне пришлось в одном из проектов полностью отказаться от их использования. |
$('body').mousedown(function(){$(this).css({cursor:'move'});});
$('body').mouseup(function(){$(this).css({cursor:'default'});});
http://htmlbook.ru/css/cursor |
Андрей Параничев,
вот поэтому я и пишу с нуля. напишу ровно то, что мне нужно и изучу тему |
Вложений: 1
Возможно кому-то понадобится, результат в архиве, критика и идеи для улучшения приветствуются
|
| Часовой пояс GMT +3, время: 15:12. |