Back to site
index
Source: http://adomas.org/javascript-mouse-wheel/

Кола мышы праграмаванне ў JavaScript

Вэб-дадаткі становяцца ўсё больш і больш як "нармальныя" настольныя прыкладанні. Вядома, яны ўсё больш і больш функцыянальнымі, але гладкі інтэрфейс актаў галоўную ролю. Такім чынам, мы перацягвання, autocompletition, і многае іншае. Многія з тых, карысныя ўласцівасці, атрымалі магчыма толькі з дапамогай AJAX.

Гэтая старонка, аднак, ідзе не пра AJAX (ці любым іншым модным словам). Гаворка ідзе аб даволі просты метад ўводу карыстальнікам - кола мышы. Я лічу, што зараз будзе цяжка знайсці мыш без колы. Пераважная большасць карыстальнікаў прывыклі да кола кіравання для пракруткі спісаў, маштабаванне і г.д. Замест некалькіх вэб-прыкладанняў, аднак, зрабіць разумны выкарыстанне колы мышы. Гэтая старонка, каб даць вам агульную інфармацыю аб апрацоўцы колы мышы-спароджаных падзеямі ў мове праграмавання JavaScript.

Анатаванай код

Ніжэй прыводзіцца анатаваны JavaScript код, які павінен растлумачыць магію ззаду колы мышы спароджанай падзеямі. Існуе таксама версія просты для капіявання і ўстаўкі. 

 
/** Гэта высокага ўзроўню функцыі. 
 * Яна павінна рэагаваць на Delta быць больш і менш за нуль. 
 */ 
function handle(delta) { 
        if (delta < 0)
		…;
        else 
		…;
} 
 
/** Апрацоўшчык падзей для падзеі мышы колы. 
 */ 
function wheel(event){ 
        var delta = 0;
        if (!event) /* Для IE. */ 
                event = window.event;
        if (event.wheelDelta) { /* IE/Opera. */ 
                delta = event.wheelDelta/120;
                /** У Opera 9, Delta адрозніваецца знакам па параўнанні з IE. 
                 */ 
                if (window.opera)
                        delta = -delta;
        } else if (event.detail) { /** Mozilla выпадку. */ 
                /** У Mozilla, знакі Delta з'яўляецца іншы, чым у IE. 
                 * Акрамя таго, Delta дзеліцца на 3. 
                 */ 
                delta = -event.detail/3;
        } 
        /** Калі Delta роўная нулю, справіцца з гэтым. 
         * У асноўным, Delta зараз станоўчым, калі кола пракручваецца ўверх, 
         * і адмоўным, калі кола пракручваецца ўніз. 
         */ 
        if (delta)
                handle(delta);
        /** Прадухіленне дзеянні па змаўчанні выкліканых колы мышы. 
         * Гэта можа быць непрыгожай, але мы працуем скруткі як-то 
         * Ва ўсякім разе, так што не турбуйцеся тут.. 
         */ 
        if (event.preventDefault)
                event.preventDefault();
	event.returnValue = false;
} 
 
/** Код ініцыялізацыі.  
 * Калі вы выкарыстоўваеце свой уласны код кіравання падзеямі, змяняць яго па меры неабходнасці. 
 */ 
if (window.addEventListener)
        /** DOMMouseScroll для Mozilla. */ 
        window.addEventListener('DOMMouseScroll', wheel, false);
/** IE/Opera. */ 
window.onmousewheel = document.onmousewheel = wheel;

Функцыі апрацоўшчыка

Deltas pictured. Negative means down, positive up.

У кодзе, прыведзеным вышэй, ёсць " handle "функцыю, якая, вядома, прызначаны для напісаны вамі. Як вы заўважылі, яна займае ад параметра, Delta. Яна завецца так, таму што колы мышы не мае абсалютнай сістэмы, і нам застаецца толькі захапіць пракруткі дэльт, то ёсць кут змены колы.

Практычна, вы толькі павінны сачыць за станоўчыя і адмоўныя значэння дэльты. Гэтыя выпадкі на фота злева.

Калі Delta дадатная, кола прагорткі ўверх. У адваротным выпадку, гэта было пракручваць ўніз.

Адзначым, што ў дадатках, пракрутка ўверх звычайна азначае, старонка пракручваецца ўніз і г.д.

Вы маглі б задацца пытаннем, што будзе фактычныя значэння дэльты быць. На самай справе, код вышэй наладжваецца такім чынам, што вы павінны атрымаць -1 або +1 ў 99% усіх выпадкаў. Хоць, напрыклад, я бачыў ± 3 у Firefox, калі вы вылучыце вельмі хутка. Хтосьці ў Digg паведамілі дэльце 14, і Джэфры Круз атрымалася атрымаць 76 на яго трекпад Powerbook.:-) Вядома, гэта залежыць ад адчувальнасці, якія вы ўстанавілі для вашай мышы. Існуе таксама тонкасці ў Firefox (па крайняй меры): калі вы пачынаеце пракруткі колы хутка, а затым націснуць правай кнопкай мышы на меню, вялікае значэнне дэльты паведамляецца, напрыклад, 30.

