Added demo with linked dropdown.

istvan-ujjmeszaros · Apr 11, 2018 · b027829 · b027829
1 parent 7f983c6
commit b027829
Show file tree

Hide file tree

Showing 4 changed files with 456 additions and 414 deletions.
diff --git a/demo/index-bs3.html b/demo/index-bs3.html
@@ -80,6 +80,7 @@ <h1>Bootstrap Dropdown Hover</h1>
               <li><a href="#">Action</a></li>
               <li><a href="#">Another action</a></li>
               <li><a href="#">Something else here</a></li>
+              <li role="separator" class="divider"></li>
               <li><a href="#">Separated link</a></li>
             </ul>
           </div>
@@ -109,6 +110,7 @@ <h1>Bootstrap Dropdown Hover</h1>
             <button id="setSticky" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="$('.setdemo [data-toggle=&quot;dropdown&quot;]').bootstrapDropdownHover('setClickBehavior', 'sticky');">setClickBehavior('sticky')</button>
             <button id="setDefault" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="$('.setdemo [data-toggle=&quot;dropdown&quot;]').bootstrapDropdownHover('setClickBehavior', 'default');">setClickBehavior('default')</button>
             <button id="setDisable" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="$('.setdemo [data-toggle=&quot;dropdown&quot;]').bootstrapDropdownHover('setClickBehavior', 'disable');">setClickBehavior('disable')</button>
+            <button id="setLink" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="$('.setdemo [data-toggle=&quot;dropdown&quot;]').bootstrapDropdownHover('setClickBehavior', 'link');">setClickBehavior('link')</button>
             <button id="set1000" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="$('.setdemo [data-toggle=&quot;dropdown&quot;]').bootstrapDropdownHover('setHideTimeout', 1000);">setHideTimeout(1000)</button>
             <button id="set200" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="$('.setdemo [data-toggle=&quot;dropdown&quot;]').bootstrapDropdownHover('setHideTimeout', 200);">setHideTimeout(200)</button>
             <button id="destroy" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="$('.setdemo [data-toggle=&quot;dropdown&quot;]').bootstrapDropdownHover('destroy');">destroy()</button>
@@ -119,6 +121,22 @@ <h1>Bootstrap Dropdown Hover</h1>
 
       <h2>Other dropdown type examples</h2>
 
+      <div class="bs-example">
+        <div class="dropdown">
+          <a href="https://www.virtuosoft.eu/" data-click-behavior="link" class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+            Linked dropdown
+            <span class="caret"></span>
+          </a>
+          <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li role="separator" class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+          </ul>
+        </div>
+      </div>
+
       <div class="bs-example">
         <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
           <button type="button" class="btn btn-default">1</button>
@@ -498,7 +516,7 @@ <h2>Other dropdown type examples</h2>
 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
-    <script src="src/jquery.bootstrap-dropdown-hover.js"></script>
+    <script src="../src/jquery.bootstrap-dropdown-hover.js"></script>
 
     <script>
       //$('[data-toggle="dropdown"]').bootstrapDropdownHover();
@@ -523,6 +541,10 @@ <h2>Other dropdown type examples</h2>
         $('.setdemo [data-toggle="dropdown"]').bootstrapDropdownHover('setClickBehavior', 'disable');
       });
 
+      $('#setLink').on('click', function () {
+        $('.setdemo [data-toggle="dropdown"]').bootstrapDropdownHover('setClickBehavior', 'link');
+      });
+
       $('#set1000').on('click', function () {
         $('.setdemo [data-toggle="dropdown"]').bootstrapDropdownHover('setHideTimeout', 1000);
       });

diff --git a/demo/index.html b/demo/index.html
@@ -131,6 +131,22 @@ <h1>Bootstrap Dropdown Hover</h1>
 
   <h2>Other dropdown type examples</h2>
 
+  <div class="bs-example">
+    <div class="dropdown" style="display:inline-block">
+      <a href="https://www.virtuosoft.eu/" data-click-behavior="link" class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+        Linked dropdown
+        <span class="caret"></span>
+      </a>
+      <div class="dropdown-menu">
+        <a class="dropdown-item" href="#">Action</a>
+        <a class="dropdown-item" href="#">Another action</a>
+        <a class="dropdown-item" href="#">Something else here</a>
+        <div class="dropdown-divider"></div>
+        <a class="dropdown-item" href="#">Separated link</a>
+      </div>
+    </div>
+  </div>
+
   <div class="bs-example">
     <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
       <button type="button" class="btn btn-secondary">1</button>
@@ -468,7 +484,7 @@ <h2>Other dropdown type examples</h2>
       </div>
     </div>
   </div>
-  
+
   <div class="bs-example">
     <!-- Large button groups (default and split) -->
     <div class="btn-group">
@@ -710,6 +726,10 @@ <h2>Other dropdown type examples</h2>
     $('.setdemo [data-toggle="dropdown"]').bootstrapDropdownHover('setClickBehavior', 'disable');
   });
 
+  $('#setLink').on('click', function() {
+    $('.setdemo [data-toggle="dropdown"]').bootstrapDropdownHover('setClickBehavior', 'link');
+  });
+
   $('#set1000').on('click', function() {
     $('.setdemo [data-toggle="dropdown"]').bootstrapDropdownHover('setHideTimeout', 1000);
   });