网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料:

 

标题 基于JavaScript实现智能右键菜单
内容
    通过本文给大家介绍智能右键菜单,需要引入的文件再文末会给出,先给大家展示下代码:
    具体代码如下所示:
    var cityArray = new Array();
    cityArray.push("北京");
    cityArray.push("上海");
    //设置表头的鼠标右击事件
    $('th').mousedown(function(e){
    var selected = e.target.innerHTML;
    //3表示右键
    if(e.which==3){
    if(selected=="订票类型"){
    var opertion ={
    name : "订票类型"
    };
    var data = [[{
    text:'出票',
    func:function(){
    alert("出票");
    }
    }],[{
    text:'留票',
    func:function(){
    alert("留票");
    }
    }],[{
    text:'改签',
    func:function(){
    alert("改签");
    }
    }],[{
    text:'退票',
    func:function(){
    alert("退票");
    }
    }],[{
    text:'全部',
    func:function(){
    alert("全部");
    }
    }]];
    $(this).smartMenu(data,opertion);
    }else if(selected=="出发城市"){
    var opertion ={
    name : "出发城市"
    };
    var data = [];
    for(var i=0;i<cityArray.length;i++){
    //使用闭包
    (function(i){
    func = function(){
    alert(cityArray[i]);
    }
    })(i);
    var obj = {
    text:cityArray[i],
    func:func
    };
    var cArray = new Array();
    cArray.push(obj);
    data.push(cArray);
    }
    var other = {
    text:"全部",
    func:function(){
    alert("全部");
    }
    }
    var otherArray = new Array();
    otherArray.push(other);
    data.push(otherArray);
    $(this).smartMenu(data,opertion);
    }
    }
    return false;//阻止链接跳转
    });
    $('th') 指定加右键的标签,根据实际来确定 我这里是加在表格的表头上,所以是th标签
    e.which = 3 表示是右键
    这里列出了两种情况
    一种是菜单上的内容确定 用前面一种opertion定义该右键菜单的名称,要唯一
    另一种是不确定 可以通过从服务端获取数据,存储在数组中,我这里写死了,然后用第二种方式实现 其中需要用到闭包
    以上内容是小编给大家分享的基于JavaScript实现智能右键菜单的相关知识,希望对大家有所帮助!
随便看

 

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

 

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间:2025/5/21 15:10:18