C# ASP.NET--------高手进阶篇:右键菜单管理

来源:互联网 发布:网络可视对讲系统 编辑:程序博客网 时间:2024/04/30 08:37

    系统做久了,就有点腻歪le 想给自己的站点找点毛病,突然想起来前阵子在家看qq邮箱时候,有个右键菜单,并且是个bug菜单,不会隐藏的那种,闲着无聊在页面上放满了那个右键菜单。突然就像我为什么不给自己的网页上添加一个右键菜单呢,这样又酷又实用。

    当然开发并不是很顺利,看了网上的一些实例,有些太复杂直接pass掉,看都没看,找了一些简单的看了下,都是把隐藏的div调了出来,要么就是输出div,很好,这就够了,跟据自己的实际情况写了一个可以传递参数:菜单项,对应的事件名,主键的右键菜单。

    听众一定不耐烦le ,别别仍鸡蛋la ,这就来正题。

    先上图,有图有真相
 
    菜单的位置做的很好,不过不是我做的,我也不喜欢重复造轮子,嘿嘿,直接拿来用了,定位菜单原理很简单:菜单实用绝对定位,左上角坐标位置根据鼠标的坐标距离页面邮编界和下边界的值,如果页面宽度-鼠标坐标x>菜单宽度则让其在x方向正常显示,否则就让他的显示位置-去菜单宽度+滚动条滚动的像素,在高度上同理,你懂的。

    样式大家就自己琢磨吧,嘿嘿,人懒,不会打字。速度慢那!

    在这个程序中菜单项是重新写的,原理很简单的,实用集合

    var mname=new Array(   "添加","修改",   "删除","<hr/>",   "解/锁", "转vip","<hr/>","到主页" );

    保存菜单项 ,用另外一个集合保存事件

var murl=new Array(
                    "window.open('Hb_ComPany_Add.aspx','_blank','top=0, left=0, toolbar=no, menubar=no,scrollbars=1,resizable=no,location=no,status=no');",
                    "window.open('Hb_ComPany_Add.aspx?id="+key+"','_blank','top=0, left=0, toolbar=no, menubar=no,scrollbars=1,resizable=no,location=no,status=no');",
                    "Del("+row+");",
                    "return false",
                    "Lock("+row+");",
                    "Turn("+row+");",
                    "return false",
                    "window.open('http://www.1236.tv','_blank','');"

    对,在这里你可以直接写上js,就可一了,貌似我的菜单事件只支持js,汗了先,对不起观众

    遍历菜单项,逐个把菜单innerHTML到菜单的div中,我用的是div把每项菜单封装到div中通过div的onclick事件调用上边的事件集合中对应的方法名然后输出到一个菜单的div 中就ok了

   var men=document.getElementById("ie5menu");
     men.innerHTML="";
     men.innerHTML+="<div  style=/"width:20px; height:153px; background:#334F8D; float:left; vertical-align:bottom; /"><br/><br/>技科腾沸</div>"

     for(i=0;i<mname.length;i++)
     {
        //遍历菜单集合,添加菜单
        men.innerHTML+="<div  onMouseover=/"highlightie5()/" onMouseout=/"lowlightie5()/" class=/"menuitems/" onclick=/""+murl[i]+";/">"+mname[i]+"</div>"  
     }

      外部事件直接写成方法就行,在上边大家也看到了,那里用了一个参数row  ,这里是传递进来的主键,通过它你可以实用ajax 来删除,修改它所对应的记录啦。
 
    是不是很晕呢,我口才不是很好,忽悠你就行,嘿嘿

    然后呢?

    然后在前台调用了,我这里作为外部文件引用到页面上的,你懂的,不懂问百度,嘿嘿,啥,啥是百度? 看——————招,一个鸡蛋过去了。

<asp:Repeater ID="Repeater1" runat="server"  ……>
     <ItemTemplate>
   <tr  oncontextmenu='shijian(<%#Eval("i_id") %>,<%#Container.ItemIndex %>); return false;' > 
…………………………

    Repeater你会用的,不会就别看下去了。在表格的行元素上右键的时候,通过函数传递一个主键,和行号(Repeater的行号,一般人不知道的),菜单呢,菜单怎么显示呢,菜单方法在shijian()方法中调用,只管显示就行,真正调用主键的是菜单项的事件,会被直接写在菜单中的,同样在shijian()方法中调用

    写菜单项的函数就行。

    差点忘了告诉大家了,在这里需要在页面上准备一个div 用来存放菜单项的,菜单项innerHTML到这个div中,在让他在某个坐标上显示就是整个过程,还需要记得菜单的隐藏哟,在页面上任何位置单击的或者表格外部右键的话都要隐藏自定义菜单的哟。

<script language="javascript">
    if (document.all && window.print) {
            document.body.onclick =隐藏菜单的方法;
    }
</script>

    好啦,说到这里就可以了,你懂滴。首发http://www.1236.tv/ 沸腾建材招商网 转载请保留

原创粉丝点击