html + js 右 点击 弹出 菜单

页面

引用jar 包

<link rel="stylesheet" href="../../style/zui.min.css" type="text/css" media="screen" />
<script type="text/javascript" src="../../zui/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../../zui/zui.min.js"></script>

‘jquery.contextmenu.r2.js‘

<!--右击 弹出的 下拉菜单-->
<div style="display:none;">
<div class="contextMenu" id="menu" >
<ul>
<li id="add">
<i class="icon-add"></i> 添加
</li>
<li id="update">
<i class="icon-edit"></i> 修改
</li>
<li id="delete">
<i class="icon-exit"></i> 删除
</li>
</ul>
</div>
</div>

<!-- 左侧导航-->
<div class="indmain" >
<div id="centerLeft" class="shenfenleft">
<div><span>请选择</span></div>
<div>
<input class="input_client text-input" type="text" id="Department">
<a href="#" class="button zi_searchEntuser" id="button_search">搜索</a>
</div>
<ul class="tree" data-ride="tree" id="tree">
</ul>
</div>
</div>

js 文件

//右击 弹出 菜单
function loadMenu(){
$(‘ul li a‘).contextMenu(‘menu‘,{
//菜单样式
menuStyle: {

},
//菜单项样式
itemStyle: {
fontFamily : ‘verdana‘,
backgroundColor : ‘#333333‘,
color: ‘white‘,
border: ‘none‘,
padding: ‘1px‘

},
//菜单项鼠标放在上面样式
itemHoverStyle: {
color: ‘#fff‘,
backgroundColor: ‘#0099CC‘,
border: ‘none‘
},
bindings:
{
‘add‘: function(t, target) {
//alert(t.id+"|||"+ t.name);
RightOperation("add",t.name,target);
// alert(‘Trigger：‘ + t.id + ‘ 增加‘ + " taget by:" + $("td:eq(0)", target).text());
},
‘update‘: function(t, target) {
RightOperation("update",t.name,target);
//alert(‘Trigger：‘ + t.id + ‘ 保存‘ + " taget by:" + $("td:eq(0)", target).text());
},
‘delete‘: function(t, target) {
RightOperation("delete",t.name,target);
//alert(‘Trigger：‘ + t.id + ‘ 删除‘ + " taget by:" + $("td:eq(0)", target).text());
}
},
onShowMenu: function(e, menu) {

if (parseInt($("td:eq(0)", e.currentTarget).text()) > 10) {
$("#save", menu).remove();
}
$(e.currentTarget).siblings().removeClass("SelectedRow").end().addClass("SelectedRow");
return menu;
}

});
}

