マルチレベルのディレクトリを備えた完全にカスタマイズされた Web ページの右クリック メニューの JS 実装_JavaScript スキル

この記事の例では、マルチレベルのディレクトリを使用して完全にカスタマイズされた Web ページの右クリック メニューを実装するための js メソッドについて説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

これは非常に優れた Web マウス機能です。このコードは、Web ページ上のマウスの右クリック メニューを制御でき、複数レベルのディレクトリを表示できます。

コードをコピー コードは次のとおりです:

<頭>



<スクリプトタイプ="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 }
};



右クリック メニューをカスタマイズするには、ページを右クリックして効果を確認してください。

• JavaScript の学習


• 
  スクリプトハウス
  
  
  
  • ウェブ特殊効果原理の分析
  
  
  • ユーザー操作に対する応答
  
  
  • プロンプトボックス効果
  
  
  • イベント駆動型
  
  
  • 要素の属性操作
  
  
  
  


• 
  www.jb51.net
  
  
  
  • Web ページの背景色を変更します
  
  
  • 関数パラメータ
  
  
  • 再利用性の高い関数の作成
  
  
  • 126 個のメールボックスすべてを選択した場合の効果
  
  
  • ループおよびトラバーサル操作
  
  
  
  


• 
  レッスン 3
  
  
  
  • 
    JavaScript の構成
    
    
    
    • ECMAScript
    
    
    • DOM
    
    
    • BOM
    
    
    • JavaScript 互換性ソース
    
    
    
    
  
  
  • JavaScript の場所、メリットとデメリット
  
  
  • 変数、型、typeof、データ型変換、変数スコープ
  
  
  • 
    閉店
    
    
    
    • クロージャとは
    
    
    • 簡単なアプリケーション
    
    
    • 閉鎖のデメリット
    
    
    
    
  
  
  • オペレーター
  
  
  • プログラム フロー制御
  
  
  • 
    タイマーの使い方
    
    
    
    • setInterval
    
    
    • setTimeout
    
    
    
    
  
  
  
  

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。