#334 and #283.

davidstutz · Aug 2, 2014 · b97ced0 · b97ced0
1 parent 3a6b377
commit b97ced0
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -805,7 +805,7 @@ <h1><a id="options"></a>Options</h1>
                         <td><code>onDropdownShow</code></td>
                         <td>
                             <p>
-                                This event handler is triggered when the dropdown are shown. 
+                                This event handler is triggered when the dropdown is shown. 
                             </p>
                             <p class="alert alert-warning">
                                 Both, the <code>onDropdownShow</code> and the <code>onDropdownHide</code> options are not supported when using Twitter Bootstrap 2.3.x.
@@ -829,7 +829,7 @@ <h1><a id="options"></a>Options</h1>
                         <td><code>onDropdownHide</code></td>
                         <td>
                             <p>
-                                This event handler is triggered when the dropdown are hidden.
+                                This event handler is triggered when the dropdown is hidden.
                             </p>
                             <p class="alert alert-warning">
                                 Both, the <code>onDropdownShow</code> and the <code>onDropdownHide</code> options are not supported when using Twitter Bootstrap 2.3.x.
@@ -848,7 +848,55 @@ <h1><a id="options"></a>Options</h1>
 &lt;/script&gt;
                             </pre>
                         </td>
-                    </tr>					
+                    </tr>
+                    <tr>
+                        <td><code>onDropdownShown</code></td>
+                        <td>
+                            <p>
+                                This event handler is triggered <i>after</i> the dropdown is shown. 
+                            </p>
+                            <p class="alert alert-warning">
+                                Both, the <code>onDropdownShown</code> and the <code>onDropdownHidden</code> options are not supported when using Twitter Bootstrap 2.3.x.
+                            </p>
+                        </td>
+                        <td>
+                            <pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+$(document).ready(function() {
+    $(&#39;.multiselect&#39;).multiselect({
+        onDropdownShown: function(event) {
+            alert(&apos;Shown event invoked!&apos;);
+        }
+    });
+});
+&lt;/script&gt;
+                            </pre>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td><code>onDropdownHidden</code></td>
+                        <td>
+                            <p>
+                                This event handler is triggered <i>after</i> the dropdown are hidden.
+                            </p>
+                            <p class="alert alert-warning">
+                                Both, the <code>onDropdownShown</code> and the <code>onDropdownHidden</code> options are not supported when using Twitter Bootstrap 2.3.x.
+                            </p>
+                        </td>
+                        <td>
+                            <pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+$(document).ready(function() {
+    $(&#39;.multiselect&#39;).multiselect({
+        onDropdownHidden: function(event) {
+            alert(&apos;Hidden event invoked!&apos;);
+        }
+    });
+});
+&lt;/script&gt;
+                            </pre>
+                        </td>
+                    </tr>
                     <tr>
                         <td><code>maxHeight</code></td>
                         <td>
@@ -2366,6 +2414,13 @@ <h1><a id="faq"></a>Frequently Asked Questions</h1>
             <p>
                 This issue is mainly due to the default behavior of most browsers. A workaround can be found here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/129">#129</a>.
             </p>
+
+            <p>
+                <b>Which are the minimum required components of Twitter Botostrap to get the plugin working?</b>
+            </p>
+            <p>
+                The plugin needs at least the styles for forms and dropdowns. In addition the JavaScript dropdown plugin from Twitter Bootstrap is required. Details can be found here: <a href="https://github.com/davidstutz/bootstrap-multiselect/issues/344">#344</a>.
+            </p>
         </div>
 
         <div class="container">

diff --git a/js/bootstrap-multiselect.js b/js/bootstrap-multiselect.js
@@ -104,7 +104,9 @@
         this.options.onChange = $.proxy(this.options.onChange, this);
         this.options.onDropdownShow = $.proxy(this.options.onDropdownShow, this);
         this.options.onDropdownHide = $.proxy(this.options.onDropdownHide, this);
-
+        this.options.onDropdownShown = $.proxy(this.options.onDropdownShown, this);
+        this.options.onDropdownHidden = $.proxy(this.options.onDropdownHidden, this);
+
         // Build select all if enabled.
         this.buildContainer();
         this.buildButton();
@@ -201,6 +203,22 @@
              */
             onDropdownHide: function(event) {
 
+            },
+            /**
+             * Triggered after the dropdown is shown.
+             * 
+             * @param {jQuery} event
+             */
+            onDropdownShown: function(event) {
+
+            },
+            /**
+             * Triggered after the dropdown is hidden.
+             * 
+             * @param {jQuery} event
+             */
+            onDropdownHidden: function(event) {
+
             },
             buttonClass: 'btn btn-default',
             dropRight: false,
@@ -243,6 +261,8 @@
             this.$container = $(this.options.buttonContainer);
             this.$container.on('show.bs.dropdown', this.options.onDropdownShow);
             this.$container.on('hide.bs.dropdown', this.options.onDropdownHide);
+            this.$container.on('shown.bs.dropdown', this.options.onDropdownShown);
+            this.$container.on('hidden.bs.dropdown', this.options.onDropdownHidden);
         },
 
         /**