ContextSubMenu [英] ContextSubMenu

问题描述

是否有一种方法可以使菜单项展开并在悬停时显示子菜单?

请非常紧急....

Is there a way to make a menu item expand and show a sub-menu when hoovering?

Please its really urgent ....

推荐答案

请使用搜索引擎.如果不是全部，则在发布之前至少要使用CodeProject！
你去...
ASP.NET菜单父菜单项突出显示 [

Please use search engines. If not all then atleast of CodeProject before posting!
Here you go...
ASP.NET Menu Parent Menuitem Highlighting[^]

嗨
不是那个...

我如何在代码>>中创建SubMenu；在下面.


< pre lang ="cs">函数CustomContextMenu(Arguments)
{
//公共属性；
this.Version =''2.1'';

//全局变量.
var Base = Arguments.Base吗? Arguments.Base:document.documentElement;
var Width = Arguments.Width吗? Arguments.Width:200;
//var FontColor = Arguments.FontColor吗? Arguments.FontColor:``黑色'';
var HoverFontColor = Arguments.HoverFontColor吗? Arguments.HoverFontColor:``white'';
var HoverBackgroundColor = Arguments.HoverBackgroundColor吗? Arguments.HoverBackgroundColor:''#2257D5'';
var HoverBorderColor = Arguments.HoverBorderColor吗? Arguments.HoverBorderColor:``橙色'';
var ClickEventListener = Arguments.ClickEventListener吗? Arguments.ClickEventListener:function(){return false; };

var ContextMenuDiv = document.createElement(''div'');
var ContextMenuTable = document.createElement(''table'');
var Index = 0;
var EventHandlers = new Array();

//样式上下文菜单div.
ContextMenuDiv.id =``ContextMenu'';
ContextMenuDiv.style.position =``绝对'';
ContextMenuDiv.style.backgroundColor =``白色'';
ContextMenuDiv.style.border =``2px超过白色'';
ContextMenuDiv.style.verticalAlign =``顶部'';
ContextMenuDiv.style.textAlign =``左'';
ContextMenuDiv.style.visibility =``隐藏'';
ContextMenuDiv.style.width =(宽度+ 11)+``px'';
//ContextMenuDiv.className=&quot;GlobalFont&quot ;;
//样式上下文菜单表.
ContextMenuTable.id =``ContextMenuTable'';
ContextMenuTable.style.width =(宽度+ 10)+``px'';
ContextMenuTable.border = 0;
ContextMenuTable.cellPadding = 0;
ContextMenuTable.cellSpacing = 0;

//将上下文菜单"表追加到上下文菜单"区域中.
ContextMenuDiv.appendChild(ContextMenuTable);

//添加上下文菜单项的公共方法.
this.AddItem = function(imgSrc，itemText，isDisabled，commandName)
{
var Tr = ContextMenuTable.insertRow(Index ++);
//Tr.style.fontFamily =``Verdana'';
Tr.style.fontSize =``8pt'';
Tr.style.fontWeight =``普通'';
Tr.style.backgroundColor =``白色'';
//Tr.style.color = isDisabled吗? ''gray'':FontColor;
//Tr.className =& quot; GlobalFont& quot ;;
Tr.style.cursor =``默认'';

var TdLeft = Tr.insertCell(0);
TdLeft.style.width = 25 +``px'';
TdLeft.style.height = 20 +``px'';
TdLeft.style.textAlign =``中心'';
TdLeft.style.verticalAlign =``中间'';
TdLeft.style.borderTop =``2px固体#c0c3c8'';
TdLeft.style.borderBottom =``2px实心#c0c3c8'';
TdLeft.style.borderLeft =``2px实心#c0c3c8'';
TdLeft.style.backgroundColor =''#c0c3c8'';

var TdCenter = Tr.insertCell(1);
TdCenter.style.width = 10 +``px'';
TdCenter.style.height = 20 +``px'';
TdCenter.innerHTML =''& amp; nbsp;'';
TdCenter.style.borderTop =``2px纯白色'';
TdCenter.style.borderBottom =``2px纯白色'';

var TdRight = Tr.insertCell(2);
TdRight.style.width =(宽度-25)+``px'';
TdRight.style.height = 20 +``px'';
TdRight.style.textAlign =``left'';
TdRight.style.verticalAlign =``中间'';
TdRight.style.fontStyle = isDisabled吗? ``italic'':``normal'';
TdRight.innerHTML = itemText吗? itemText:''& amp; nbsp;'';
TdRight.style.borderTop =``2px纯白色'';
TdRight.style.borderBottom =``2px纯白色'';
TdRight.style.borderRight =``2px纯白色'';

if(imgSrc)
{
var Img = new Image();
Img.id =``Img'';
Img.src = imgSrc;
Img.style.width = 25 +``px'';
Img.style.height = 20 +``px'';
Img.disabled = isDisabled;

TdLeft.appendChild(Img);
}
其他
TdLeft.innerHTML =''& amp; nbsp;'';

//注册事件.
if(！isDisabled)
{
WireUpEventHandler(Tr，``click''，function(){ClickEventListener(Tr，{CommandName:commandName，Text:itemText，IsDisabled:isDisabled，ImageUrl:Img?Img.src:``''})})});
WireUpEventHandler(Tr，``mouseover''，function(){MouseOver(Tr，TdLeft，TdCenter，TdRight);});
WireUpEventHandler(Tr，``mouseout''，function(){MouseOut(Tr，TdLeft，TdCenter，TdRight);});
}
其他
{
WireUpEventHandler(Tr，``click''，function(){return false;});
WireUpEventHandler(TdRight，``selectstart''，function(){return false;});
}
}

