常用的通讯录或好友分组应用

kos — Thu, 19 Aug 2010 03:33:35 +0000

　　分组应用应该说是个比较常用的功能，由于工作需要，写了一个分组设置的应用，就是把一个组的成员放到另一个组里面去，应用options.add方法把新的成员加到下拉菜单的列表中去，取option的值和内容时要注意，分别表示为：“对象[位].text”和“对象[位].value”，看下面的例子：



CODE
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style>
<!--
td{ padding:5px; font-size:12px;}
select{ width:100%; height:200px; margin:0px;}
input{ width:40px; margin:1px;}
-->
</style>
<script>
<!--
function toGoalSin(){
    var primGroup = document.getElementById("primGroup");
    var goalGroup = document.getElementById("goalGroup");
    for(i=primGroup.options.length-1;i>=0;i--){
        if (primGroup.options[i].selected){
            adddata(goalGroup,primGroup[i].text,primGroup[i].value);
            primGroup[i]=null;
            }
        }
    }

function toGoalAll(){
    var primGroup = document.getElementById("primGroup");
    var goalGroup = document.getElementById("goalGroup");
    for(i=primGroup.options.length-1;i>=0;i--){
        adddata(goalGroup,primGroup[i].text,primGroup[i].value);
        primGroup[i]=null;
        }
    }

function toPrimAll(){
    var primGroup = document.getElementById("primGroup");
    var goalGroup = document.getElementById("goalGroup");
    for(i=goalGroup.options.length-1;i>=0;i--){
        adddata(primGroup,goalGroup[i].text,goalGroup[i].value);
        goalGroup[i]=null;
        }
    }

function toPrimSin(){
    var primGroup = document.getElementById("primGroup");
    var goalGroup = document.getElementById("goalGroup");
        for(i=goalGroup.options.length-1;i>=0;i--){
            if(goalGroup.options[i].selected){
            adddata(primGroup,goalGroup[i].text,goalGroup[i].value);
            goalGroup[i]=null;
            }
        }
    }

function adddata(obj,a,b){
    var list = new Option(a,b);
    obj.options.add(list);
    }
-->
</script>
</head><body>
<table border="0" cellspacing="1" cellpadding="0" bgcolor="#009999">
    <tr>
        <td width="150" align="center" bgcolor="#99CC66">原始组</td>
        <td width="50" align="center" bgcolor="#99CC66"> </td>
        <td width="150" align="center" bgcolor="#99CC66">目标组</td>
    </tr>
    <tr>
        <td align="center" bgcolor="#FFFFFF"><select name="select" multiple id="primGroup">
        <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 align="center" bgcolor="#FFFFFF"><input type="submit" name="button" id="button" value=">" onClick="toGoalSin()">
        <br>
        <input type="submit" name="button2" id="button2" value=">>" onClick="toGoalAll()">
        <br>
        <input type="submit" name="button3" id="button3" value="<<" onClick="toPrimAll()">
        <br>
        <input type="submit" name="button4" id="button4" value="<" onClick="toPrimSin()"></td>
        <td align="center" bgcolor="#FFFFFF"><select name="select" multiple id="goalGroup">
        </select></td>
    </tr>
</table>
</body>
</html>




 [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

巧用title属性做提示功能，兼容的js代码

kos — Wed, 14 Oct 2009 08:34:13 +0000

巧用title属性做提示功能，在此之前一直觉得title属性很好用，但依然存在一些小问题：
　　1、当鼠标指上去到提示有间隔时间；
　　2、在ie6或低版本浏览器中，此提示会被下拉菜单和一些优先级比较高的东西遮挡住；
　　3、默认的没有任何样式修饰，在此基础上加入样式，可以让提示更为醒目。
　　小弟在此做了一些优化！

代码如下：



CODE
<html> <head> <script src="http://www.uideas.cn/download/boxover.js"></script> <title>利用title属性做提示功能</title> <style> <!-- body{ margin:0px; padding:0px;} p{ margin:0px; padding:2px;} .oIframe{ position:absolute; _moz-opacity:0;opacity:0; _filter:Alpha(opacity=0);} .dvHdr{border:1px solid #999999; padding:3px; font-size:12px; color:red; background:#cccccc;} .dvBdy{border:1px solid #999999; border-top:0px; font-size:12px; padding:3px; color:#0f0f0f; background:#FFFFFF;} --> </style> </head>  <body style="font-family:arial;font-size:12px"> <p>这里就是图片的说明</p><p> 这张图片没有写src,所以没法显示！</p>]"></p> <p><input type="text" style="width:200px;" title="header=[这是一个文本框] body=[这只是一个普通的文本框]" value=""></p> <p><select name="select" style="width:200px;" title="header=[这是一个下拉菜单] body=[<p>这个看上去优先级不是很高哦</p><p>提示的内容能浮在这个下拉菜单的上面</p>]"><option>--请选择选项--</option></select> <p><a href="http://www.uideas.cn" title="header=[快点] body=[<p>点了你就知道安逸了</p>]">更多更好的网页效果请点击这里！</a> </body> </html>




[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

　　想起这篇日志实在是惭愧，以前有个不好的习惯就是不怎么鼓劲动脑筋，一遇到问题马上到网上找，再加上基础差，所以懒惰的行为在所难免，就这个js而言，以前有点看得不是很懂，但功能实现了，后来因为事多，就没去想这个问题，呵呵，前几天，一朋友问到我，有些问题想一起研究下，结果看了半天觉得里面乱乱的，后来没招了，第二天下班后，自己再回头来想想以前不明白的地方，然后跟着原创的思路慢慢一步步把问题解决得差不多，当时我就汗了！以后会注意了！这也许是一种习惯吧！
　　现在已将最新版的js上传上去了，里面加了很大部分注释！谢谢你们的关注！

相关下载：
　　js下载：boxover.js

散人笔记 » 下拉菜单

常用的通讯录或好友分组应用

巧用title属性做提示功能，兼容的js代码