この記事の例では、マルチレベルのディレクトリを使用して完全にカスタマイズされた Web ページの右クリック メニューを実装するための js メソッドについて説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。
<頭>
JS自定义网页多级导航菜单
<スクリプトタイプ="text/javascript">
var getOffset = {
上: 関数 (obj) {
return obj.offsetTop (obj.offsetParent ? argument.callee(obj.offsetParent) : 0)
}、
左: 関数 (obj) {
return obj.offsetLeft (obj.offsetParent ? argument.callee(obj.offsetParent) : 0)
}
};
window.onload = function ()
{
var oMenu = document.getElementById("rightMenu");
var aUl = oMenu.getElementsByTagName("ul");
var aLi = oMenu.getElementsByTagName("li");
var showTimer = HideTimer = null;
var i = 0;
var maxWidth = maxHeight = 0;
var aDoc = [document.documentElement.offsetWidth, document.documentElement.offsetHeight];
oMenu.style.display = "なし";
for (i = 0; i
{
// 含まれる子菜单のli加上箭头
aLi[i].getElementsByTagName("ul")[0] && (aLi[i].className = "sub");
// ネズミ标移入
aLi[i].onmouseover = function ()
{
var oThis = this;
var oUl = oThis.getElementsByTagName("ul");
// ネズミ标移入样式
oThis.className = "アクティブ";
//显示子菜单
if (oUl[0])
{
clearTimeout(hideTimer);
showTimer = setTimeout(function ()
{
for (i = 0; i
{
oThis.parentNode.children[i].getElementsByTagName("ul")[0] &&
(oThis.parentNode.children[i].getElementsByTagName("ul")[0].style.display = "none");
}
oUl[0].style.display = "ブロック";
oUl[0].style.top = oThis.offsetTop "px";
oUl[0].style.left = oThis.offsetWidth "px";
setWidth(oUl[0]);
//最大显示范围
maxWidth = aDoc[0] - oUl[0].offsetWidth;
maxHeight = aDoc[1] - oUl[0].offsetHeight;
// 溢れ出し防止
maxWidth
最大高さ
},300);
}
};
// ネズミ标移出
aLi[i].onmouseout = function ()
{
var oThis = this;
var oUl = oThis.getElementsByTagName("ul");
// ネズミ标移出样式
oThis.className = oThis.className.replace(/s?active/,"");
clearTimeout(showTimer);
HideTimer = setTimeout(function ()
{
for (i = 0; i
{
oThis.parentNode.children[i].getElementsByTagName("ul")[0] &&
(oThis.parentNode.children[i].getElementsByTagName("ul")[0].style.display = "none");
}
},300);
};
}
//自定义右键菜单
document.oncontextmenu = 関数 (イベント)
{
var イベント = イベント || window.event;
oMenu.style.display = "ブロック";
oMenu.style.top = events.clientY "px";
oMenu.style.left = events.clientX "px";
setWidth(aUl[0]);
//最大显示范围
maxWidth = aDoc[0] - oMenu.offsetWidth;
maxHeight = aDoc[1] - oMenu.offsetHeight;
//菜单流出防止
oMenu.offsetTop > maxHeight && (oMenu.style.top = maxHeight "px");
oMenu.offsetLeft > maxWidth && (oMenu.style.left = maxWidth "px");
false を返します;
};
//点击隐藏菜单
document.onclick = function ()
{
oMenu.style.display = "なし"
};
//取li中最大の宽度、并赋给同级すべてli
関数 setWidth(obj)
{
maxWidth = 0;
for (i = 0; i
{
var oLi = obj.children[i];
var iWidth = oLi.clientWidth - parseInt(oLi.currentStyle ? oLi.currentStyle["paddingLeft"] : getComputedStyle(oLi,null)["paddingLeft"]) * 2
if (iWidth > maxWidth) maxWidth = iWidth;
}
for (i = 0; i
}
};
右クリック メニューをカスタマイズするには、ページを右クリックして効果を確認してください。
