< script type="text/ javascript">
//右クリック メニューを無効にする
document.oncontextmenu=ContextMenu;
//マウスの右クリック イベント
function ContextMenu()
{
// 表示されるメニューの座標として 2 つの変数を作成します
var x;
var y;
// メニュー (以下、パネルと呼びます) の外部 Div を取得します
var FramePanel=document.getElementById("FrameDiv");
//パネルの幅と高さを取得します
varPanelWidth=parseInt(FramePanel.style.width.replace("px","")); 🎜>varPanelHeight=parseInt(FramePanel.style.height.replace("px ",""));
//マウス座標を取得します
var MouseX=event.clientX;
var MouseY=even; .clientY;
//Web ページウィンドウの幅と高さを取得します
var WindowWidth=document.body.offsetWidth;
var WindowHeight=document.documentElement.offsetHeight; >=WindowWidth)
{
x=MouseX-PanelWidth-20;
}
else
{
x=MouseX>}
//マウスの Y 座標パネルの高さ > Web ページ ウィンドウの高さの場合、パネルの上部には
if((MouseY PanelHeight)>=WindowHeight)
{
y=MouseY-PanelHeight-20; と表示されます。 }
else
{
y=MouseY;
//表示パネル
FramePanel.style.left=x;
FramePanel.style.top=y; 🎜>FramePanel.style.display="block";
//二次メニューを非表示にする
document.getElementById("ChildDiv").style.display="none";//これcode は、event.returnValue=false;
}
// マウスがメニューを選択します。パラメータの説明: arg はメニュー Div、imageUrl は置換される画像アドレスを指し、hasChildMenu はメニューがサブメニューがあり、childPanelId はサブメニュー ID を参照します (サブメニューがある場合)
function MenuOnMouseOver(arg,imageUrl,hasChildMenu,childPanelId)
{
// 背景画像を置き換えます (画像パスは相対パス)
arg.style.backgroundImage= "url('" imageUrl "')";
//div の背景色を変更します
arg.style.backgroundColor="#1665CB"; //フォントの色を変更します
arg.style.color ="#ffffff";
//このメニューの下にサブメニューがある場合
if(hasChildMenu)
{
//作成メニューが表示される座標として 2 つの変数
var x;
var y;
//サブメニュー Div (以下、サブパネルと呼びます) を取得します
var ChildPanel=document.getElementById(childPanelId) ;
//debugger;
//サブパネルの幅と高さを取得します
var ChildPanelWidth=parseInt("px","")); ChildPanelHeight=parseInt(ChildPanel.style.width.replace("px","") );
//親メニュー Div (以下、親パネルと呼びます) を取得します
var FramePanel=event.srcElement;
//親パネルの幅と高さを取得します
varPanelWidth=FramePanel.offsetWidth;
varPanelHeight=FramePanel.offsetHeight;
//マウス座標を取得します
var MouseX=event; .clientX;
var MouseY=event.clientY;
//親パネルのマウスオフセット位置を取得します
var MouseOffsetHeight=event.offsetY; //Web ページウィンドウの幅と高さを取得します
var WindowWidth=document.body.offsetWidth;
var WindowHeight=document .documentElement.offsetHeight
//マウス
x=MouseX; -MouseOffsetWidth-ChildPanelWidth-3;
}
else
{
x=MouseX-MouseOffsetWidthPanelWidth-5;
}
//マウスの Y 座標の場合 パネルの高さ>ウィンドウの高さになると、パネルの上部に
if((MouseY-MouseOffsetHeight ChildPanelHeight)>=WindowHeight-30)
{
y=MouseY-MouseOffsetHeight-ChildPanelHeight-15; と表示されます。 🎜>else
{
y=MouseY-MouseOffsetHeight 5;
}
// パネルを表示します
ChildPanel.style.left=x;
ChildPanel.style.top= y;
ChildPanel.style.display="block";
}
}
//マウスがメニューから離れる
function MenuOnMouseOut(arg,imageUrl,hasChildMenu,childPanelId)
{
if(hasChildMenu)
{
//サブメニュー div (以下、サブパネルと呼びます)
var ChildPanel=document.getElementById(childPanelId);
var ToElement=event.toElement; //ここで注意すべきは、マウスが子パネルの子孫 div に移動する場合があることです。このとき、event.ToElement!=ChildPanel (子パネル)、event.ToElement.parentNode=ChildPanel の DOM 要素、
if(ToElement= =ChildPanel||ToElement.parentNode==ChildPanel)
{
ChildPanel.style.display="block";
}
else
{
ChildPanel. style.display=" none";
}
}
//背景画像を置き換えます (画像パスは相対パスです)
arg.style.backgroundImage="url('" imageUrl " ')";
/ /div の背景色を変更します
arg.style.backgroundColor="#ffffff";
//フォントの色を変更します
arg.style.color="#000000";
}
ページの ASPX コードは次のとおりです:
<%@ ページ言語="C#" AutoEventWireup="true" CodeFile="ContextMenu.aspx.cs" Inherits="ContextMenu" %>
<%@ アセンブリの登録="AjaxControlToolkit" 名前空間=" AjaxControlToolkit" TagPrefix="cc1 " %>
無題ページ >