弹出层脚本_javascript技巧_脚本之家,js_脚本之家

作者: 澳门金莎娱乐网站  发布:2019-11-28
... const columns = [ { title: "序号", dataIndex: "INDEX" }, { title: "主题大类", dataIndex: "THEME" }, { title: "中文名称", dataIndex: "CN_NAME" }, { title: "英文名称", dataIndex: "EN_NAME" }];... data() { return { columns, tableData: [ { INDEX: 0, THEME: "基础数据", CN_NAME: "地区", EN_NAME: "Area" }, { INDEX: 1, THEME: "个人信息", CN_NAME: "姓名", EN_NAME: "Name" } ] }; }

对此子菜单, 最首要的便是要安装八个样式:position和display. position:absolute 让此图层能够准显著位展现.进而调整他的来得地点. display:none 让图层在加载时不展现. 3.编写主菜单 主菜单代码如下: 复制代码 代码如下:

下一场在data里加多customClick的右键方法,甚至在methods里增加body的click方法。增添body的click方法是为着在现身右键菜单后,点击左键时关闭菜单。

一.摘要 本连串小说是为着架空通用的,跨浏览器的脚本方法. 本篇小说讲明弹出浮动层的javascript函数, 以致函数的法规和利用注意事项. 二.兑现效果与利益 用脚本弹出浮动层是我们最常用的剧本方法之意气风发.上边是成效图:

总结

2.编写子菜单 先编写制定多个子菜单图层. 复制代码 代码如下:

data() { return { ... customClick: record => ({ on: { contextmenu: e => { e.preventDefault(); this.menuData = record; this.menuVisible = true; this.menuStyle.top = e.clientY   "px"; this.menuStyle.left = e.clientX   "px"; document.body.addEventListener("click", this.bodyClick); } } }) }; }, methods: { bodyClick() { this.menuVisible = false; document.body.removeEventListener("click", this.bodyClick); } }

自身是测量试验图层笔者是测量检验图层

    {{menuData.THEME}} {{menuData.CN_NAME}} {{menuData.EN_NAME}}  const columns = [ { title: "序号", dataIndex: "INDEX" }, { title: "主题大类", dataIndex: "THEME" }, { title: "中文名称", dataIndex: "CN_NAME" }, { title: "英文名称", dataIndex: "EN_NAME" }];export default { data() { return { columns, tableData: [ { INDEX: 0, THEME: "基础数据", CN_NAME: "地区", EN_NAME: "Area" }, { INDEX: 1, THEME: "个人信息", CN_NAME: "姓名", EN_NAME: "Name" } ], menuData: {}, menuVisible: false, menuStyle: { position: "absolute", top: "0", left: "0", border: "1px solid #eee" }, customClick: record => ({ on: { contextmenu: e => { e.preventDefault(); this.menuData = record; this.menuVisible = true; this.menuStyle.top = e.clientY   "px"; this.menuStyle.left = e.clientX   "px"; document.body.addEventListener("click", this.bodyClick); } } }) }; }, methods: { bodyClick() { this.menuVisible = false; document.body.removeEventListener("click", this.bodyClick); } }};

事件源

新建一个Menu菜单组件的实例及其样式:

Menu1 Menu2 NoSubMenu

瞩目这里给Menu加样式首若是为着促成点右键时Menu菜单出以往鼠标地方,所以小编用了position: "absolute"来定义。

上增添多少个
,则弹出层的职位就发生错误了. 假诺在Body成分上平添此体制依旧弹出地点不当,则请在事件源对象的容器成分中也加多此样式 2.不传递最终叁个参数则弹出层只在事变源上面弹出.不然将会估算事件源尾巴部分的譬喻, 如若尾部控件不足而且上部控件丰盛,则弹出层展现在事件源上方. 3.在页面上要加多DOCTYPE成分.不加多的话很或然在一些浏览器中现身错误.有关DOCTYPE的成效,请查看上边包车型客车小说: DOCTYPE成分解析 六.总结 包容多浏览器真的是大器晚成件令人发烧的事情.小编预计此函数仍旧会不符合规律.本来想写脚本解析的, 可是在撰写的时候又发掘了有的Bug况兼进行了改进.包容来合作去最终把自个儿合营晕了.其实假设一个种类能应用脚本库将会是一个很好的挑肥拣瘦.本系列小说只是梦想创设七个轻量级的脚本类库.我们使用中有别的难点期望多多调换, 一同制作轻便易用的脚本库!

