4 Star 12 Fork 1

Ganxiaozhe / Cabbage

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

Cabbage.js

🥬 Cabbage.js is a beautiful, elegant and convenient JavaScript plugin.

https://gquery.net/plugins/cabbage

该插件由 Ganxiaozhe 开发,相比其他自定义右键菜单,卷心菜单更美观,且更易于使用。同时,支持无限套娃!你可以对任意元素进行菜单绑定,放心,这并不会造成冲突。

Cabbage.js 依赖 gQuery v1.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'}],啊不对,应该是 []

没错,卷心菜也有奇淫巧技,可以传入一个空数组以屏蔽浏览器默认右键,其完整代码为:$('body').cabbage([]);

一个菜单选项有以下对象可选:

{
    // 显示的名字
    text: '大白菜,人人爱',

    // 为分割线
    break: true,
    // 不可点击
    disable: true,
    // 当选中内容后右键,此项才会被显示
    selection: true

    // 点击此项执行的函数
    func: function(){...},
}

其中 text 支持特殊字符组合以变为相应变量,例如 [:sel] 在菜单项中将变为右键时选中的内容...

License

MIT

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

Comments ( 0 )

Sign in for post a comment

About

🥬 Cabbage.js 使右键菜单像卷心菜一样一层又一层,且可深度定义 spread retract
JavaScript and 2 more languages
MIT
Cancel

Releases

No release

Gitee Metrics

Contributors

All

Activities

load more
can not load any more
JavaScript
1
https://git.oschina.net/ganxiaozhe/Cabbage.git
git@git.oschina.net:ganxiaozhe/Cabbage.git
ganxiaozhe
Cabbage
Cabbage
main

Search