function RightOperation(type,val,target){

var list = val.split(":");
var num = list[0];
var id =list[1];
var name = list[2];
//添加级别
if(type=="add"){
if(num.indexOf("one")!=-1){ //操作区级单位
dialog.confirm("省级名称：<input type=‘text‘ id=‘unit_name‘ value=‘‘ style=‘width:180px;border:1px solid #cccccc‘ /><br/><br/>" +
"省级编码：<input type=‘text‘ id=‘unit_code‘ value=‘‘ style=‘width:180px;border:1px solid #cccccc‘/><br/>",
function(){
//调用新增方法添加医院
var unit_name = $("#unit_name").val();
var unit_code = $("#unit_code").val();

var reg = /^[A-Za-z0-9\u4E00-\u9FA5]*$/;
var r = unit_name.match(reg);

if(unit_name==""){
dialog.alert("区级名称不能为空");
back;
}
if(unit_code==""){
dialog.alert("区级编码不能为空");
back;
}

if(r==null){
dialog.alert("区级名称只能输入数字、字母、汉字");
back;
}

var reg1 = /^[A-Za-z0-9]*$/;
var d = unit_code.match(reg1);
if(d==null){
dialog.alert("区级编号只能输入数字、字母");
back;
}

//var city_code =? //市级编码

var data = {"unit_name":unit_name,"unit_code":unit_code,"city_code":id};
insertUnit(data,target,unit_name,unit_code);
;
//动态加载右键事件
loadMenu();

},function(){

});
}
else if(num.indexOf("two")!=-1){ //操作医院单位
dialog.confirm("市(地级)级名称：<input type=‘text‘ id=‘org_name‘ value=‘‘ style=‘width:180px;border:1px solid #cccccc‘ /><br/><br/>" +
"市(地级)级编码：<input type=‘text‘ id=‘org_code‘ value=‘‘ style=‘width:180px;border:1px solid #cccccc‘/><br/>",
function(){
//调用新增方法添加医院
var org_name = $("#org_name").val();
var org_code = $("#org_code").val();

var reg = /^[A-Za-z0-9\u4E00-\u9FA5]*$/;
var r = org_name.match(reg);

var reg1 = /^[A-Za-z0-9]*$/;
var d = org_code.match(reg1);

if(org_name==""){
dialog.alert("医院名称不能为空");
back;
}
if(org_code==""){
dialog.alert("医院编码不能为空");
back;
}

if(r==null){
dialog.alert("医院名称只能输入数字、字母、汉字");
back;
}

if(d==null){
dialog.alert("医院编号只能输入数字、字母");
back;
}

//var unit_code =?

var data = {"org_name":org_name,"org_code":org_code,"unit_code":id};
insertOrg(data);
//添加医院节点
$(target).parent().next().append(‘<div id="sfgc94" class="fff"><a style="padding-left: 20px;" name="three:‘+org_code+‘:‘+org_name+‘" data-id="‘+org_code+‘" id="three003"><i class="icon-pack-2" style="color: #0099CC; font-size: 14px;"></i>‘+org_name+‘</a></div><div class="ps" id="fgcthree003" style="display:block"></div>‘);
//动态加载右键事件
loadMenu();

},function(){
});
}
else if(num.indexOf("three")!=-1){ //操作科室单位
dialog.confirm("县级名称：<input type=‘text‘ id=‘DepartmentName‘ value=‘‘ style=‘width:180px;border:1px solid #cccccc‘ /><br/><br/>" +
"县级编码：<input type=‘text‘ id=‘DepartmentCode‘ value=‘‘ style=‘width:180px;border:1px solid #cccccc‘/>",
function(){
//调用新增方法添加科室
var DepartmentName = $("#DepartmentName").val();
var DepartmentCode = $("#DepartmentCode").val();

var reg = /^[A-Za-z0-9\u4E00-\u9FA5]*$/;
var r = DepartmentName.match(reg);

var reg1 = /^[A-Za-z0-9]*$/;
var d = DepartmentCode.match(reg1);

if(DepartmentName==""){
dialog.alert("科室名称不能为空");
back;
}
if(DepartmentCode==""){
dialog.alert("科室编码不能为空");
back;
}

if(r==null){
dialog.alert("区级名称只能输入数字、字母、汉字");
back;
}

if(d==null){
dialog.alert("区级编号只能输入数字、字母");
back;
}

var data = {"department_name":DepartmentName,"department_code":DepartmentCode,"org_code":id};
insertDepartment(data);

//添加科室节点
$(target).parent().next().append(‘<div class="bb"><a name="four:‘+DepartmentCode+‘:‘+DepartmentName+‘" id="‘+DepartmentCode+‘"><i class="icon-about-us" style="color: #cccccc; font-size: 14px;"></i>‘+DepartmentName+‘</a></div>‘);
//动态加载右键事件
loadMenu();

},function(){
});
} else if(num.indexOf("four")!=-1){
dialog.alert("科室下面无需添加！");
}

}
//修改级别
else if(type=="update"){
if(num.indexOf("one")!=-1){
dialog.confirm("市级名称：<input type=‘text‘ id=‘city_name‘ style=‘width:180px;border:1px solid #cccccc‘ value=‘"+name+"‘/><br/>",
function(){
//调用新增方法添加医院
var city_name = $("#city_name").val();
var city_code = id;

var reg = /^[A-Za-z0-9\u4E00-\u9FA5]*$/;
var r = city_name.match(reg);

if(city_name==""){
dialog.alert("市级名称不能为空");
back;
}
if(r==null){
dialog.alert("市级名称只能输入数字、字母、汉字");
back;
}

var data = {"city_name":city_name,"city_code":city_code};
updateCity(data);
$(target).html(city_name)

},function(){
});
}
else if(num.indexOf("two")!=-1){
dialog.confirm("区级名称：<input type=‘text‘ id=‘unit_name‘ style=‘width:180px;border:1px solid #cccccc‘ value=‘"+name+"‘ /><br/>",
function(){
//调用新增方法添加医院
var unit_name = $("#unit_name").val();
var unit_code = id;

var reg = /^[A-Za-z0-9\u4E00-\u9FA5]*$/;
var r = unit_name.match(reg);

if(unit_name==""){
dialog.alert("区级名称不能为空");
back;
}
if(r==null){
dialog.alert("区级名称只能输入数字、字母、汉字");
back;
}

var data = {"unit_name":unit_name,"unit_code":unit_code};
updateUnit(data);
$(target).html(‘<i class="icon-address" style="color: #0099CC; font-size: 14px;"></i>‘ + unit_name);
},function(){
});
}
else if(num.indexOf("three")!=-1){
dialog.confirm("医院名称：<input type=‘text‘ id=‘org_name‘ style=‘width:180px;border:1px solid #cccccc‘ value=‘"+name+"‘ /><br/>",
function(){
//调用新增方法添加医院
var org_name = $("#org_name").val();
var org_code = id;

var reg = /^[A-Za-z0-9\u4E00-\u9FA5]*$/;
var r = org_name.match(reg);

if(org_name==""){
dialog.alert("医院名称不能为空");
back;
}

if(r==null){
dialog.alert("医院名称只能输入数字、字母、汉字");
back;
}
//var unit_code =?

var data = {"org_name":org_name,"org_code":org_code};

updateOrg(data);
$(target).html(‘<i class="icon-add" style="color: #0099CC; font-size: 14px;"></i>‘ + org_name + ‘</a>‘)
},function(){
});
}
else if(num.indexOf("four")!=-1){
dialog.confirm("科室名称：<input type=‘text‘ id=‘DepartmentName‘ style=‘width:180px;border:1px solid #cccccc‘ value=‘"+name+"‘ />",
function(){
//调用新增方法添加科室
var DepartmentName = $("#DepartmentName").val();
var DepartmentCode = id;

var reg = /^[A-Za-z0-9\u4E00-\u9FA5]*$/;
var r = DepartmentName.match(reg);

if(DepartmentName==""){
dialog.alert("科室名称不能为空");
back;
}

if(r==null){
dialog.alert("科室名称只能输入数字、字母、汉字");
back;
}

var data = {"department_name":DepartmentName,"department_code":DepartmentCode};
updateDepartment(data);
$(target).html(‘<i class="icon-about-us" style="color: #cccccc; font-size: 14px;"></i>‘+DepartmentName);
},function(){
});
}
}
//删除级别
else if(type=="delete"){
if(num.indexOf("one")!=-1){
dialog.confirm("是否删除<br/>",
function(){
var data = {"city_name":name,"city_code":id};
citySelectUnit(id);
if(unitname.length==0){
deleteCity(data,target);

}
else{
dialog.alert("该城市下还存在区级信息，不能直接删除！");
}

},function(){
return;
});
}
else if(num.indexOf("two")!=-1){
dialog.confirm("是否删除<br/>",
function(){
var data = {"unit_name":name,"unit_code":id};
unitCodeSelectOrg(id);
if(Hospitalinfo.length==0){
deleteUnit(data,target);

}
else{
dialog.alert("该区下还存在医院信息，不能直接删除！");
}

// $(target).remove();
//$(target).parent().html("");
},function(){
});
}
else if(num.indexOf("three")!=-1){
dialog.confirm("是否删除<br/>",
function(){
var data = {"org_name":name,"org_code":id};
orgCodeSelectDepartment(id);
if(Department.length==0){
deleteOrg(data,target);

}
else{
dialog.alert("该医院下还存在科室信息，不能直接删除！");
}

// $(target).parent().parent().html("");
//$(target).parent().siblings(1).html("");
},function(){
});
}
else if(num.indexOf("four")!=-1){
dialog.confirm("是否删除<br/>",
function(){
var data = {"department_name":name,"department_code":id};
deleteDepartment(data,target);

},function(){

});
}
}

}

