首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

HTML中实现右键菜单功能

HTML中实现右键菜单功能 我们使用的应用系统很多都有右键菜单功能。但是在网页上面,点击右键一般显示的却是IE默认的右键菜单,那么我们如何实现自己的右键菜单呢?...下面将讲解右键菜单功能的实现原理和实现代码。...实现原理 在HTML语言中,基本上每个对象都有一个oncontextmenu事件,这个事件就是鼠标的右键单击事件(onclick事件是鼠标的左键单击事件),那么我们就可以在鼠标右击的时候,让系统弹出一个窗口...下面的代码内容: contextmenuDemo.html文件 ――――――――――――――――――――――――――――――――― <%-- /** *实现右键菜单功能 */ --%> ...-- 右键菜单结束--> /** *根据传入的id显示右键菜单 */ function showMenu(id) { menuForm.id.value

4.9K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    10个HTML 5.1的新功能

    注意:目前并非所有浏览器都支持所有这些功能,所以在使用它们之前,请不要忘记检查浏览器是否支持。 1.为响应设计定义多个图像资源 ?...3.将功能添加到浏览器的上下文菜单 ? 使用元素及其type =“context”属性,可以将自定义功能添加到浏览器的上下文菜单中。...注意:浏览器对这个功能的支持还不是很好。 Chrome 54并不支持,而Firefox 50仅允许一个额外的上下文菜单。 4.嵌入页眉和页脚 ?...在HTML 5.1中,如果每个级别都包含在分段内容里,则允许嵌套页眉和页脚。 如果要向语义分段元素(例如和)添加精细的标题话,这个功能会非常有用。...HTML 5.1允许开发人员创建width属性值为0的 零宽度图像 。 如果你想要包含不想向用户显示的图像(例如跟踪图像文件)则此功能很有用。建议将零宽度图像与空alt属性一起使用。

    1.9K20

    HTML5中的拖放功能

    image 知识点 拖拽的体验,你享受过吗,在HTML5之前,可以使用事件mousedown,mousemove,mouseup巧妙实现页面的拖放操作,但注意拖放的操作范围只是局限在浏览器内部。...而HTML5的拖放API功能直接实现拖放操作,而且拖放的范围已经超出浏览器的边界,HTML5提供的文件api支持拖拽多个文件并上传。...要学会掌握html5中的拖放api和 文件api,光标拖放事件,从web网页上访问本地文件系统。...拖放api 在html5中的拖放api重点: 第一,为页面元素提供了拖放特性; 第二,为光标增加了拖放事件; 第三,提供了用于存储拖放数据的DataTransfer对象 draggable特性 draggable...把添加监听事件的处理函数DragOver()追加到window.onload事件中,对于目标元素preventDefault(),必须取消浏览器的默认处理,否则将无法实现拖放功能

    2.6K10

    HTML5新增的表单验证功能

    一、HTML5表单的特点: HTML5 表单增加了许多内置的控件和控件属性 XHTML 中需要放在 form 之中的诸如 input/button/select/textarea 等标签元素,在 HTML...二、HTML5新增的控件类型: email输入类型: 要求输入格式正确的 email 地址,否则浏览器不允许提交,同时会提示错误信息...设定输入最大值最小值,或在 range 中设定拖动阶梯 autocomplete属性: 此属性是为表单提供自动完成功能...,如果该属性为打开状态可很好地自动完成,一般来说,此属性必须启动浏览器的自动完成功能 data属性: HTML5 支持...HTML5 提供一种新的数据格式:XML Submission,即 application/x-www-form+xml。简单的举例说,服务器端将直接接收到 XML 形式的表单数据。

    2.5K30

    HTML5】逐步分析如何实现拖放功能

    那么在网页上其实也可以实现同样效果的拖放功能,如图 ? 那么,就让我们来看看如何实现的吧 二、拖放事件 在IE4的时候,Js就可以实现拖放功能了,当时只支持拖放图像和一些文本。...后来随着IE版本的更新,拖放事件也在慢慢完善,HTML5就以IE的拖放功能制定了该规范,Firefox 3.5、Safari 3+、chrome以及它们之后的版本都支持了该功能。...DOCTYPE html> <meta name="viewport" content="width...三、dataTransfer对象 上面只是简简单单地实现了拖放<em>功能</em>,但并没用利用该<em>功能</em>做出什么实际性的<em>功能</em>,这里我们介绍一个拖放事件中事件对象上的一个特别重要的属性——dataTransfer 我们通过

    1.5K10

    网页CAD实现图纸比较功能(html在线预览cad)

    前言 设计师在工作中需要对图纸进行多次改版或审核,图纸迭代后,修改的内容与之前内容之间需要比对,因此mxcad 提供给了CAD图纸比对功能,用户使用该功能能够快速识别图纸改版前后的具体差异,另外我们为用户提供了图纸比对相关的的...API,用户可根据自身需求对该功能进行深入的二次开发。...查看比对结果,如下图: 图纸比对功能详解 1. 工具栏命令和选项 图纸比较完成是,项目界面会出现"DWG比较"工具栏。 2....以及,针对后期的图纸频繁更改,用户可以选择固定面板位置,如下图: 设置面板功能详解: 此外,mxcad的图纸比对功能还提供了修改实体定位功能。...二次开发 mxcad 图纸比对功能中运用的核心思想是通过[McObject.loadDwgBackground()]方法将比对图纸当做当前控件的背景对象绘制,并通过[MxCompare]将当前图纸与背景图纸

    8210

    HTML5-类库系列 原生DOM功能函数

    HTML5学堂:今天我们抛开框架,书写一些DOM操作方面的功能。相信用过JQ的人,绝对不会使用原生DOM进行某些效果的实现。...今天我们就是用原生实现这样几个功能——查找第一个、最后一个子元素、查找父级元素、查找前一个和下一个兄弟级标签、移除一个元素所有的子元素。也借助这个过程理解功能的原理。...targetEle.previousSibling; } return targetEle; } 3、可控层数的父级元素查找 DOMParent 这个函数的作用与前两者不同,并非是单纯的筛选节点,而是进行了功能扩充...4、前一个兄弟标签 DOMPre 这个函数功能的原理和最初两个类似,因此直接上代码: function DOMPre(nowEle) { var nowEle = nowEle.previousSibling...= 1) { nowEle = nowEle.previousSibling; } return nowEle; } 5、下一个兄弟标签 DOMNext 这个函数功能的原理和最初两个类似,因此直接上代码

    1K80
    领券