JavaScript3

zlotus

浏览: 54210 次
性别:
来自: 北京

最近访客更多访客>>

shizhe0612

labmem_000

aishuishui

tw6226911

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

J#.net HTML Blog

右键弹出菜单：

//-----------------------------------------------------

//右键弹出菜单
function showMenu(obj){

document.getElementById("sltid").value = obj;
var menudiv = document.getElementById("itemMenu");
popMenu(itemMenu,150,"111");
event.returnValue=false;
event.cancelBubble=true;
return false;
}

function popMenu(menuDiv,width,rowControlString){

//创建弹出菜单
var pop=window.createPopup();
//设置弹出菜单的内容
pop.document.body.innerHTML=menuDiv.innerHTML;
var rowObjs=pop.document.body.all[0].rows;
//获得弹出菜单的行数
var rowCount=rowObjs.length;
//循环设置每行的属性
for(var i=0;i<rowObjs.length;i++)
{
//如果设置该行不显示，则行数减一
var hide=rowControlString.charAt(i)!='1';
if(hide){
rowCount--;
}
//设置是否显示该行
rowObjs[i].style.display=(hide)?"none":"";
}

//屏蔽菜单的菜单
pop.document.oncontextmenu=function()
{
return false;
}

//选择右键菜单的一项后，菜单隐藏
pop.document.onclick=function()
{
pop.hide();
}
//显示菜单
pop.show(event.clientX-1,event.clientY,width,rowCount*25,document.body);
return true;

}

</script>

<div id="itemMenu" style="display:none">

<table border="1" width="100%" height="100%" bgcolor="white"style="border:thin" cellspacing="0">
<tr>
<td style="cursor:hand;border:outset 1;" align="center"
onclick="parent.addToOther();parent.refre();">
<font size="2px">添加至其他节点</font>
</td>
</tr>
<tr>
<td style="cursor:hand;border:outset 1;" align="center"
onclick="parent.view()">
<font size="2px">查看</font>
</td>
</tr>
<tr>
<td style="cursor:hand;border:outset 1;" align="center"
onclick="parent.del();parent.refre();">
<font size="2px">删除</font>
</td>
</tr>
</table>
</div>

双向选择列表：

转自：http://blog.csdn.net/zhangking/archive/2008/10/27/3155401.aspx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>

<body>

    <form id="frm" name="frm" method="post" action="" onSubmit="Submit(this)">

<table width="500" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
    <td width="220" align=center valign="top">
      待分配的角色：<br><br>
      <select name="WaitSelectItem" id="WaitSelectItem" size=15 multiple="true" style="width:180px;" ondblclick="MoveSingleItem(WaitSelectItem, SelectedItem)">
        <option value="">待分配的角色-1</option>
        <option value="">待分配的角色-2</option>
        <option value="">待分配的角色-3</option>
        <option value="">待分配的角色-4</option>
        <option value="">待分配的角色-5</option>
        <option value="">待分配的角色-6</option>
      </select>
    </td>
    <td width="60" align=center>
      <button onClick="MoveSingleItem(WaitSelectItem, SelectedItem)" style="width:40px;">></button><br><br>
      <button onClick="MoveAllItems(WaitSelectItem, SelectedItem)" style="width:40px;">>></button><br><br>
      <button onClick="MoveSingleItem(SelectedItem, WaitSelectItem)" style="width:40px;"><</button><br><br>
      <button onClick="MoveAllItems(SelectedItem, WaitSelectItem)" style="width:40px;"><<</button><br><br>
    </td>
    <td width="220" align=center valign="top">
      已分配的角色：<br><br>
      <select name="SelectedItem[]" id="SelectedItem" size=15 multiple=true style="width:180px;" ondblclick="MoveSingleItem(SelectedItem, WaitSelectItem)">
        <option value="">无</option>
      </select>
    </td>
</tr>
<tr height=120>
    <td colspan=3 align=center>
      <input type="submit" id="submit" name="submit" value=" 保存 ">      
      <button onClick="history.go(-1);"> 返回 </button>
    </td>
</tr>
</table>
</form>

<script language="javascript">
function MoveSingleItem(sel_source, sel_dest)
{
   if (sel_source.selectedIndex==-1) //源：没有点选任何项目
     return;

   if (sel_source.options[0].text=="无") //源：只有“无”项目
     return;

   if (sel_dest.options[0].text=="无") //目标：只有“无”项目，则先删除该提示性项目
     sel_dest.options.remove(0);

   var SelectedText = sel_source.options[sel_source.selectedIndex].text;
   var SelectedVal = sel_source.options[sel_source.selectedIndex].value;
   var newOption = new Option(SelectedText);
   newOption.value = SelectedVal;
   sel_dest.options.add(newOption);
   sel_source.options.remove(sel_source.selectedIndex);

   if (sel_source.options.length==0) //源：如果删除完所有有用项目，则添加提示项目：“无”
     sel_source.options.add(new Option("无"));
}

function MoveAllItems(sel_source, sel_dest)
{
   if (sel_source.options[0].text=="无") //源：只有“无”项目
     return;

   if (sel_dest.options[0].text=="无")   //目标：只有“无”项目，则先删除该提示性项目
     sel_dest.options.remove(0);

   //首先拷贝所有项目到目标：
   var sel_source_len = sel_source.length;
   for (var j=0; j<sel_source_len; j++)
   {
     var SelectedText = sel_source.options[j].text;
     var SelectedVal = sel_source.options[j].value;
     var newOption = new Option(SelectedText);
     newOption.value = SelectedVal;
     sel_dest.options.add(newOption);
   }

   //然后删除“源”所有项目：
   while ((k=sel_source.length-1)>=0)
   {
     if (sel_source.options[0].text=="无") //源：只有“无”项目
       break;
     sel_source.options.remove(k);
     if (sel_source.options.length==0) //源：如果删除完所有有用项目，则添加提示项目：“无”
       sel_source.options.add(new Option("无"));
   }
}

function Submit(frm)
{
if (frm.SelectedItem.options[0].text!="无")
    SelectAll(frm.SelectedItem);
frm.submit();
}

function SelectAll(theSel) //选中select中全部项目
{ for (i=0; i<theSel.length; i++)
   theSel.options[i].selected = true;
}
</script>

</body>
</html>

分享到：

JSP分页 | oracle Sql-2解锁and基础

2010-04-15 13:44
浏览 737
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JavaScript3

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JavaScript3

评论

发表评论

相关推荐

JS面向对象编程

JS正则 备忘

JS事件冒泡浏览器兼容

CSS样式

Javascript5-jquery

JSON

CSS 层定位FLOATDISPLAYVISIBILITY

CSS定位

CSS-设计网站(DIV盒子模型)

原理性知识总结

JavaScript4

Spring-JdbcTemplate

CSS-右键菜单DIV TABLE

JSP分页

JavaScript2

JavaScript1

webwork框架

关于框架开发

页面常用部分

最近访客更多访客>>

JS正则备忘