//添加分隔符菜单项的公共方法.
this.AddSeparatorItem = function()
{
var Tr = ContextMenuTable.insertRow(Index ++);
Tr.style.cursor =``默认'';

var TdLeft = Tr.insertCell(0);
TdLeft.style.width = 25 +``px'';
TdLeft.style.height =``1px'';
TdLeft.style.backgroundColor =''#c0c3c8'';

var TdCenter = Tr.insertCell(1);
TdCenter.style.width = 10 +``px'';
TdCenter.style.height =``1px'';
TdCenter.style.backgroundColor =``白色'';

var TdRight = Tr.insertCell(2);
TdRight.style.width =(宽度-25)+``px'';
TdRight.style.height =``1px'';
TdRight.style.backgroundColor =``灰色'';
}

//显示上下文菜单的公共方法.
this.Display = function(e，d，row){

e = e? e:window.event;

var xLeft = e.clientX;
如果(xLeft + ContextMenuDiv.offsetWidth& gt; Base.offsetWidth)
xLeft = Base.offsetWidth-ContextMenuDiv.offsetWidth;

var yTop = e.clientY;
如果(yTop + ContextMenuDiv.offsetHeight& gt; Base.clientHeight)
yTop = Base.clientHeight-ContextMenuDiv.offsetHeight;

ContextMenuDiv.style.visibility =``隐藏'';
ContextMenuDiv.style.left = xLeft +``px'';
ContextMenuDiv.style.top = yTop +``px'';
ContextMenuDiv.style.visibility =``visible'';

//parseInt(Numnerdocument.activeElement.title，10)
//alert(Number(document.activeElement.title));
document.getElementById(&"hidddenDate&").value = d;
document.getElementById(& quot; hiddenRow& quot;).value = row;
document.getElementById(& quot; hiddenTitle& quot;).value = document.activeElement.title;


返回false;
}

//隐藏上下文菜单的公共方法.
this.Hide = function()
{
ContextMenuDiv.style.visibility =''隐藏'';
}

//公共方法Dispose.
this.Dispose = function()
{
while(EventHandlers.length& gt; 0)
DetachEventHandler(EventHandlers.pop());

document.body.removeChild(ContextMenuDiv);
}

//公共方法GetTotalItems.
this.GetTotalItems = function()
{
返回ContextMenuTable.getElementsByTagName(''tr'').length;
}

//鼠标悬停事件处理程序
var MouseOver = function(Tr，TdLeft，TdCenter，TdRight)
{

//Tr.style.fontWeight =``bold'';
Tr.style.color = HoverFontColor;
Tr.style.backgroundColor = HoverBackgroundColor;

TdLeft.style.borderTopColor = HoverBorderColor;
TdLeft.style.borderBottomColor = HoverBorderColor;
TdLeft.style.borderLeftColor = HoverBorderColor;
TdLeft.style.backgroundColor = HoverBackgroundColor;

TdCenter.style.borderTopColor = HoverBorderColor;
TdCenter.style.borderBottomColor = HoverBorderColor;

TdRight.style.borderTopColor = HoverBorderColor;
TdRight.style.borderBottomColor = HoverBorderColor;
TdRight.style.borderRightColor = HoverBorderColor;



}

//Mouseout事件处理程序
var MouseOut = function(Tr，TdLeft，TdCenter，TdRight)
{

Tr.style.fontWeight =``普通'';
//Tr.className =& quot; GlobalFont& quot ;;
Tr.style.color ='''';
Tr.style.backgroundColor =``白色'';

TdLeft.style.borderTopColor =''#c0c3c8'';
TdLeft.style.borderBottomColor =''#c0c3c8'';
TdLeft.style.borderLeftColor =''#c0c3c8'';
TdLeft.style.backgroundColor =''#c0c3c8'';

TdCenter.style.borderTopColor =``白色'';
TdCenter.style.borderBottomColor =``白色'';

TdRight.style.borderTopColor =``白色'';
TdRight.style.borderBottomColor =``白色'';
TdRight.style.borderRightColor =``白色'';
}

//用于连接事件处理程序的专用方法.
var WireUpEventHandler = function(Target，Event，Listener)
{
//注册事件.
if(Target.addEventListener)
Target.addEventListener(Event，Listener，false);
否则if(Target.attachEvent)
Target.attachEvent(``on''+ Event，Listener);
其他
{
事件=``开''+事件;
Target.Event =侦听器；
}

//通过对象文字收集事件信息.
var EVENT = {目标:目标，事件:事件，听众:听众}
EventHandlers.push(EVENT);
}

//用于分离事件处理程序的专用方法.
var DetachEventHandler = function(EVENT)
{
if(EVENT.Target.removeEventListener)
EVENT.Target.removeEventListener(EVENT.Event，EVENT.Listener，false);
否则if(EVENT.Target.detachEvent)
EVENT.Target.detachEvent(``on''+ EVENT.Event，EVENT.Listener);
其他
{
EVENT.Event =``开''+ EVENT.Event;
EVENT.Target.EVENT.Event = null;
}
}

//在文档上添加上下文菜单div.
document.body.appendChild(ContextMenuDiv);

//注册事件.
WireUpEventHandler(Base，``click''，this.Hide);
WireUpEventHandler(ContextMenuDiv，``contextmenu''，function(){return false;});
}</pre>

Hi
Not that one...

How can i create SubMenu inside the code >> In below.


<pre lang="cs">function CustomContextMenu(Arguments)
{
//Public Properties;
this.Version = ''2.1'';

//Global variables.
var Base = Arguments.Base ? Arguments.Base : document.documentElement;
var Width = Arguments.Width ? Arguments.Width : 200;
//var FontColor = Arguments.FontColor ? Arguments.FontColor : ''black'';
var HoverFontColor = Arguments.HoverFontColor ? Arguments.HoverFontColor : ''white'';
var HoverBackgroundColor = Arguments.HoverBackgroundColor ? Arguments.HoverBackgroundColor : ''#2257D5'';
var HoverBorderColor = Arguments.HoverBorderColor ? Arguments.HoverBorderColor : ''orange'';
var ClickEventListener = Arguments.ClickEventListener ? Arguments.ClickEventListener : function(){ return false; };

var ContextMenuDiv = document.createElement(''div'');
var ContextMenuTable = document.createElement(''table'');
var Index = 0;
var EventHandlers = new Array();

//Style Context Menu div.
ContextMenuDiv.id = ''ContextMenu'';
ContextMenuDiv.style.position = ''absolute'';
ContextMenuDiv.style.backgroundColor = ''white'';
ContextMenuDiv.style.border = ''2px outset white'';
ContextMenuDiv.style.verticalAlign = ''top'';
ContextMenuDiv.style.textAlign = ''left'';
ContextMenuDiv.style.visibility = ''hidden'';
ContextMenuDiv.style.width = (Width + 11) + ''px'';
//ContextMenuDiv.className=&quot;GlobalFont&quot;;
//Styles Context Menu table.
ContextMenuTable.id = ''ContextMenuTable'';
ContextMenuTable.style.width = (Width + 10) + ''px'';
ContextMenuTable.border = 0;
ContextMenuTable.cellPadding = 0;
ContextMenuTable.cellSpacing = 0;

//Append Context Menu table into Context Menu div.
ContextMenuDiv.appendChild(ContextMenuTable);

//Public method for adding Context Menu Items.
this.AddItem = function(imgSrc, itemText, isDisabled, commandName)
{
var Tr = ContextMenuTable.insertRow(Index++);
//Tr.style.fontFamily = ''Verdana'';
Tr.style.fontSize = ''8pt'';
Tr.style.fontWeight = ''normal'';
Tr.style.backgroundColor = ''white'';
//Tr.style.color = isDisabled ? ''gray'' : FontColor;
//Tr.className = &quot;GlobalFont&quot;;
Tr.style.cursor = ''default'';

var TdLeft = Tr.insertCell(0);
TdLeft.style.width = 25 + ''px'';
TdLeft.style.height = 20 + ''px'';
TdLeft.style.textAlign = ''center'';
TdLeft.style.verticalAlign = ''middle'';
TdLeft.style.borderTop = ''2px solid #c0c3c8'';
TdLeft.style.borderBottom = ''2px solid #c0c3c8'';
TdLeft.style.borderLeft = ''2px solid #c0c3c8'';
TdLeft.style.backgroundColor = ''#c0c3c8'';

var TdCenter = Tr.insertCell(1);
TdCenter.style.width = 10 + ''px'';
TdCenter.style.height = 20 + ''px'';
TdCenter.innerHTML = ''&amp;nbsp;'';
TdCenter.style.borderTop = ''2px solid white'';
TdCenter.style.borderBottom = ''2px solid white'';

var TdRight = Tr.insertCell(2);
TdRight.style.width = (Width - 25) + ''px'';
TdRight.style.height = 20 + ''px'';
TdRight.style.textAlign = ''left'';
TdRight.style.verticalAlign = ''middle'';
TdRight.style.fontStyle = isDisabled ? ''italic'' : ''normal'';
TdRight.innerHTML = itemText ? itemText : ''&amp;nbsp;'';
TdRight.style.borderTop = ''2px solid white'';
TdRight.style.borderBottom = ''2px solid white'';
TdRight.style.borderRight = ''2px solid white'';

if(imgSrc)
{
var Img = new Image();
Img.id = ''Img'';
Img.src = imgSrc;
Img.style.width = 25 + ''px'';
Img.style.height = 20 + ''px'';
Img.disabled = isDisabled;

TdLeft.appendChild(Img);
}
else
TdLeft.innerHTML = ''&amp;nbsp;'';

//Register events.
if(!isDisabled)
{
WireUpEventHandler(Tr, ''click'', function(){ ClickEventListener(Tr, {CommandName: commandName, Text: itemText, IsDisabled: isDisabled, ImageUrl: Img ? Img.src : ''''}) });
WireUpEventHandler(Tr, ''mouseover'', function(){ MouseOver(Tr, TdLeft, TdCenter, TdRight); });
WireUpEventHandler(Tr, ''mouseout'', function(){ MouseOut(Tr, TdLeft, TdCenter, TdRight); });
}
else
{
WireUpEventHandler(Tr, ''click'', function(){ return false; });
WireUpEventHandler(TdRight, ''selectstart'', function(){ return false; });
}
}

