📜 ⬆️ ⬇️

Bootstrap Dropdown Menus Enhancement v3.1.1

About a year ago, I created drop-down menu extensions for Bootstrap v2 ( habrapost ). In connection with the Easter holidays, finally found the time to upgrade the functionality to version 3 (Bootstrap v3).
List of features:


In the new version, the entire css code has moved to a separate file and does not make changes to the dropdown.less, but only expands it. Javascript code is based on the bootstrap dropdown.js, but in my opinion a bit improved. For example, the function clearMenus scared me:
 function clearMenus(e) { $(backdrop).remove() $(toggle).each(function () { var $parent = getParent($(this)) var relatedTarget = { relatedTarget: this } if (!$parent.hasClass('open')) return $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget)) if (e.isDefaultPrevented()) return $parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget) }) } //     $(document).on('click.bs.dropdown.data-api', clearMenus) 

Those. each time, when clicking on the page, this quick code was launched, which in fact did nothing if there were no open menus. In my performance, the function closes only those menus that have been opened api. I saved the clearMenus function and made it public, it is not used internally, but if necessary it can be called from outside $.fn.dropdown.clearMenus
Well, by itself, the support of the submenu, though this functionality is new and will be further developed.
The original dropdown.js is not needed.

1. submenu


The developers removed this functionality from BS3.
Submenus just the mobile web. They will be removed with 3.0. - github.com/twbs/bootstrap/pull/6342#issuecomment-11594010
For example, in one project, I needed to implement a main menu with two levels of nesting, which is added up with a lower resolution (menu from navabar). Hence the need for this functionality. See the first example to better understand what it is about.

2. radio and checkbox


Adds support for radio and checkbox . Examples
')

2. positioning


Sometimes you want to position the menu above the button or in the center. To this .pull-right , in addition to the standard .pull-right , new classes .pull-top , .pull-center , .pull-middle were introduced.

3. bullet


The class .bullet adds an arrow to the menu.





I will be glad to any comments, comments, additions. Thanks for attention.

PS: The page on GitHub is framed in English. I am not very strong in English, so I will be glad to any help in correcting inaccuracies and errors.

Source: https://habr.com/ru/post/220295/


All Articles