Merge pull request #1376 from harvesthq/add_events_to_documentation

Added events example and descriptions to documentation
harvesthq · Jul 19, 2013 · b43b2f0 · b43b2f0
2 parents 5c210c7 + 7be5a7b
commit b43b2f0
Showing 1 changed file with 41 additions and 0 deletions.
diff --git a/public/options.html b/public/options.html
@@ -157,6 +157,47 @@ <h3>Example:</h3>
           </td>
         <tr>
       </table>
+
+      <h2>Events</h2>
+      <p>Chosen triggers a number of standard and custom events on the original select field.</p>
+
+      <h3>Example:</h3>
+
+<pre>
+  <code class="language-javascript">$('select').on('change', function(evt, params) {
+    do_something(evt, params);
+  });</code>
+</pre>
+
+      <table class="docs-table">
+        <tr>
+          <th>Event</th><th>Description</th>
+        </tr>
+        <tr>
+          <td>change</td>
+          <td>
+            <p>Chosen triggers the standard DOM event whenever a selection is made (it also sends a <code class="language-javascript">selected</code> or <code class="language-javascript">deselected</code> parameter that tells you which option was changed).</p>
+            <p><strong>Note:</strong> in order to use change in the Prototype version, you have to include the <a href="https://github.com/kangax/protolicious/blob/5b56fdafcd7d7662c9d648534225039b2e78e371/event.simulate.js">Event.simulate</a> class. The selected and deselected parameters are not available for Prototype.</p>
+          </td>
+        </tr>
+        <tr>
+          <td>liszt:ready</td>
+          <td>after Chosen has been fully instantiated (it also sends the <code class="language-javascript">chosen</code> object as a parameter).</td>
+        </tr>
+        <tr>
+          <td>liszt:maxselected</td>
+          <td>triggered if <code class="language-javascript">max_selected_options</code> is set and that total is broken. (it also sends the <code class="language-javascript">chosen</code> object as a parameter)</td>
+        </tr>
+        <tr>
+          <td>liszt:showing_dropdown</td>
+          <td>triggered when Chosen's dropdown is opened (it also sends the <code class="language-javascript">chosen</code> object as a parameter).</td>
+        </tr>
+        <tr>
+          <td>liszt:hiding_dropdown</td>
+          <td>triggered when Chosen's dropdown is closed (it also sends the <code class="language-javascript">chosen</code> object as a parameter).</td>
+        </tr>
+      </table>
+
     </div>
   </div>
   <div class="oss-bar">