//Public method for adding Separator Menu Items.
this.AddSeparatorItem = function()
{
var Tr = ContextMenuTable.insertRow(Index++);
Tr.style.cursor = ''default'';

var TdLeft = Tr.insertCell(0);
TdLeft.style.width = 25 + ''px'';
TdLeft.style.height = ''1px'';
TdLeft.style.backgroundColor = ''#c0c3c8'';

var TdCenter = Tr.insertCell(1);
TdCenter.style.width = 10 + ''px'';
TdCenter.style.height = ''1px'';
TdCenter.style.backgroundColor = ''white'';

var TdRight = Tr.insertCell(2);
TdRight.style.width = (Width - 25) + ''px'';
TdRight.style.height = ''1px'';
TdRight.style.backgroundColor = ''gray'';
}

//Public method for displaying Context Menu.
this.Display = function(e, d, row) {

e = e ? e : window.event;

var xLeft = e.clientX;
if (xLeft + ContextMenuDiv.offsetWidth &gt; Base.offsetWidth)
xLeft = Base.offsetWidth - ContextMenuDiv.offsetWidth;

var yTop = e.clientY;
if (yTop + ContextMenuDiv.offsetHeight &gt; Base.clientHeight)
yTop = Base.clientHeight - ContextMenuDiv.offsetHeight;

ContextMenuDiv.style.visibility = ''hidden'';
ContextMenuDiv.style.left = xLeft + ''px'';
ContextMenuDiv.style.top = yTop + ''px'';
ContextMenuDiv.style.visibility = ''visible'';

//parseInt(Numnerdocument.activeElement.title, 10)
//alert(Number(document.activeElement.title));
document.getElementById(&quot;hidddenDate&quot;).value = d;
document.getElementById(&quot;hiddenRow&quot;).value = row;
document.getElementById(&quot;hiddenTitle&quot;).value = document.activeElement.title;


return false;
}