Роберт Гёрл піша аб сваім вопыце на сафары, MacOS X: "Для прагляду адной сваёй + -0.1, калі вы выкінулі яго хутчэй, каштоўнасці становяцца больш. Гэта з-за мышы Mac OS '/ кола-паскарэнне. Вы пераязджае / ўключыць яго адзін раз, яна рухаецца / скруткі 1 піксель. Тады вы перасоўвае / ператварыць яго ў тры разы хутка і яна рухаецца / спаўняецца 30 пікселяў "Ён таксама піша пра Camino, які заснаваны на Gecko, той жа рухавік, што Firefox выкарыстоўвае:" гэтак жа, як Safari (+ - 0,3 да +-бясконцасць), які здзіўляе мяне, так як яна заснавана на тым жа рухавічку, як Firefox, які паказвае толькі + -2,666666 нягледзячы на хуткасць. "

Вы таксама можаце ўбачыць тэставую старонку, а таксама доўга тэставую старонку, гэта значыць з палосамі пракруткі - што паказвае, як прадухіленне паводзін работ па змаўчанні.

Сумяшчальнасць

Я напісаў першую версію гэтага кода ў студзені 2006 года. У той час, Firefox і Internet Explorer 6 былі падтрымліваюцца толькі браўзэры. Пажылыя Internet Explorer версіі не працуюць. Дзякуючы Кейн Бартон для справаздачнасці, што гэта працуе з Firefox 1.0.7 (так магчыма з 1,0).

Я хацеў бы падзякаваць Жан-Люк Milot за ўклад нататкі аб тым, як зрабіць код працаваць у Opera 9. Гэтая версія оперы з'яўляецца адносна новым (па стане на ліпень 2006 года); папярэднія версіі оперы не падтрымлівае кола мышы. Я таксама ўдзячны Юрій Чайковський (Юрый Чайкоўскі), якія паказваюць на тое, што ў новай версіі оперы (па крайняй меры ад 9,20 і вышэй) у вас больш няма, каб інвертаваць знак дэльты. Так паводзіны такое ж, як і ў Internet Explorer. Я трохі турбаваўся аб сумяшчальнасці са старымі версіямі оперы (хоць опера гвалтоўна рэкамендуе сваім карыстальнікам абнаўляць раз новая версія выходзіць), але праз некаторы час праходзіць я выдалю умоўны код, які быў напісаны спецыяльна для Opera.

Акрамя таго, дзякуючы Эндру Шырэр, Дорыян і Джэфры Круз за ўказанне на тое, што код працуе ў Safari. Андрэй згадвае версіі 2.0.4, але я не ўпэўнены, пра больш ранніх версій. Маркус Rothenbacher напісаў мне кажуць, што Konqueror (прынамсі да версіі 3.5.4) не мае падтрымкі колы мышы.

Прадухіленне паводзіны код па змаўчанні пастаўляецца з phpspot.org і Ёхан Сундстрем. Вы можаце бачыць, як іх код працуе ў доўгі тэставай старонкі (г.зн. з палосамі пракруткі). Тым не менш, ён працуе ў IE / Firefox. Варта таксама працуе ў Оперы, пачынаючы з версіі 09/02. (Дзякуй Ярка Rantavuori для ўказваць на гэта.)

Карысна, аднак, адзначыць, што Opera, Safari і Firefox ўключаюць аўтаматычнага абнаўлення сістэмы, якія падкажуць карыстальнікам абнавіцца да новай версіі браўзэра як толькі яна вызваляецца, так што вы можаце быць гатовыя да таго, што ўсё больш і больш карыстальнікаў інтэрнэту будзе браўзэрах, для якіх гэты код колы мышы працуе.

Кола мышы ў цяперашні час працуе на: (з ранняй версіі вядомых на працу)

Не падтрымліваецца браўзэрамі: (ні адна з існых версія падтрымлівае кола мышы)

Юзабіліці

(Некалькі "не" С.)

Рэальныя прыклады свеце

Калі вы ведаеце, больш практычным і цікавыя прыклады, пішыце мне спасылку.

Звязаныя рэчы

Спадзяюся, што гэта было карысна для вас. Вы можаце мне пра гэта, калі ён быў.

Popular Links
Published (Last edited): May 18 , source: http://adomas.org/javascript-mouse-wheel/
index