方今做的叁个类型是依据 vue AntDesign 的。由于项目供给,须求在 Table 组件的行内点右键的时候弹出菜谱。在线演示地址及最后效果图如下:

1-2

 {{menuData.THEME}} {{menuData.CN_NAME}} {{menuData.EN_NAME}} ... data() { return { ... menuData: {}, menuVisible: false, menuStyle: { position: "absolute", top: "0", left: "0", border: "1px solid #eee" } }; }

2-2

由来,Ant Design Vue中Table组件行内右键菜单就贯彻了。完整代码如下:

1-1

上边就是最关键的,通过Table组件的customRow参数来设置鼠标右键事件。首先增加Table组件的customRow参数:

点击图中的"航空公司"后,会在"航空集团"上面弹出调换层. 在网络弹出框的台本相当多, 而且还恐怕有各类第三方JS框架可供大家利用.但是内部豆蔻梢头部分脚本过于简短,仅仅粗略的实现弹出效果与利益而忽略了灵活性,通用性和跨浏览器个性. 使用JS框架又微微杀鸡用牛刀.所以在搜罗收拾了有的质感后, 写出了下文中的ScriptHelper类的弹出层方法. 首要特色有: 扶助多浏览器 使用面向对象方法封装 使用轻巧,通用性强. 将总计位置等函数实行领取, 全体的相干函数都足以独立调用, 可依据实际项目三番三回一回开垦. 三.脚本艺术 上边笔者先将脚本方法进献出来,然后譬如怎么着运用. 最终批注脚本的原理. 复制代码 代码如下: /* ==================== ScriptHelper 开始 ==================== */ /* scriptHelper 脚本扶持对象. 成立人: ziqiu.zhang 二〇〇八.3.5 增多函数: getScroll():拿到鼠标滚过的相距-包容XHTML getClient():获得浏览器当前体现区域的朗朗上口-包容XHTML showDivCommon():展现图层. 使用举个例子:

上述所述是作者给我们介绍的Vue中Table组件行内右键菜单达成格局,希望对我们享有利于,倘诺我们有任何疑问请给本人留言,小编会及时恢复生机大家的。在这里也非常多谢我们对剧本之家网址的支撑!倘使你认为本文对您有利于,应接转发,烦请评释出处,多谢!

*/ scriptHelper.prototype.showDivCommon = function (sObj,divId, sObjHeight, moveLeft, divObjHeight) { //废除冒泡事件 if!='undefined' && window != null && window.event != null ) { window.event.cancelBubble = true; } else if( ScriptHelper.showDivCommon.caller.arguments[0] != null ) { ScriptHelper.showDivCommon.caller.arguments[0].cancelBubble = true; } //参数检查实验.若无传来参数则设置暗中认可值 if { moveLeft = 0; } if { sObjHeight = 20; } if { divObjHeight = 0; } var divObj = document.getElementById; //获得图层对象 var sObjOffsetTop = 0; //事件源的垂直间距 var sObjOffsetLeft = 0; //事件源的水准间距 var myClient = this.getClient(); var myScroll = this.getScroll(); var sWidth = sObj.width; //事件源对象的幅度 var sHeight = sObjHeight; //事件源对象的可观 var bottomSpace; //间隔尾巴部分的相距 /* 获取事件源控件的惊人和宽度.*/ if { sWidth = 100;//不恐怕得到则为100 } else { sWidth = sWidth 1; //留出1px的间距 } if( divObj.style.display.toLowerCase { //隐敝图层 divObj.style.display = "none"; } else { if { alert; return false; } /* 获取事件源对象的偏移量 */ var tempObj = sObj; //用于总结事件源坐标的一时对象 while( tempObj && tempObj.tagName.toUpperCase { sObjOffsetTop = tempObj.offsetTop; sObjOffsetLeft = tempObj.offsetLeft; tempObj = tempObj.offsetParent; } tempObj = null; /* 获取间距底部的相距 */ bottomSpace = parseInt(myClient.clientHeight) - ( parseInt - parseInt - parseInt; /* 设置图层显示地方 */ //即使事件源下方空间不足且上方控件丰裕容纳弹出层,则在上方突显.不然在江湖显示if( divObjHeight>0 && bottomSpace < divObjHeight && sObjOffsetTop >divObjHeight ) { divObj.style.top = ( parseInt - parseInt.toString()

第意气风发新建壹个Table组件的实例:

1-2

本文由金沙澳门官网发布于澳门金莎娱乐网站,转载请注明出处:弹出层脚本_javascript技巧_脚本之家,js_脚本之家

关键词: 金沙澳门官网