Форум

abc_ua · #1 (**permalink**) 28.08.2011, 17:44

сабж, делаю слайдер, копаюсь в jQuery UI Slider, но пока безрезультатно

melky · #2 (**permalink**) 28.08.2011, 21:42

это можно сделать через

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>

abc_ua · #3 (**permalink**) 28.08.2011, 21:50

это не работает

Андрей Параничев · #4 (**permalink**) 28.08.2011, 22:34

Это сработает, только если вы для элемента запретите выделение.

Для этого в каждом браузере будет свой подход, согласно 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" и поставить свой.

Андрей Параничев · #5 (**permalink**) 28.08.2011, 22:39

Соответственно полным решением вашей задачи, если вам нужен будет один из стандартных курсоров, а не полностью кастомный, будет объявления стиля для псевдо-класса active, или написание соответствующего скрипта, который по событию mousedown сменит курсор. Для моего примера можно использовать такой стиль (в IE будет работать только если элемент с классом unselectable будет тегом "a"):

.unselectable { cursor: default; } .unselectable:active { _cursor: hand; cursor: pointer; }

abc_ua · #6 (**permalink**) 28.08.2011, 23:56

Андрей Параничев,
спасибо, буду пока копать дальше, в jq ui slider сделано иначе, изучаю

Андрей Параничев · #7 (**permalink**) 29.08.2011, 00:23

abc_ua,
Хм, насколько я знаю, в jQuery UI slider вообще нет изменения курсора при нажатии мышкой на каретку.
Выделение в нем не срабатывает, потому что при mousedown делается preventDefault().

И вообще, я бы не советовал брать jQuery UI, как эталон. Эта библиотека прошита нитками виджетов, плагинов и внутренних методов самого jQuery, её нелегко изучать, кроме того, реализация некоторых плагинов из набора jQuery UI далека от идеала настолько, что мне пришлось в одном из проектов полностью отказаться от их использования.

BorisBritva · #8 (**permalink**) 29.08.2011, 05:48

$('body').mousedown(function(){$(this).css({cursor:'move'});});
$('body').mouseup(function(){$(this).css({cursor:'default'});});

http://htmlbook.ru/css/cursor

abc_ua · #9 (**permalink**) 30.08.2011, 17:35

Андрей Параничев,
вот поэтому я и пишу с нуля. напишу ровно то, что мне нужно и изучу тему

abc_ua · #10 (**permalink**) 31.08.2011, 21:27

Возможно кому-то понадобится, результат в архиве, критика и идеи для улучшения приветствуются

Форум

Справочник

Discord чат

Курсы javascript