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

WBOY
リリース: 2016-05-16 16:12:04
オリジナル
1390 人が閲覧しました

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

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

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


<頭>

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 }
};



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



  • JavaScript の学習


  • スクリプトハウス

    • ウェブ特殊効果原理の分析

    • ユーザー操作に対する応答

    • プロンプトボックス効果

    • イベント駆動型

    • 要素の属性操作




  • www.jb51.net

    • Web ページの背景色を変更します

    • 関数パラメータ

    • 再利用性の高い関数の作成

    • 126 個のメールボックスすべてを選択した場合の効果

    • ループおよびトラバーサル操作




  • レッスン 3


    • JavaScript の構成

      • ECMAScript

      • DOM

      • BOM

      • JavaScript 互換性ソース



    • JavaScript の場所、メリットとデメリット

    • 変数、型、typeof、データ型変換、変数スコープ


    • 閉店

      • クロージャとは

      • 簡単なアプリケーション

      • 閉鎖のデメリット



    • オペレーター

    • プログラム フロー制御


    • タイマーの使い方

      • setInterval

      • setTimeout








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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!