Dropdowns

Bootstrap offers a wide variety to style a dropdown menu. For more informations have a look to:

• Bootstrap dropdowns

With the k8 library and the function displaydropdown() you can build up dropdowns with an easy JavaScript datastructure.

Auto close outside

By the use of 'data-bs-auto-close="outside"' the bootstrap menu can be used with multiple levels. But you have to close the menu on a click by yourself by removing the class 'show'.

The drop down is build with a button and an unordered list. The class of the main element defines the opening direction:

• dropdown
• dropdup
• dropstart
• dropdend

The default position of the list is the left side. The position is defined by the class in the ul:

• dropdown-menu-start (default)
• dropdown-menu-end

The alignement of the list element <li> is also defined in the <ul> class:

• text-start, left alignement
• text-end, right alignement

<div class="dropdown" id="dropdown1" style="display: inline-block"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-auto-close="outside" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><hr class="dropdown-divider"></li> <li class="dropdown"> <a class="dropdown-item dropdown-toggle" href="#" data-bs-auto-close="outside" data-bs-toggle="dropdown" role="button">Options</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">utf-8 CSV Export</a></li> <li><a class="dropdown-item" href="#">Excel Export</a></li> </ul> </li> </ul> </div>

The menu is build with the datastructure 'obj' and the function 'k8.displayDropdown(obj)'. The structure consist out off:

• el_dd, the element
• class_main: dropdown, dropup, dropstart, dropend
• value_selected, is displayed in the button and removed off the list
• button
  • text
  • carettype, 0:no caret, 1:with caret (default)
  • pretext, (optional) displayed before the value_selected
  • html (optional)
  • class (optional)
  • id (optional)
• class_ul (optional)
• class_li (optional)
• items[level1]
  • type, "":default, "divider": displays a line
  • label
  • value
  • class_a (optional, default:dropdown-item)
  • items[level2]

In the event listener of the dropdown element the value of the list element is detected. You can write you code in switch statement.

The default value "value_selected" is displayed in the button and the pretext "Count" is written in front of it.

• value_selected: 5
• button
  • pretext: Count
• items[], the number of records is displayed and also written in the value

var m2k8=Object.create(k8); var obj={ "el_dd":document.getElementById('dropdownEx2'), "value_selected":5, "class_ul":"dropdown-menu dropdown-menu-end text-end", "button":{ "pretext":getl("Count")+": " }, "items":[ {"value":5,"label":"5","href":""}, {"value":10,"label":"10","href":""}, {"value":25,"label":"25","href":""} ] }; k8.displayDropdown(obj);