Font Awesome圖標使用 Web右鍵多級菜單

素颜马尾好姑娘i 2022-05-30 09:29 188阅读 0赞

Font Awesome圖標包含六七百個圖標,圖標豐富

Font Awesome圖標就是特殊的文字

可以隨意調整圖標顏色和圖標大小

加入引用

本地使用添加引用

注意webfonts文件夾同CSS文件夾同級

JS已封裝使用方便,只需要Json數據就可以在html頁面顯示

[Demo下載][Demo]

https://download.csdn.net/download/losedguest/10277118

效果如下

.正常顯示效果

![70][]

節點展開的正常顯示

![70 1][]

右邊距不夠顯示時的顯示在左邊

![70 2][]

主要代碼如下

LexinMutiMenus.js

/*
 LexinMutiMenus 右鍵多級菜單
 Buider Losedguest
 version: LexinMutiMenus 20180309
 
 */
 (function () {
 //多級菜單控件
 window.LexinMutiMenus = {};
 //添加自己的屬性
 LexinMutiMenus.Commands = {
 ///創建多級菜單
 CreateMemnu: function (_MenuJson) {
 var _tempMenuDiv = document.createElement("div");
 _tempMenuDiv.setAttribute("class", "LexinMutiMenus");
 var _tempSubHtml = "";
 var _tempLen = _MenuJson.length;
 for (var i = 0; i < _tempLen; i++)
 {
 var _tempJson = _MenuJson[i];
 var _tempSubUL = "";
 if (_tempJson.subjson && _tempJson.subjson.length > 0)
 {
 _tempSubUL = this.CreateSubMemnu(_tempJson.subjson);
 }
 if (_tempSubUL) {
 _tempSubHtml += "<li class=\"Menus_Items Menus_Items_Sub\" data=\"" + _tempJson.id + "\"> " + _tempJson.text + "" + _tempSubUL + " </li>";
 }
 else {
 _tempSubHtml += "<li class=\"Menus_Items\" data=\"" + _tempJson.id + "\"> " + _tempJson.text + " </li>";
 }
 
 }
 ///LexinMutiMenu_Fade透明的層,LexinMutiMenu為數據層
 $(_tempMenuDiv).append("<div class=\"LexinMutiMenu_Fade\"></div><div class=\"LexinMutiMenu\"><ul>" + _tempSubHtml + "</ul></div>");
 return _tempMenuDiv;
 },
 ///遞歸遍歷Json展開
 CreateSubMemnu: function (_MenuSubJson)
 {
 var _tempLen = _MenuSubJson.length;
 var _tempSubHtml = "";
 for (var i = 0; i < _tempLen; i++) {
 var _tempJson = _MenuSubJson[i];
 var _tempSubUL = "";
 if (_tempJson.subjson && _tempJson.subjson.length > 0) {
 _tempSubUL = this.CreateSubMemnu(_tempJson.subjson);
 }
 if (_tempSubUL) {
 _tempSubHtml += "<li class=\"Menus_Items Menus_Items_Sub\" data=\"" + _tempJson.id + "\"> " + _tempJson.text + "" + _tempSubUL + " </li>";
 }
 else {
 _tempSubHtml += "<li class=\"Menus_Items\" data=\"" + _tempJson.id + "\"> " + _tempJson.text + " </li>";
 }
 }
 return "<ul>" + _tempSubHtml + "</ul>";
 }
 }
 ///_MenuJson數據結構{id:aaa,text:aaaaa,subjson:{id:bbb,text:bbbb,subjson:{}}},顯示位置_Menu_X,_Menu_Y,_MenuCallback單擊回執函數
 LexinMutiMenus.Show = function (_MenuJson, _Menu_X, _Menu_Y, _MenuCallback) {
 $("body").find(".LexinMutiMenus").remove();
 //做延時關閉
 var _tempShowTimer = _tempHideTimer = null;
 var _tempMaxWidth = _tempMaxHeight = 0;//最大可顯示的寬度和高度
 var _tempClientWidth = document.documentElement.offsetWidth;
 var _tempClientHeight = document.documentElement.offsetHeight;
 //顯示菜單不為空的情況下
 if (_MenuJson && _MenuJson.length > 0)
 {
 var _tempMenus = LexinMutiMenus.Commands.CreateMemnu(_MenuJson); 
 $("body").append(_tempMenus.outerHTML);
 var _tempMutiMenu = $("body").find(".LexinMutiMenu")[0]
 _tempMutiMenu.style.left = _Menu_X + "px";
 _tempMutiMenu.style.top = _Menu_Y + "px";
 
 //最大显示范围
 _tempMaxWidth = _tempClientWidth - _tempMutiMenu.offsetWidth;
 _tempMaxHeight = _tempClientHeight - _tempMutiMenu.offsetHeight;
 
 //防止菜单溢出
 _tempMutiMenu.offsetTop > _tempMaxHeight && (_tempMutiMenu.style.top = _tempMaxHeight + "px");
 _tempMutiMenu.offsetLeft > _tempMaxWidth && (_tempMutiMenu.style.left = _tempMaxWidth + "px");
 
 $("body").find(".LexinMutiMenus li").click(function () {
 var _tempDom = $(this);
 var _tempData = _tempDom.attr("data");
 if (_MenuCallback && _tempData) {
 _MenuCallback(_tempData);
 }
 $("body").find(".LexinMutiMenus").remove();//單擊完後移除
 var event = arguments.callee.caller.arguments[0] || window.event;
 event.stopPropagation(); // 阻止事件冒泡
 });
 $("body").find(".LexinMutiMenu_Fade").click(function () {
 $("body").find(".LexinMutiMenus").remove();
 var event = arguments.callee.caller.arguments[0] || window.event;
 event.stopPropagation(); // 阻止事件冒泡
 });
 
 //相對位置轉化為絕對位置
 var getOffset = {
 top: function (obj) {
 return obj.offsetTop + (obj.offsetParent ? arguments.callee(obj.offsetParent) : 0)
 },
 left: function (obj) {
 return obj.offsetLeft + (obj.offsetParent ? arguments.callee(obj.offsetParent) : 0)
 }
 };
 
 $("body").find(".Menus_Items").mouseover(function () {
 var _tempDom= $(this);
 _tempDom.addClass("active");
 if (!_tempDom.hasClass("Menus_Items_Sub"))
 {
 _tempDom.siblings(".Menus_Items_Sub").find("ul").hide();
 return;
 }
 clearTimeout(_tempHideTimer);
 _tempShowTimer = setTimeout(function () {
 //_tempDom兄弟元素的UL全部隱藏
 _tempDom.siblings(".Menus_Items_Sub").find("ul").hide();
 if (_tempDom.find("ul").length > 0) {
 var _tempMutiMenu = _tempDom.find("ul")[0];
 _tempMutiMenu.style.display = "block";
 _tempMutiMenu.style.top = _tempDom[0].offsetTop + "px";
 _tempMutiMenu.style.left = _tempDom[0].offsetWidth + "px";
 
 //最大显示范围
 _tempMaxWidth = _tempClientWidth - _tempMutiMenu.offsetWidth;
 _tempMaxHeight = _tempClientHeight - _tempMutiMenu.offsetHeight;
 
 //防止溢出,將左邊距向前偏移自己的寬度,將上邊距向上偏移自己的高度-當前的高度
 _tempMaxWidth < getOffset.left(_tempMutiMenu) && (_tempMutiMenu.style.left = -_tempMutiMenu.clientWidth + "px");
 _tempMaxHeight < getOffset.top(_tempMutiMenu) && (_tempMutiMenu.style.top = -_tempMutiMenu.clientHeight + _tempDom[0].offsetTop + _tempDom[0].clientHeight + "px")
 }
 }, 300);
 });
 $("body").find(".Menus_Items").mouseout(function () {
 var _tempDom = $(this);
 _tempDom.removeClass("active"); 
 //clearTimeout(_tempShowTimer);
 //_tempHideTimer = setTimeout(function () {
 // //_tempDom.find("ul").hide();
 // console.log(_tempDom.attr("data"));
 //}, 300);
 
 });
 
 }
 
 }
 })()

