为jeesite框架左侧菜单添加未读条数
为jeesite框架左侧菜单添加未读条数
旺仔没馒头 发表于2个月前
为jeesite框架左侧菜单添加未读条数
  • 发表于 2个月前
  • 阅读 5
  • 收藏 0
  • 点赞 0
  • 评论 0

        在做项目时,有一个功能是在左侧菜单上添加一个未读条数,由于项目用到是jeesite框架,其页面內容的显示是在iframe中,因此,大致的实现思路是,在iframe页面中,找到父级元素中对应的菜单,为其添加一个未读条数就行。

以下是添加未读条数的主要js,因为项目要兼容到ie8,因此对ie9以下的浏览器做了兼容处理

var leftMenuNum = {
    addNum: function (num, numColor) {
        var color = numColor == undefined ? "#ff0000" : numColor;
        var count = num == undefined ? 0 : num;
        var endNumReg = null;
        if (this.isLessIE9()) {
            endNumReg = new RegExp("\<FONT color=(.*)>[0-9]+</FONT>");
        } else {
            endNumReg = new RegExp("\<font color=(.*)>[0-9]+</font>");
        }
        var content = "<font color=\"" + color + "\">" + count + "</font>";
        var appendContent = "[" + content + "]";
        var $jerichotab = $("#jerichotab", window.parent.document);
        var $topTab = $jerichotab.children("div[class='tab_pages']").children("div[class='tabs']").find("li[class='jericho_tabs tab_selected']");
        var topTabId = $topTab.attr("id");
        var menuTabIndex = null;
        var $leftMenu = null;
        var $menu = $("li[class='active']", window.parent.document);
        if (topTabId == null || topTabId == undefined || topTabId == '') {
            $leftMenu = $menu.children('a');
        } else {
            menuTabIndex = topTabId.substring(topTabId.indexOf('_') + 1, topTabId.length + 1);
            $leftMenu = $menu.children('a[jerichotabindex=' + menuTabIndex + ']');
        }
        var menuContent = $leftMenu.html();
        if (!endNumReg.test(menuContent)) {
            $leftMenu.html('');
            $leftMenu.html(menuContent + appendContent);
        } else {
            var newContent = menuContent.replace(endNumReg, content);
            $leftMenu.html(newContent);
        }
    },
    isLessIE9: function () {
        var browser = navigator.appName
        var b_version = navigator.appVersion
        var version = b_version.split(";");
        var trim_Version = version[1].replace(/[ ]/g, "");
        if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE6.0") {
            return true;
        }
        else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE7.0") {
            return true;
        }
        else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE8.0") {
            return true;
        }
        else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE9.0") {
            return false;
        }
        return false;
    }
}

        在想要添加左侧未读条数的页面,添加如下代码,第一个参数为显示的条数,第二个参数是数字的颜色,默认的条数为0,颜色为红色

leftMenuNum.addNum(10,"#000");

以下便是页面效果:

标签: JeeSite
共有 人打赏支持
粉丝 2
博文 10
码字总数 7962
×
旺仔没馒头
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: