Code Monkey home page Code Monkey logo

rmenu's Introduction

Rmenu

contextmenu.js 实现右键菜单

创建实例:

new Contextmenu(?nodeConfigs)
// config  在创建实例时可以不传入,通过addMenu(nodeConfigs)方法设置也可以

配置:

nodeConfigs = {
          x:{
            titile:" 一级菜单 1",
            target: callback,
            xx:{
                titile:" 二级菜单",
                target: callback,        
            }
          }
        }

一个花括号为一个层级,如果不定义title,默认以键值作为名称。 target 点击后执行的任务,它是一个回调函数,callback(targetEl,el )

方法:

bind(domId)                                     // 绑定dom元素
unbind(domId)                                   // 解除绑定
addMenu(nodeConfigs,?position="bottom")         // 添加菜单  position 可选 "top"  | "bottom"   默认从底部追加"bottom"  
dispose()                                       // 销毁

属性:

isbind_containers   //查看已绑定的dom

frameContainer.js 实现拖拽调整布局大小

创建实例:

new FrameContainer(?row_classname, ?col_classname, ?content_classname)

样式名称:
// row_classname              可选 | 默认 "r-row"                 
// col_classname              可选 | 默认 "r-col"                           
// content_classname          可选 | 默认 "r-content"  

结构

行模式
<div id="root">
  <div class="r-row"> 
      <div class="r-content"> </div>
  </div>
</div>

列模式
<div id="root">
  <div class="r-col"> 
      <div class="r-content"> </div>
  </div>
</div>

配置

defaultOptions = {
      isDraggable: true,                          //  是否开启拖拽
      minSize: 10,                                //  拖动最小间隙
      isPercent: true,                            //  宽高为百分比
      ctrlElsize: 20,                             //  控制器大小
      lineColor: "#000",                          //  分割线颜色
      lineSize: 1,                                //  分割线大小
      creatLine: true,                            //  是否创建分割线
      draggableClassName: "draggable",            //  拖拽样式名称
      rootDomBorder: "1px solid #000",            //  根节点边框
      rowClassname: "r-row",                      //  行样式名称
      columnClassname: "r-col",                   //  列样式名称
      contentClassname: "r-content",              //  单元格样式名称
    };

方法

init(root_domId,?options)                         // 初始化
getOptions()                                      // 获取配置信息
getParentContentEl(dom,mode)  
// dom 被向上搜索的dom元素
// mode 默认值 "row"   
// 获取dom元素父级的contentEl容器,无可用容器时自动创建mode模式的contentEl;
// 返回值:contentEl
addRow(dom, ?insertPosition, ?putNode)            // 添加行
addColumn(dom,?insertPosition,?putNode)           // 添加列

参数:
- dom 
- insertPosition   // 插入的位置 默认值 "bottom"  ["top"(置顶) | "botoom"(置底) | "before"(dom元素的前面) | "after" (dom元素的后面)]
- putNode  额外需要载入的节点

返回值: [newContentEl, thisContentEl]

insertWindowTop(dom)                    // 在dom元素的上方插入窗口
insertWindowBottom(dom)                 // 在dom元素的下方插入窗口
insertWindowLeft(dom)                  
insertWindowRight(dom) 

事件Event

拖动: onDraging((e)=>{})
onDraging((e)=>{})
回调参数:e: {
         type: "draging",
         aEl: {
                   dom: aEl,
                   width: aEl.offsetWidth,
                   height: aEl.offsetHeight,
         },
         bEl: {
                   dom: bEl,
                   width: bEl.offsetWidth,
                   height: bEl.offsetHeight,
         },
}
添加窗口: onAddWindow = function(e){}
onAddWindow = function(e){} 
回调参数:e: {
         type: "addWindow",
         aEl: {
                   dom: aEl,
                   width: aEl.offsetWidth,
                   height: aEl.offsetHeight,
         },
         bEl: {
                   dom: bEl,
                   width: bEl.offsetWidth,
                   height: bEl.offsetHeight,
         },
}

删除窗口之前 ondeleteWindowBefore= function(e){}
回调参数:e: {
          type: "deleteWindowBefore",
          dom: deleteContentEl,
          }
删除窗口: ondeleteWindow = function(e){}
onAddWindow = function(e){} 
回调参数:e: {
         type: "deleteWindow",
         dom: near_contentEl,
         width: near_contentEl.offsetWidth,
         height: near_contentEl.offsetHeight,
         }

添加行: onAddRow = function(e){}
onAddRow = function(e){}
回调参数: e: { type: "addRow", dom: newContentEl }

添加列: onAddColumn = function(e){}
onAddColumn = function(e){}
回调参数: e: { type: "addColumn", dom: newContentEl }

rmenu's People

Contributors

ikale avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar

Forkers

yangxin1994

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.