近期用js和jquery开发日历组件,学会了不少js的东西。不过因为不会css,所以效果都是从别的网站“拿”过来的。:)
<div id="calMenu" style="display: none; position: absolute; left: 63px; top: 259px; z-index: 999;" class="rgtbox">
<div><a href="#">编辑</a><em> </em></div>
<div><a href="#">删除</a><em> </em></div>
</div>
<ul id="menu">
<li>示例1</li>
<li>示例2</li>
</ul>
$('#menu').bind('contextmenu', function (){
$('#calMenu').show();
....
})
然后给目标元素添加oncontextmenu事件,不过contentxmenu是html 5的标准属性,html 4是没有,所以这个菜单也依赖于浏览器实现。另外具体的菜单位置需要捕获event对象的clientX和clientY去计算。这里不再给出。
html 5标准属性详见:http://www.w3school.com.cn/html5/html5_ref_standardattributes.asp
附上样式代码,因为我自己不太懂,随意把相关的都贴出来(ff,chrome下基本通过,ie下不出现hover效果,不知道为什么):
body {
color:#333333;
font-family:Verdana,arial,Helvetica,sans-serif;
font-size:100%;
font-weight:normal;
}
.rgtbox {
background-color: #f4f4f4;
border: 1px solid #828387;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
position: absolute;
box-sizing: border-box;
-moz-box-sizing: border-box;
-khtml-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.rgtbox div {
background-color: #f4f4f4;
display: block;
text-align: right;
line-height: 20px;
border: 1px solid #f4f4f4;
clear: both;
text-align: left;
padding-left: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-khtml-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.rgtbox div:hover {
border: 1px solid #b0b0b0;
color: #828282;
background-color: #e5e5e5;
clear: both;
box-sizing: border-box;
-moz-box-sizing: border-box;
-khtml-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.rgtbox div.hovercolor {
border: 1px solid #b0b0b0;
color: #828282;
background-color: #e5e5e5;
clear: both;
box-sizing: border-box;
-moz-box-sizing: border-box;
-khtml-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.rgtbox div.hovercolor,.rgtbox div:hover {
color: #828282;
}
.rgtbox div em {
padding-right: 20px;
padding-left: 20px;
font-style: normal;
}
分享到:
相关推荐
jQuery 右键菜单 HTML右键菜单 javascript 右键
html js 屏蔽原有右键功能菜单,自定义右键菜单
HTNL+javaScript右键菜单,HTNL+javaScript右键菜单,HTNL+javaScript右键菜单
windows7新建右键菜单管理新增php,html,jsp,asp等等
win7右键菜单删除多余项
阻止浏览器的默认行为,也就是阻止浏览器右键菜单的出现,并且右键出现的是自己制作的菜单。
html5鼠标右键菜单点击文字提示代码
iframe所嵌套的页面无右键菜单, 在网上找了好多实例都不行,写的这个既简便,有很好用
-- 这里用来定义需要显示的右键菜单 --> ;border:outset 1;" align="center" onclick="parent.create()"> ;border:outset 1;" align="center" onclick="parent.update();">修改 ...
这是一个右键菜单使用的小例子,其中右键菜单.html需要联网,你也可以使用本地的Jquery。
简单阐述了HTML中实现右键菜单的功能
NULL 博文链接:https://long316.iteye.com/blog/1640930
将VSCode添加到鼠标右键菜单
ztree 右键菜单,html的静态的,js和css都有,下载后直接就可以看到功能介绍,网上可真不好找啊,特此奉献
vb任务栏图标右键菜单,任务栏右下角图标右键菜单VB源代码
兼容浏览器的右键菜单兼容浏览器的右键菜单兼容浏览器的右键菜单兼容浏览器的右键菜单兼容浏览器的右键菜单兼容浏览器的右键菜单
这是两个关于弹出层和右键菜单的例子,不用发布到服务器上,直接打开HTML文件就可以实现。资源文件不大,方便学习
完全屏蔽flex自带的右键菜单,实现自定义右键菜单,附件有完整可运行的例子。 这个问题折腾了一天多,在网上搜了很多资料,几乎都是一样的,转来转去,且讲的不明不白。这里我提供了可运行的全部代码,让你轻松搞定...
jQuery+HTML5右键菜单代码.zip
下面是复选框的且带右键菜单的树代码。 HTML code Ext.BLANK_IMAGE_URL = "../resources/images/default/s.gif"; Ext.QuickTips.init(); Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); ...