时间： 2024-11-06 16:04:27

html + js 右 点击 弹出 菜单的相关文章

JS实现点击弹出对应的索引

如果这样写的话 ,弹出来一直是2,原因 这个i ,循环已经结束,i 的值已经是2了,所以需要再前面添加: items[i].index=i;    //添加一个属性  ,技术一下 这个索引值 alert的时候 需要点击哪个,弹出哪个的索引值 ,所以  alert(this.index) 才能弹出来相应的索引值 ,要不然弹出来的都是2, 点击几次都是2

MUI组件三：列表、遮罩蒙版、数字输入框、侧滑导航和弹出菜单

1.list(列表) 列表是常用的UI控件,mui封装的列表组件比较简单,只需要在ul节点上添加.mui-table-view类.在li节点上添加.mui-table-view-cell类即可,如下为示例代码 <ul class="mui-table-view"> <li class="mui-table-view-cell">Item 1</li> <li class="mui-table-view-cell&q

iOS开发——实战技术OC篇&amp;关于蒙板和弹出菜单

关于蒙板和弹出菜单 一:关于蒙板 蒙板的作用一般就是用来实现不能做其他操作还有一些模糊效果提示用户 我们只需要自定义一个View,并且创建两个类方法用来给外界调用实现显示和隐藏 + (void)show; + (void)hide; 显示:直接添加到window上,并且设置和window同样大小,然后设置相应的透明度(alpla) 1 + (void)show 2 3 { 4 5 6 7 8 9 iCocosCover *cover = [[self alloc] init]; 10 11 12

mui-popover显示、隐藏弹出菜单的方法

一.mui-popover要显示.隐藏弹出菜单,可使用锚点方式. <div id="popover" class="box mui-popover mui-poppicker mui-popover-action mui-popover-bottom" style="height: 500px;background-color: #fff;"> <div class="mui-popover-arrow"&g

桌面点击右键，菜单向左弹出，如何改为向右弹出菜单

操作步骤: 按win+r在弹出的运行窗口中输入 shell:::{80F3F1D5-FECA-45F3-BC32-752C152E456E}运行弹出“平板电脑设置”窗口,选择“其他”选项卡,在“左右手使用习惯”下,选“惯用左手”,确定 . 桌面点击右键,菜单向左弹出,如何改为向右弹出菜单

点击弹出弹性下拉菜单效果

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" /><meta name="

js+css实现带缓冲效果右键弹出菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

jquery之点击弹出图标环形菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

css+html+js实现多级下拉和弹出菜单

本文将使用css+html+js实现横向菜单.具有多级弹出菜单下拉. 首先我们来看看效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvajkwMzgyOTE4Mg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" > 首先应该写html部分的代码,代码比較简单,代码例如以下: <body> <div id="men