by zhangxinxu 2011-05-30 17:24

jQuery smartMenu插件实现类似QQ邮箱自定义右键菜单效果

发件人 主题 时间
MiFan.me 欢迎注册Mifan.me! 5月27日
豆瓣网 请激活您的账号,完成注册 5月26日
SlideShare
Follow-up comment on 'ss-2670845'
5月26日
点点网 欢迎来到点点网 5月26日
zhangxinxu [张鑫旭-鑫空间-鑫生活]请审核:“我曾经喜欢的一个姑娘要结婚了” 5月26日
-宏达 回复:到你了,写写吧 5月24日

JS相关代码

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="/study/js/jquery-smartMenu.js"></script>
<script>
var chkSingle = $("th input"), chkGroup = $("td input");
//选中样式切换
var funTrStyle = function() {
    chkGroup.each(function() {
        if ($(this).attr("checked")) {
            $(this).parents("tr").addClass("bg");    
        } else {
            $(this).parents("tr").removeClass("bg");    
        }
    });
}, funTrGet = function() {
    return $("td input:checked").parents("tr");
};
//全反选
chkSingle.bind("click", function() {
    if ($(this).attr("checked")) {
        chkGroup.attr("checked", "checked");
    } else {
        chkGroup.attr("checked", "");
    }
    funTrStyle();    
});
chkGroup.bind("click", funTrStyle);
funTrStyle();

//自定义右键上下文
//数据
var objDelete = {
    text: "删除",
    func: function() {
        funTrGet().remove();
    }    
}, objRubbish = {
    text: "这是垃圾邮件",
    func: function() {
        funTrGet().hide();
    }    
}, objRead = {
    text: "标记为已读",
    func: function() {
        funTrGet().css("font-weight", "400");
    }
}, objUnRead = {
    text: "标记为未读",
    func: function() {
        funTrGet().css("font-weight", "700");
    }    
}, objSend = {
    text: "移动到",
    data: [
        [{
            text: "收件箱",
            func: function() {
                funTrGet().hide();
            }
        }, {
            text: "已发送",
            func: function() {
                funTrGet().hide();
            }
        }, {
            text: "QQ邮箱订阅",
            func: function() {
                funTrGet().hide();
            }
        }], [{
            text: "新建文件夹",
            func: function() {
                alert("模拟不了,弹出个框框意思下");    
            }
        }]
    ]
};
var mailMenuData = [
    [objDelete, objRubbish]
];

//绑定
$("tr").smartMenu(mailMenuData, {
    name: "mail",
    //根据已读与否状态显示不同的上下文菜单
    beforeShow: function() {
        //右键选中当前行  
        $(this).find("input").attr("checked", "checked");    
        funTrStyle();
        
        //动态数据,及时清除
        $.smartMenu.remove();
        
        //确定显示数据 - 主要是已读与未读
        var numTrBold = 0, numTrNormal = 0, eleTr = funTrGet();
        eleTr.each(function() {
            if ($(this).css("font-weight") === "700") {
                numTrBold++;    
            } else {
                numTrNormal++;    
            }
        });
        if (eleTr.size() === numTrBold) {
            //全是粗体
            mailMenuData[1] = [objRead, objSend];
        } else if (eleTr.size() === numTrNormal) {
            //全是正常
            mailMenuData[1] = [objUnRead, objSend];
        } else {
            //混杂
            mailMenuData[1] = [objRead, objUnRead, objSend];
        }
    }
});
</script>