这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 js 实现仿 Discuz 文本框弹出层效果的方法, 可实现点击文本框弹出窗口选择数据的效果, 涉及鼠标事件及页面自定义弹出窗口的相关操作技巧, 需要的朋友可以参考下
本文实例讲述了 js 实现仿 Discuz 文本框弹出层效果。分享给大家供大家参考。具体如下:
这是一个在经典论坛曾经热讨论的问题,记得在 QQ 邮箱里也有类似功能,Discuz7.0 论坛里同样也有,当你的鼠标单击文本框的时候,会弹出一个包含文字、图片、表单无素的 DIV 层,里面的元素都可以进行操作,很方便,选中的值会自动添加到文本框内。本代码经过了多次修正,没有进行过多美化,你美工好的话可以自己美化。
运行效果截图如下:
具体代码如下:
- <!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-Type" content="text/html; charset=gb2312" />
- <title>
- 文本框弹出内容框并取值
- </title>
- <Script language="javascript" type="text/javascript">
- function moveselect(obj, target, all) {
- if (!all) all = 0
- if (obj != "[object]") obj = eval("document.all." + obj) target = eval("document.all." + target) if (all == 0) {
- while (obj.selectedIndex > -1) {
- mot = obj.options[obj.selectedIndex].text mov = obj.options[obj.selectedIndex].value obj.remove(obj.selectedIndex) var newoption = document.createElement("OPTION");
- newoption.text = mot newoption.value = mov target.add(newoption)
- }
- } else {
- for (i = 0; i < obj.length; i++) {
- mot = obj.options[i].text mov = obj.options[i].value
- var newoption = document.createElement("OPTION");
- newoption.text = mot newoption.value = mov target.add(newoption)
- }
- obj.options.length = 0
- }
- }
- function dakai() {
- document.getElementById('light').style.display = 'block';
- document.getElementById('fade').style.display = 'block'
- }
- function guanbi() {
- var yuanGong = document.getElementById("yuanGong") yuanGong.value = "" //如果不加这句,则每次选择的结果追加
- var huoQu = document.getElementById("D2") for (var k = 0; k < huoQu.length; k++) yuanGong.value = yuanGong.value + huoQu.options[k].value + " " //这里的" "中间为空格,为字符间的分隔符,你可以改成别的
- document.getElementById('light').style.display = 'none';
- document.getElementById('fade').style.display = 'none'
- }
- </script>
- <style>
- .black_overlay{display: none;position: absolute;top: 0%;left: 0%;width:
- 100%;height: 100%;background-color:#FFFFFF;z-index:1001;-moz-opacity: 0.8;opacity:.80;filter:
- alpha(opacity=80);} .white_content {display: none;position: absolute;top:
- 25%;left: 25%;width: 50%;height: 50%;padding: 16px;border: 16px solid orange;
- margin:-32px; background-color: white;z-index:1002;overflow: auto;}
- </style>
- </head>
- <body>
- <input type="text" id="yuanGong" onclick="dakai()" size="50">
- <div id="light" class="white_content">
- <table border="1" width="350" id="table4" bordercolor="#CCCCCC" bordercolordark="#CCCCCC"
- bordercolorlight="#FFFFFF" cellpadding="3" cellspacing="0">
- <tr>
- <td width="150" height="200" align="center" valign="middle">
- 该部门员工
- <select size="12" name="D1" ondblclick="moveselect(this,'D2')" multiple="multiple"
- style="width:140px">
- <option value="员工1">
- 员工1
- </option>
- <option value="员工2">
- 员工2
- </option>
- <option value="员工3">
- 员工3
- </option>
- </select>
- </td>
- <td width="50" height="200" align="center" valign="middle">
- <input type="button" value="<<" name="B3" onclick="moveselect('D2','D1',1)"
- />
- <br />
- <input type="button" value="<" name="B5" onclick="moveselect('D2','D1')"
- />
- <br />
- <input type="button" value=">" name="B6" onclick="moveselect('D1','D2')"
- />
- <br />
- <input type="button" value=">>" name="B4" onclick="moveselect('D1','D2',1)"
- />
- <br />
- </td>
- <td width="150" height="200" align="center" valign="middle">
- 未划分部门员工
- <select size="12" name="D2" id="D2" ondblclick="moveselect(this,'D1')"
- multiple="multiple" style="width:140px">
- <option value="员工4">
- 员工4
- </option>
- <option value="员工5">
- 员工5
- </option>
- </select>
- </td>
- </tr>
- </table>
- <a href="javascript:void(0)" onclick="guanbi()">
- 确定
- </a>
- <BR>
- <BR>
- </div>
- <div id="fade" class="black_overlay">
- </div>
- </body>
- </html>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0705/269957.html