js自定义菜单代码（js自定义菜单代码怎么用）

本篇文章给大家谈谈js自定义菜单代码，以及js自定义菜单代码怎么用对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、求js 自定义右键菜单代码，只要在网页上右键弹出菜单就行
• 2、用node.js开发微信时,创建自定义菜单的menu写在那个代码块里？是app.js吗？
• 3、怎么用js做出自定义菜单对li标签 右键 删除/变颜色 效果
• 4、JS+DIV实现自定义html右键菜单

求js 自定义右键菜单代码，只要在网页上右键弹出菜单就行

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

title无标题文档/title

style

#ul1 {width:100px; background:#CCC; border:1px solid black; position:absolute; display:none;margin:0; padding:0;}

#ul1 li{list-style:none}

/style

script

document.oncontextmenu=function(ev){

var oEvent=ev||event;

var oUl=document.getElementById('ul1');

oUl.style.display='block';

oUl.style.left=oEvent.clientX+'px';//如果超出可视区就加scroll

oUl.style.top=oEvent.clientY+'px';

return false;

}

document.onclick=function ()

{

var oUl=document.getElementById('ul1');

oUl.style.display='none';

};

/script

/head

body

ul id="ul1"

li自己添加/li

li2/li

/ul

/body

/html

用node.js开发微信时,创建自定义菜单的menu写在那个代码块里？是app.js吗？

不是的，如果楼主用的wechat那个框架，那么其实就是一个请求。也就是说你只要发送一次请求到微信的服务器，

即运行一次代码api.createMenu(menu, callback);

说白了，创建自定义菜单其实是发送一个请求到微信，然后就完事了。不用每次都运行。

PS.如果你要用自定义菜单，订阅号需要300块认证费，或者开通服务号。普通帐号是不能用的，要先确认自己能不能用再试，我上次试了半个小时才发现原来我不能创建。。。

怎么用js做出自定义菜单对li标签 右键 删除/变颜色 效果

js里面没有直接的右击事件，可采用onmousedown事件进行判断实现。如下：

document.getElementById("test").onmousedown = function(e){

                if(e.button ==2){

                    //alert("你点了右键");

                    //这样设计你的颜色样式...

                }else if(e.button ==0){

                    alert("你点了左键");

                }else if(e.button ==1){

                    alert("你点了滚轮");

                }

            }

2、数据的过滤方法有很多，javaScript 、jQuery里面的filter函数，鉴于本题，最好采用angularJs实现。总体 参考代码如下：

!DOCTYPE html

html

head

    meta charset="utf-8"

    script src=""

    /script

    script type="text/javascript"

        window.onload = function(){

            //去掉默认的contextmenu事件，否则会和右键事件同时出现。

            document.oncontextmenu = function(e){

                e.preventDefault();

            };

            document.getElementById("test").onmousedown = function(e){

                if(e.button ==2){

                    alert("你点了右键");

                    //这样设计你的颜色样式...

                }else if(e.button ==0){

                    alert("你点了左键");

                }else if(e.button ==1){

                    alert("你点了滚轮");

                }

            }

        }

    /script

/head

body

div ng-app="myApp" ng-controller="namesCtrl"

    p输入过滤:/p

    pinput type="text" ng-model="test"/p

    ul

        li ng-repeat="x in names | filter:test | orderBy:'pin'"

            {{ (x.name | uppercase) + ', ' + x.pin }}

        /li

    /ul

/div

script

    angular.module('myApp', []).controller('namesCtrl', function($scope) {

        $scope.names = [

            {name:'张三',pin:'zhang san'},

            {name:'王斌',pin:'wang bin'},

            {name:'张春桥',pin:'zhang chun qiao'},

            {name:'王滨',pin:'wang bin'}

        ];

    });

/script

div style="width: 600px;height:50px;margin:auto;border:1px solid pink" id="test"

    p朝鲜新建农场/p

/div

/body

/html

JS+DIV实现自定义html右键菜单

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

titleJS实现自定义右键菜单/title

meta http-equiv="content-type" content="text/html; charset=gbk"

script src=""/script

style type="text/css"

#container {

text-align : center;

width : 500px;

height : 500px;

border : 1px solid blue;

margin : 0 auto;

}

.skin {

width : 100px;

border : 1px solid gray;

padding : 2px;

visibility : hidden;

position : absolute;

}

div.menuitems {

margin : 1px 0;

}

div.menuitems a {

text-decoration : none;

}

div.menuitems:hover {

background-color : #c0c0c0;

}

/style

script

window.onload = function() {

var container = document.getElementById('container');

var menu = document.getElementById('menu');

/*显示菜单*/

function showMenu() {

var evt = window.event || arguments[0];

/*获取当前鼠标右键按下后的位置，据此定义菜单显示的位置*/

var rightedge = container.clientWidth-evt.clientX;

var bottomedge = container.clientHeight-evt.clientY;

/*如果从鼠标位置到容器右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度*/

if (rightedge menu.offsetWidth)

menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth + "px";

else

/*否则，就定位菜单的左坐标为当前鼠标位置*/

menu.style.left = container.scrollLeft + evt.clientX + "px";

/*如果从鼠标位置到容器下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度*/

if (bottomedge menu.offsetHeight)

menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px";

else

/*否则，就定位菜单的上坐标为当前鼠标位置*/

menu.style.top = container.scrollTop + evt.clientY + "px";

/*设置菜单可见*/

menu.style.visibility = "visible";

LTEvent.addListener(menu,"contextmenu",LTEvent.cancelBubble);

}

/*隐藏菜单*/

function hideMenu() {

menu.style.visibility = 'hidden';

}

LTEvent.addListener(container,"contextmenu",LTEvent.cancelBubble);

LTEvent.addListener(container,"contextmenu",showMenu);

LTEvent.addListener(document,"click",hideMenu);

}

/script

/head

body

div id="menu" class="skin"

div class="menuitems"

a href="javascript:history.back();"后退/a

/div

div class="menuitems"

a href="javascript:history.back();"前进/a

/div

hr

div class="menuitems"

a href="" target="_blank"地图api/a

/div

div class="menuitems"

a href="" target="_blank"实时交通/a

/div

div class="menuitems"

a href="" target="_blank"地图搜索/a

/div

div class="menuitems"

a href="" target="_blank"驾驶导航/a

/div

hr

div class="menuitems"

a href="" target="_blank"灵图UU/a

/div

div class="menuitems"

a href="" target="_blank"路书下载/a

/div

hr

div class="menuitems"

a href="" target="_blank"关于本站/a

/div

div class="menuitems"

a href="" target="_bland"友情链接/a

/div

/div

div id="container"

p右键此区域/p

/div

/body

/html

js自定义菜单代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js自定义菜单代码怎么用、js自定义菜单代码的信息别忘了在本站进行查找喔。