Cabbage.js

Cabbage.js — это красивый, элегантный и удобный плагин на JavaScript.

https://gquery.cn/plugins/cabbage

Этот плагин разработан Ganxiaozhe. По сравнению с другими пользовательскими контекстными меню, меню Cabbage более красивое и удобное в использовании. Кроме того, оно поддерживает бесконечную вложенность! Вы можете привязать меню к любому элементу, не беспокоясь о конфликтах.

Cabbage.js зависит от gQuery версии 1.4.2 или выше.

Введение

$(function(){
    $('#ibanner').cabbage([
        {text:'Cabbage.gQuery.js', func:function(){
            gxz.alert({title:'Cabbage.gQuery.js',message:'多吃蔬菜🥬！！！'});
        }},{break:true},
        {text:'查询 "[:sel]"', selection:true, func:function(opts){
            window.open("https://www.baidu.com/s?ie=UTF-8&wd="+opts.selText, "blank");
        }},
        {text:'卷心菜单',data:[
            {text:'挺好吃'},{text:'不好吃'},
            {text:'没吃过', data:[
                {text:'真的假的', disable:true},{break:true},{text:'真的', data:[
                    {text:'???'}
                ]},{text:'假的'}
            ]}
        ]},
        {text:'重新加载', func:function(){window.location.reload();}},
        {text:'检查', func:function(){
            console.log('当前元素:', this);
        }},{break:true},{text:'gQuery Awesome', disable:true}
    ]);
});

После привязки меню вы можете в любое время удалять, добавлять или изменять всё меню или отдельные опции:

$('#ibanner')[0].gQueryData.cabbageMenu[7] = {
    text:'gQuery Awesome', disable:false, data:[{text:'1', func:function(){alert(0);}},{text:'0'},{text:'1'}]
};

Установка Вам необходимо включить следующие файлы: (пожалуйста, не используйте сжатые версии в среде разработки, иначе вы потеряете предупреждения об ошибках!)

<link type="text/css" rel="stylesheet" href="cabbage.gquery.css">

<script type="text/javascript" src="gquery.min.js"></script>
<script type="text/javascript" src="cabbage.gquery.min.js"></script>

Использование Cabbage.js расширяет свои методы через $.fn.extend в прототипной цепочке gQuery, и вы можете напрямую привязывать его к отдельным или нескольким элементам через gQuery. Когда вам нужно привязать меню глобально, используйте $('body') вместо $(window) или $(document).

Конфигурация Cabbage.js интуитивно понятна: одно меню — это один массив объектов, а один объект — одна опция меню. Самое простое меню может быть таким: [{text:'Cabbage.gQuery.js'}], хотя нет, должно быть [].

Да, у Cabbage есть свои хитрости, вы можете передать пустой массив, чтобы скрыть контекстное меню браузера по умолчанию, полный код: $('body').cabbage([]);

Опции меню имеют следующие параметры:

{
    // отображаемое имя
    text: '大白菜，人人爱',

    // разделительная линия
    break: true,
    // нельзя нажать
    disable: true,
    // функция выполняется при выборе содержимого
    selection: true

    // функция, выполняемая при нажатии на эту опцию
    func: function(){...},
}

Среди них text поддерживает специальные комбинации символов для преобразования в соответствующие переменные, например, [:sel] в пункте меню будет заменён на содержимое, выбранное правой кнопкой мыши...

Лицензия

MIT

Copyright (c) 2020-present, JU Chengren (Ganxiaozhe)