MyDropdown

原生js实现简洁的下拉菜单

Този скрипт не може да бъде инсталиран директно. Това е библиотека за други скриптове и може да бъде използвана с мета-директива // @require https://update.greasyfork.org/scripts/463933/1177909/MyDropdown.js

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey, Greasemonkey или Violentmonkey.

За да инсталирате този скрипт, трябва да инсталирате разширение, като например Tampermonkey .

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Violentmonkey.

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Userscripts.

За да инсталирате скрипта, трябва да инсталирате разширение като Tampermonkey.

За да инсталирате този скрипт, трябва да имате инсталиран скриптов мениджър.

(Вече имам скриптов мениджър, искам да го инсталирам!)

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

(Вече имам инсталиран мениджър на стиловете, искам да го инсталирам!)

Автор
wish king
Версия
0.0.1.20230419042947
Създаден
13.04.2023
Обновен
19.04.2023
Размер
20 КБ
Лиценз
Няма

原生js实现简洁的下拉菜单

截图:



在线预览:
https://jsrun.net/3cdKp/embedded/all/light


使用示例:

var clicked = function(e) {
    console.log("clicked", e.target.dataset.value)
}
new MyDropdown({
    el: ".my-dropdown-btn",
    maxWidth: '200px',
    maxHeight: '400px',
    //支持click mouseenter dblclick等,默认click
    toggleEvent: 'mouseenter',
    items: [
        {
            name: 'Home',
            value: 'home',
            icon: '',
            fn: clicked
        },
        {
            name: 'About',
            value: 'about',
            icon: '',
            selected: false,
            fn: clicked
        },
        {
            name: 'Contact',
            value: 'contact',
            icon: '',
            fn: clicked,
            //icon也支持对象传值,同样具有html和fn属性
            op: {
                html: `×`,
                fn: function(e) {
                    console.log('op clicked');
                }
            }
        }
    ],
    created: function(menu) {
        console.log('After created callback1');
    },
    shown: function(menu) {
        console.log('After shown callback1');
    },
    hidden: function(menu) {
        console.log('After hidden callback1');
    }
});