|
1 <!doctype html> |
|
2 <html lang="en"> |
|
3 <head> |
|
4 <meta charset="utf-8"> |
|
5 <title>jQuery UI mouse documentation</title> |
|
6 |
|
7 <style> |
|
8 body { |
|
9 font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif" |
|
10 } |
|
11 .gutter { |
|
12 display: none; |
|
13 } |
|
14 </style> |
|
15 </head> |
|
16 <body> |
|
17 |
|
18 <script>{ |
|
19 "title": |
|
20 "Mouse Interaction", |
|
21 "excerpt": |
|
22 "The base interaction layer.", |
|
23 "termSlugs": { |
|
24 "category": [ |
|
25 "utilities","interactions" |
|
26 ] |
|
27 } |
|
28 }</script><article id="jQuery-ui-mouse1" class="entry widget"><h2 class="section-title"><span>Mouse Interaction</span></h2> |
|
29 <div class="entry-wrapper"> |
|
30 <p class="desc"><strong>Description: </strong>The base interaction layer.</p> |
|
31 <section id="quick-nav"><header><h2>QuickNav</h2></header><div class="quick-nav-section"> |
|
32 <h3>Options</h3> |
|
33 <div><a href="#option-cancel">cancel</a></div> |
|
34 <div><a href="#option-delay">delay</a></div> |
|
35 <div><a href="#option-distance">distance</a></div> |
|
36 </div> |
|
37 <div class="quick-nav-section"> |
|
38 <h3>Methods</h3> |
|
39 <div><a href="#method-_mouseInit">_mouseInit</a></div> |
|
40 <div><a href="#method-_mouseDestroy">_mouseDestroy</a></div> |
|
41 <div><a href="#method-_mouseDown">_mouseDown</a></div> |
|
42 <div><a href="#method-_mouseMove">_mouseMove</a></div> |
|
43 <div><a href="#method-_mouseUp">_mouseUp</a></div> |
|
44 <div><a href="#method-_mouseDistanceMet">_mouseDistanceMet</a></div> |
|
45 <div><a href="#method-_mouseDelayMet">_mouseDelayMet</a></div> |
|
46 <div><a href="#method-_mouseStart">_mouseStart</a></div> |
|
47 <div><a href="#method-_mouseDrag">_mouseDrag</a></div> |
|
48 <div><a href="#method-_mouseStop">_mouseStop</a></div> |
|
49 <div><a href="#method-_mouseCapture">_mouseCapture</a></div> |
|
50 </div> |
|
51 <div class="quick-nav-section"><h3>Events</h3></div></section><div class="longdesc" id="entry-longdesc"> |
|
52 <p>Similar to <a href="/jQuery.Widget#jQuery-Widget2"><code>jQuery.Widget</code></a>, the mouse interaction is not intended to be used directly. It is purely a base layer for other widgets to inherit from. This page only documents what is added to <code>jQuery.Widget</code>, but it does include internal methods that are not intended to be overwritten. The intended public API is <a href="#method-_mouseStart"><code>_mouseStart()</code></a>, <a href="#method-_mouseDrag"><code>_mouseDrag()</code></a>, <a href="#method-_mouseStop"><code>_mouseStop()</code></a>, and <a href="#method-_mouseCapture"><code>_mouseCapture()</code></a>.</p> |
|
53 </div> |
|
54 <section id="options"><header><h2 class="underline">Options</h2></header><div id="option-cancel" class="api-item first-item"> |
|
55 <h3>cancel<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Selector">Selector</a></span> |
|
56 </h3> |
|
57 <div class="default"> |
|
58 <strong>Default: </strong><code>"input,textarea,button,select,option"</code> |
|
59 </div> |
|
60 <div>Prevents interactions from starting on specified elements.</div> |
|
61 <strong>Code examples:</strong><p>Initialize the jQuery.ui.mouse with the cancel option specified:</p> |
|
62 <div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse({ cancel: </code><code class="string">".title"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div> |
|
63 <p>Get or set the cancel option, after initialization:</p> |
|
64 <div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">cancel = $( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"cancel"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"cancel"</code><code class="plain">, </code><code class="string">".title"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div> |
|
65 </div> |
|
66 <div id="option-delay" class="api-item"> |
|
67 <h3>delay<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a></span> |
|
68 </h3> |
|
69 <div class="default"> |
|
70 <strong>Default: </strong><code>0</code> |
|
71 </div> |
|
72 <div>Time in milliseconds after mousedown until the interaction should start. This option can be used to prevent unwanted interactions when clicking on an element.</div> |
|
73 <strong>Code examples:</strong><p>Initialize the jQuery.ui.mouse with the delay option specified:</p> |
|
74 <div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse({ delay: 300 });</code></div></div></td></tr></tbody></table></div> |
|
75 <p>Get or set the delay option, after initialization:</p> |
|
76 <div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">delay = $( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"delay"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"delay"</code><code class="plain">, 300 );</code></div></div></td></tr></tbody></table></div> |
|
77 </div> |
|
78 <div id="option-distance" class="api-item"> |
|
79 <h3>distance<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a></span> |
|
80 </h3> |
|
81 <div class="default"> |
|
82 <strong>Default: </strong><code>1</code> |
|
83 </div> |
|
84 <div>Distance in pixels after mousedown the mouse must move before the interaction should start. This option can be used to prevent unwanted interactions when clicking on an element.</div> |
|
85 <strong>Code examples:</strong><p>Initialize the jQuery.ui.mouse with the distance option specified:</p> |
|
86 <div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse({ distance: 10 });</code></div></div></td></tr></tbody></table></div> |
|
87 <p>Get or set the distance option, after initialization:</p> |
|
88 <div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">distance = $( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"distance"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2"> </div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"distance"</code><code class="plain">, 10 );</code></div></div></td></tr></tbody></table></div> |
|
89 </div></section><section id="methods"><header><h2 class="underline">Methods</h2></header><div id="method-_mouseCapture"><div class="api-item first-item"> |
|
90 <h3>_mouseCapture()<span class="returns">Returns: <a href="http://api.jquery.com/Types#Boolean">Boolean</a></span> |
|
91 </h3> |
|
92 <div> |
|
93 Determines whether an interaction should start based on event target of the interaction. The default implementation always returns <code>true</code>. |
|
94 </div> |
|
95 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul> |
|
96 <div> |
|
97 <strong>Code examples:</strong><p>Invoke the _mouseCapture method:</p> |
|
98 <div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"_mouseCapture"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div> |
|
99 </div> |
|
100 </div></div> |
|
101 <div id="method-_mouseDelayMet"><div class="api-item"> |
|
102 <h3>_mouseDelayMet()<span class="returns">Returns: <a href="http://api.jquery.com/Types#Boolean">Boolean</a></span> |
|
103 </h3> |
|
104 <div> |
|
105 Determines whether the <a href="#option-delay"><code>delay</code></a> option has been met for the current interaction. |
|
106 </div> |
|
107 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul> |
|
108 <div> |
|
109 <strong>Code examples:</strong><p>Invoke the _mouseDelayMet method:</p> |
|
110 <div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"_mouseDelayMet"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div> |
|
111 </div> |
|
112 </div></div> |
|
113 <div id="method-_mouseDestroy"><div class="api-item"> |
|
114 <h3>_mouseDestroy()</h3> |
|
115 <div> |
|
116 Destroys the interaction event handlers. This must be called from the extending widget's <code>_destroy()</code> method. |
|
117 </div> |
|
118 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul> |
|
119 <div> |
|
120 <strong>Code examples:</strong><p>Invoke the _mouseDestroy method:</p> |
|
121 <div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"_mouseDestroy"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div> |
|
122 </div> |
|
123 </div></div> |
|
124 <div id="method-_mouseDistanceMet"><div class="api-item"> |
|
125 <h3>_mouseDistanceMet()<span class="returns">Returns: <a href="http://api.jquery.com/Types#Boolean">Boolean</a></span> |
|
126 </h3> |
|
127 <div> |
|
128 Determines whether the <a href="#option-distance"><code>distance</code></a> option has been met for the current interaction. |
|
129 </div> |
|
130 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul> |
|
131 <div> |
|
132 <strong>Code examples:</strong><p>Invoke the _mouseDistanceMet method:</p> |
|
133 <div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"_mouseDistanceMet"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div> |
|
134 </div> |
|
135 </div></div> |
|
136 <div id="method-_mouseDown"><div class="api-item"> |
|
137 <h3>_mouseDown()</h3> |
|
138 <div> |
|
139 Handles the beginning of an interaction. Verifies that the event is associated with the primary mouse button and ensures that the <a href="#option-delay"><code>delay</code></a> and <a href="#option-distance"><code>distance</code></a> options are met prior to starting the interaction. When the interaction is ready to start, invokes the <a href="#method-_mouseStart"><code>_mouseStart()</code></a> method for the extending widget to handle. |
|
140 </div> |
|
141 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul> |
|
142 <div> |
|
143 <strong>Code examples:</strong><p>Invoke the _mouseDown method:</p> |
|
144 <div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"_mouseDown"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div> |
|
145 </div> |
|
146 </div></div> |
|
147 <div id="method-_mouseDrag"><div class="api-item"> |
|
148 <h3>_mouseDrag()</h3> |
|
149 <div> |
|
150 The extending widget should implement a <code>_mouseDrag()</code> method to handle each movement of an interaction. This method will receive the mouse event associated with the movement. |
|
151 </div> |
|
152 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul> |
|
153 <div> |
|
154 <strong>Code examples:</strong><p>Invoke the _mouseDrag method:</p> |
|
155 <div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"_mouseDrag"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div> |
|
156 </div> |
|
157 </div></div> |
|
158 <div id="method-_mouseInit"><div class="api-item"> |
|
159 <h3>_mouseInit()</h3> |
|
160 <div> |
|
161 Initializes the interaction event handlers. This must be called from the extending widget's <code>_create()</code> method. |
|
162 </div> |
|
163 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul> |
|
164 <div> |
|
165 <strong>Code examples:</strong><p>Invoke the _mouseInit method:</p> |
|
166 <div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"_mouseInit"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div> |
|
167 </div> |
|
168 </div></div> |
|
169 <div id="method-_mouseMove"><div class="api-item"> |
|
170 <h3>_mouseMove()</h3> |
|
171 <div> |
|
172 Handles each movement of the interaction. Invokes the <a href="#method-_mouseDrag"><code>mouseDrag()</code></a> method for the extending widget to handle. |
|
173 </div> |
|
174 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul> |
|
175 <div> |
|
176 <strong>Code examples:</strong><p>Invoke the _mouseMove method:</p> |
|
177 <div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"_mouseMove"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div> |
|
178 </div> |
|
179 </div></div> |
|
180 <div id="method-_mouseStart"><div class="api-item"> |
|
181 <h3>_mouseStart()</h3> |
|
182 <div> |
|
183 The extending widget should implement a <code>_mouseStart()</code> method to handle the beginning of an interaction. This method will receive the mouse event associated with the start of the interaction. |
|
184 </div> |
|
185 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul> |
|
186 <div> |
|
187 <strong>Code examples:</strong><p>Invoke the _mouseStart method:</p> |
|
188 <div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"_mouseStart"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div> |
|
189 </div> |
|
190 </div></div> |
|
191 <div id="method-_mouseStop"><div class="api-item"> |
|
192 <h3>_mouseStop()</h3> |
|
193 <div> |
|
194 The extending widget should implement a <code>_mouseStop()</code> method to handle the end of an interaction. This method will receive the mouse event associated with the end of the interaction. |
|
195 </div> |
|
196 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul> |
|
197 <div> |
|
198 <strong>Code examples:</strong><p>Invoke the _mouseStop method:</p> |
|
199 <div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"_mouseStop"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div> |
|
200 </div> |
|
201 </div></div> |
|
202 <div id="method-_mouseUp"><div class="api-item"> |
|
203 <h3>_mouseUp()</h3> |
|
204 <div> |
|
205 Handles the end of the interaction. Invokes the <a href="#method-_mouseStop"><code>mouseStop()</code></a> method for the extending widget to handle. |
|
206 </div> |
|
207 <ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul> |
|
208 <div> |
|
209 <strong>Code examples:</strong><p>Invoke the _mouseUp method:</p> |
|
210 <div class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).jQuery.ui.mouse( </code><code class="string">"_mouseUp"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div> |
|
211 </div> |
|
212 </div></div></section> |
|
213 </div></article> |
|
214 |
|
215 </body> |
|
216 </html> |