//Public method to hide context Menu.
this.Hide = function()
{
ContextMenuDiv.style.visibility=''hidden'';
}

//Public method Dispose.
this.Dispose = function()
{
while(EventHandlers.length &gt; 0)
DetachEventHandler(EventHandlers.pop());

document.body.removeChild(ContextMenuDiv);
}

//Public method GetTotalItems.
this.GetTotalItems = function()
{
return ContextMenuTable.getElementsByTagName(''tr'').length;
}

//Mouseover event handler
var MouseOver = function(Tr, TdLeft, TdCenter, TdRight)
{

//Tr.style.fontWeight = ''bold'';
Tr.style.color = HoverFontColor;
Tr.style.backgroundColor = HoverBackgroundColor;

TdLeft.style.borderTopColor = HoverBorderColor;
TdLeft.style.borderBottomColor = HoverBorderColor;
TdLeft.style.borderLeftColor = HoverBorderColor;
TdLeft.style.backgroundColor = HoverBackgroundColor;

TdCenter.style.borderTopColor = HoverBorderColor;
TdCenter.style.borderBottomColor = HoverBorderColor;

TdRight.style.borderTopColor = HoverBorderColor;
TdRight.style.borderBottomColor = HoverBorderColor;
TdRight.style.borderRightColor = HoverBorderColor;



}

//Mouseout event handler
var MouseOut = function(Tr, TdLeft, TdCenter, TdRight)
{

Tr.style.fontWeight = ''normal'';
//Tr.className = &quot;GlobalFont&quot;;
Tr.style.color = '''';
Tr.style.backgroundColor = ''white'';

TdLeft.style.borderTopColor = ''#c0c3c8'';
TdLeft.style.borderBottomColor = ''#c0c3c8'';
TdLeft.style.borderLeftColor = ''#c0c3c8'';
TdLeft.style.backgroundColor = ''#c0c3c8'';

TdCenter.style.borderTopColor = ''white'';
TdCenter.style.borderBottomColor = ''white'';

TdRight.style.borderTopColor = ''white'';
TdRight.style.borderBottomColor = ''white'';
TdRight.style.borderRightColor = ''white'';
}

//Private method to wire up event handlers.
var WireUpEventHandler = function(Target, Event, Listener)
{
//Register event.
if(Target.addEventListener)
Target.addEventListener(Event, Listener, false);
else if(Target.attachEvent)
Target.attachEvent(''on'' + Event, Listener);
else
{
Event = ''on'' + Event;
Target.Event = Listener;
}

//Collect event information through object literal.
var EVENT = { Target: Target, Event: Event, Listener: Listener }
EventHandlers.push(EVENT);
}

//Private method to detach event handlers.
var DetachEventHandler = function(EVENT)
{
if(EVENT.Target.removeEventListener)
EVENT.Target.removeEventListener(EVENT.Event, EVENT.Listener, false);
else if(EVENT.Target.detachEvent)
EVENT.Target.detachEvent(''on'' + EVENT.Event, EVENT.Listener);
else
{
EVENT.Event = ''on'' + EVENT.Event;
EVENT.Target.EVENT.Event = null;
}
}

//Add Context Menu div on the document.
document.body.appendChild(ContextMenuDiv);

//Register events.
WireUpEventHandler(Base, ''click'', this.Hide);
WireUpEventHandler(ContextMenuDiv, ''contextmenu'', function(){ return false; });
}</pre>

这篇关于ContextSubMenu的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！