testing/ver0.01/jquery-ui-1.10.3.custom/development-bundle/docs/mouse.html

   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">&nbsp;</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">&nbsp;</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">&nbsp;</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>