HTML中实现右键菜单功能
我们使用的应用系统很多都有右键菜单功能。但是在网页上面，点击右键一般显示的却是IE默认的右键菜单，那么我们如何实现自己的右键菜单呢？下面将讲解右键菜单功能的实现原理和实现代码。
实现原理
在HTML语言中，基本上每个对象都有一个oncontextmenu事件，这个事件就是鼠标的右键单击事件（onclick事件是鼠标的左键单击事件），那么我们就可以在鼠标右击的时候，让系统弹出一个窗口（这个是popup窗口，显示在IE的最前面，没有菜单），上面显示我们想要显示的菜单信息，当我们单击其中某一项的时候，就执行我们设定的动作，然后将弹出窗口关闭。
实现代码
下面我写了一个示例代码，模拟一个树型菜单，当我们右键点击树型菜单某一项的时候，就会弹出右键菜单，里面有“新增”、“修改”、“删除”三个菜单项，单击某项会执行相应的操作。如果是在页面的其它地方点击右键的话，就只显示“新增”一个菜单项。下面的代码内容：
contextmenuDemo.html文件
―――――――――――――――――――――――――――――――――
<%--
/**
*实现右键菜单功能
*/
......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>test</title>
<meta name="Author" content="Doyoe(飘零雾雨), edzmaster@gmail.com" />
<style type="text/css">
table {width:500px;table-layout:fixed;}
.col1 {width:100px;}
.col2 {width:200px;}
.col3 {width:200px;}
th strong {display:block;width:100%;}
tr strong,tr td {white-space:nowrap;overflow:hidden;}
</style>
</head>
<body>
<table border="1" cellspacing="0" summary="测试">
<thead>
<tr>
<th class="col1"><strong>产品名称</strong></th>
<th class="col2"><strong>产品介绍</strong></th>
<th class="col3">&l ......
/************************************************************************
* Description: 访问zip中的htm 之 Widgets学习
* Author: 陈相礼
* Compiled: VC8 + wxWidgets2.8.10
* Date: 04/02/10
************************************************************************/
/************************************************************************
* Description: 访问zip中的htm 之 Widgets学习
* Author: 陈相礼
* Compiled: VC8 + wxWidgets2.8.10
* Date: 04/02/10
************************************************************************/
#include "wx/wx.h"
#include "wx/image.h"
#include "wx/html/htmlwin.h"
#include "wx/fs_zip.h"
class AppMain : public wxApp
{
public:
virtual bool OnInit();
protected:
private:
};
class FrameMain : public wxFrame
{
public:
FrameMain( const wxString& title, const wxPoint& pos, const wxSize& size );
void OnQuit( wxCommandEvent& event );
void OnBack( wxCommandEvent& event );
void OnForw ......
/************************************************************************
* Description: 访问zip中的htm 之 Widgets学习
* Author: 陈相礼
* Compiled: VC8 + wxWidgets2.8.10
* Date: 04/02/10
************************************************************************/
/************************************************************************
* Description: 访问zip中的htm 之 Widgets学习
* Author: 陈相礼
* Compiled: VC8 + wxWidgets2.8.10
* Date: 04/02/10
************************************************************************/
#include "wx/wx.h"
#include "wx/image.h"
#include "wx/html/htmlwin.h"
#include "wx/fs_zip.h"
class AppMain : public wxApp
{
public:
virtual bool OnInit();
protected:
private:
};
class FrameMain : public wxFrame
{
public:
FrameMain( const wxString& title, const wxPoint& pos, const wxSize& size );
void OnQuit( wxCommandEvent& event );
void OnBack( wxCommandEvent& event );
void OnForw ......
String.prototype.HTMLEncode = function() {
var temp = document.createElement ("div");
(temp.textContent != null) ? (temp.textContent = this) : (temp.innerText = this);
var output = temp.innerHTML;
temp = null;
return output;
}
String.prototype.HTMLDecode = function() {
var temp = document.createElement("div");
temp.innerHTML = this;
var output = temp.innerText || temp.textContent;
temp = null;
return output;
}
上面代码转自：http://www.jb51.net/article/18396.htm
本人对javascript的核心技术不是太熟悉，再加上现在又在用不熟悉的EXT来编写前台页面代码，所以只得用最笨的方法，不扩展String自己写处理函数：
htmlDecode:function(str){
var temp = document.createElement ("div");
temp.innerHTML = str;
var output = temp.innerText || temp.textContent;
temp=null;
return output;
}
htmlEncode:function(str){
var temp = document.createElement ("div");
(temp.textContent ! ......
String.prototype.HTMLEncode = function() {
var temp = document.createElement ("div");
(temp.textContent != null) ? (temp.textContent = this) : (temp.innerText = this);
var output = temp.innerHTML;
temp = null;
return output;
}
String.prototype.HTMLDecode = function() {
var temp = document.createElement("div");
temp.innerHTML = this;
var output = temp.innerText || temp.textContent;
temp = null;
return output;
}
上面代码转自：http://www.jb51.net/article/18396.htm
本人对javascript的核心技术不是太熟悉，再加上现在又在用不熟悉的EXT来编写前台页面代码，所以只得用最笨的方法，不扩展String自己写处理函数：
htmlDecode:function(str){
var temp = document.createElement ("div");
temp.innerHTML = str;
var output = temp.innerText || temp.textContent;
temp=null;
return output;
}
htmlEncode:function(str){
var temp = document.createElement ("div");
(temp.textContent ! ......
鼠标的多种样式...
<P><a href="help.htm" style="cursor:hand">手</a>
<a href="help.htm" style="cursor:text">文本</a>
<a href="help.htm" style="cursor:MOVE">四个方向的箭头</a>
<a href="help.htm" style="cursor:e-resize">左右方向的箭头</a>
<a href="help.htm" style="cursor:nw-resize">右斜下方箭头</a>
<a href="help.htm" style="cursor:s-resize">上下方箭头</a>
<a href="help.htm" style="cursor:sw-resize">左斜下方箭头</a>
<a href="help.htm" style="cursor:crosshair">十字架</a>
<a href="help.htm" style="cursor:wait">沙漏</a>
<a href="help.htm" style="cursor:help">问号</a>
<a href="help.htm" style="cursor:n-resize">上下箭头</a>
<a href="help.htm" style="cursor ......
在Web开发中，常常要用到两个窗口之间互相传值。下面谈谈父子窗口之间的传值：
一：使用Open开启子窗口
1：单值传递
通过open开启的子窗口比较好处理。
页面窗口1.html代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<body>
<form name="dForm" id="dForm" method="post" onsubmit="return dFormCK();" action="abc.php">
<input type="text" size="30" name="p" id="p" value=""/>
</form>
<a href="javascript:void(0)" onclick="window.open('2.html','child','width=400,height=300,left=200,top=200');">打开子窗口</a>
</body>
</html>
Open后弹出的子窗口2.html：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<base target="_self">
<body>
<input type="button" onclick="JavaScript:window.opener.document.getElementById('p').value='ok';window.close();" value="确定">
</body>
2：多值传递
多值的值的传递与单值传递是一� ......
最新文章 : html