.LexinMutiMenus .LexinMutiMenu_Fade{
    z-index: 9997;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: rgb(211, 211, 211);
    opacity: 0;
    }
    .LexinMutiMenus .LexinMutiMenu {
    z-index: 9998;
    position: absolute;
    }
    .LexinMutiMenus .LexinMutiMenu ul {
    float: left;
    border: 1px solid #979797;
    background: #f1f1f1;
    padding: 2px;
    box-shadow: 2px 2px 2px rgba(0,0,0,.6);
    list-style-type: none;
    }
    .LexinMutiMenus .LexinMutiMenu  ul li {
    border: 1px solid;
    border-color:transparent;
    height: 24px;
    cursor: pointer;
    line-height: 24px;
    white-space: nowrap;
    }
        .LexinMutiMenus .LexinMutiMenu ul li .Menus_text {
        display:inline-block;
        padding-left:5px;
        text-align:left;
        width: calc(100% - 45px);
        margin-right: 10px;
        }
    .LexinMutiMenus .LexinMutiMenu ul li .Menu_right {
        width:20px;
         display:inline-block;    
    }
    .LexinMutiMenus .LexinMutiMenu ul li .Menu_left {
        width:20px;
         display:inline-block;
          border-right:1px dotted;
    }
    .LexinMutiMenus .LexinMutiMenu ul li.Menus_Items_Sub>.Menu_right:before{
    font-size: 16px;
    font-weight: 900;
    font-family: Font Awesome\ 5 Free;
    content: "\f105";
    padding-right:2px;
    font-style: normal;
    }
    .LexinMutiMenus .LexinMutiMenu  ul li.active {
    border-radius: 3px;
    border: 1px solid #aecff7;
    height: 24px;
    cursor: pointer;
    line-height: 24px;
    }
    .LexinMutiMenus .LexinMutiMenu  ul ul {
    display: none;
    position: absolute;
    }
    
    .LexinMutiMenus .LexinMutiMenu ul li .folder::before{
    font-size: 16px;
    font-weight: 900;
    font-family: Font Awesome\ 5 Free;
    content: "\f07c";
    color:#f39304;
    font-style: normal;
    }
    .LexinMutiMenus .LexinMutiMenu ul li .tag::before{
    font-size: 16px;
    font-weight: 900;
    font-family: Font Awesome\ 5 Free;
    content: "\f02b";
    color:#f39304;
    font-style: normal;
    }
    .LexinMutiMenus .LexinMutiMenu ul li .read::before{
    font-size: 16px;
    font-weight: 900;
    font-family: Font Awesome\ 5 Free;
    content: "\f2b6";
    color:#f39304;
    font-style: normal;
    }
    .LexinMutiMenus .LexinMutiMenu ul li .unread::before{
    font-size: 16px;
    font-weight: 900;
    font-family: Font Awesome\ 5 Free;
    content: "\f0e0";
    color:#f39304;
    font-style: normal;
    }
    .LexinMutiMenus .LexinMutiMenu ul li .download::before{
    font-size: 16px;
    font-weight: 900;
    font-family: Font Awesome\ 5 Free;
    content: "\f019";
    color:#f39304;
    font-style: normal;
    }
    .LexinMutiMenus .LexinMutiMenu ul li .send::before{
    font-size: 16px;
    font-weight: 900;
    font-family: Font Awesome\ 5 Free;
    content: "\f1d8";
    color:#f39304;
    font-style: normal;
    }
    .LexinMutiMenus .LexinMutiMenu ul li .reply::before{
    font-size: 16px;
    font-weight: 900;
    font-family: Font Awesome\ 5 Free;
    content: "\f3e5";
    color:#f39304;
    font-style: normal;
    }
    .LexinMutiMenus .LexinMutiMenu ul li .reply_all::before{
    font-size: 16px;
    font-weight: 900;
    font-family: Font Awesome\ 5 Free;
    content: "\f122";
    color:#f39304;
    font-style: normal;
    }
    .LexinMutiMenus .LexinMutiMenu ul li .forward::before{
    font-size: 16px;
    font-weight: 900;
    font-family: Font Awesome\ 5 Free;
    content: "\f064";
    color:#f39304;
    font-style: normal;
    }
    .LexinMutiMenus .LexinMutiMenu ul li .top::before{
    font-size: 16px;
    font-weight: 900;
    font-family: Font Awesome\ 5 Free;
    content: "\f062";
    color:#f39304;
    font-style: normal;
    }
    .LexinMutiMenus .LexinMutiMenu ul li .trash::before{
    font-size: 16px;
    font-weight: 900;
    font-family: Font Awesome\ 5 Free;
    content: "\f1f8";
    color:#f39304;
    font-style: normal;
    }

[Demo]: https://download.csdn.net/download/losedguest/10277118
[70]: /images/20220530/b65002ef56254f32b7cc2ccca004edc5.png
[70 1]: /images/20220530/83fc66ae1046473fa5be64e2d9ec54f4.png
[70 2]: /images/20220530/a4663c0b7a4146828767fd2a67f0a297.png