JavaScript的几个简单应用

时间过的真快啊，从家里出来已经快50天了！在公司也半月了，学到了很多东西！公司做的项目是B/S架构的，用到JavaScript的地方很多！下面就来说说，我这几天遇到的一些JavaScritp代码，这些在学校的时候或者没接触过，或者遗留下来了。
1.树形菜单在B/S架构的程序中用到的很多，以前在学校的时候，做过一点这方面的应用，但是现在回想起来，那时做的确实不怎么的。树形菜单很多的，下面我们就说说dtree，这是一个非常不错的属性菜单。首先说说，应该到哪里去下载。
点击下面就可以下载：
dtree下载
这是一个zip压缩包，解压后会看到里面有img目录，这里面是用到的图片，dtree.js这就是该树形菜单的js实现，dtree.css大家都知道是干嘛的，我就废话不说了，还有一个api.htm，这是个非常有用的东西，你完全可以参考着该文档，自己去学dtree，都是一些简单的英文。并且里面还有一个example，是个做好的例子，可以参考参考。过多的东西，就不用说了，有api文档，你完全可以自己搞定，挺简单，挺好用的！使用时要把 img和dtree.css、dtree.js拷贝到你的项目中。
下面是我用dtree做的一个例子的效果图：

其代码时这样的，我用的jsp代码：

<script type="text/javascript">         d = new dTree('d');         d.config.target="main"         d.config.closeSameLevel=1;         d.config.useStatusText=1;         d.add(0, -1, '常用工具');         d.add(1, 0, '搜索引擎','<%=path%>/tool/main.jsp?name=搜索引擎');         d.add(2, 1, '百度', 'http://www.baidu.com');         d.add(3, 1, '谷歌', 'http://www.google.com.hk');         d.add(4, 0, '常用链接', '<%=path%>/tool/main.jsp?name=常用链接');         d.add(5, 4, 'CSDN', 'http://www.csdn.net');         d.add(6, 4, '163邮箱', 'http://mail.163.com');         d.add(7, 4, 'blog', 'http://blog.sina.com.cn/zhchljr');         d.add(8, 0, '信息查询', '<%=path%>/tool/main.jsp?name=信息查询');         d.add(9, 8, '甘肃人事编制信息网','http://www.rst.gansu.gov.cn/index.htm');         d.add(10, 8, '甘肃教育信息网','http://www.gsedu.cn/structure/sy');         d.add(11, 8, '宁夏人事考试中心','http://www.nxpta.gov.cn');         d.add(12, 0, '友情链接', '<%=path%>/tool/main.jsp?name=友情链接');         d.add(13, 12, '天水师范学院', 'http://www.tsnc.edu.cn');         document.write(d);     </script>

 

只要把下面的代码加入到你的页面中需要菜单的地方就可以，怎么样，挺简单的吧！
2.在很多项目中，都会用到输入日期的，但是如果是在文本框中输入的话，数据的合法性验证是很麻烦的事情，并且格式控制也不容易做，但是用了日期控件后，一切就变的很简单了。好了，废话不说了，下面就开始介绍atCalendarControl（这就是我所用的）。
和前面一样，先说说下载的问题。
点击下面就可以下载：
atCalendarControl下载
下载下来，就一个newCalendar.js文件，就是该时间空间的js实现。使用时将其拷贝到你的项目中。
下面是我做的一个例子，当在生日后面的文本框中单击时，就会出现如图所示的界面：

左上角的“-”为帮助按钮，具体怎么操作单击帮助查看。
其代码如下：

<tr>                     <td>生&nbsp;&nbsp;日</td>                     <td><input type="text" readonly name="birthday" οnclick="CalendarWebControl.show(this,this.value)"/></td>                 </tr>

注意：只是在onclick中添加代码就行了；最后把该输入文本框设置为只读的，因为这样才能防止错误的日期格式等。界面还行吧，是不是简单易用啊！
3.在很多网站中，见到过这种情况，就是单击一个复选框，实现全选的功能。
下面先来看看，我做的一个这样的例子。


当但见全选前面的复选框时，所有的选项就全部选中了，以前也碰到过，但是没怎么注意，现在又看到了，就多想了想，想着它是怎么实现的，不看不知道，一看吓一跳，原来实现是非常简单啊！
下面我们看看具体的实现代码：
html代码：

<td>爱&nbsp;&nbsp;好</td>                     <td>                         <input type="checkbox" name="favor" value="篮球"/>篮球&nbsp;&nbsp;                         <input type="checkbox" name="favor" value="足球"/>足球&nbsp;&nbsp;                         <input type="checkbox" name="favor" value="乒乓球"/>乒乓球&nbsp;&nbsp;                         <input type="checkbox" name="favorall" οnclick="javascript:selectAll();"/>全选                     </td>

注意在onclick中加入的代码。
js代码：

function selectAll()         {             var length = myform.favor.length;             if(length == 0)                 myform.favorall.checked;             else if(length >= 2)                 for(var i=0; i<=length; i++)                     myform.favor[i].checked = myform.favorall.checked;             else                 myform.favor.checked = myform.favorall.checked;         }

怎么样，很简单吧！
4.单选按钮和复选框的判断值为空的问题，这个问题曾经把我搞乱了，不过，笑到最后才算笑，终于搞定它了。
下面我们一起看看。
html代码：

<td>性&nbsp;&nbsp;别</td>                     <td>                         <input type="radio" name="sex" value="男" checked/>男&nbsp;&nbsp;                         <input type="radio" name="sex" value="女"/>女                     </td>                <td>爱&nbsp;&nbsp;好</td>                     <td>                         <input type="checkbox" name="favor" value="篮球"/>篮球&nbsp;&nbsp;                         <input type="checkbox" name="favor" value="足球"/>足球&nbsp;&nbsp;                         <input type="checkbox" name="favor" value="乒乓球"/>乒乓球&nbsp;&nbsp;                         <input type="checkbox" name="favorall" οnclick="javascript:selectAll();"/>全选                     </td>

js中判读的代码：

var flag = false;             var length = myform.sex.length;             for(var i=0; i<length; i++)             {                 if(myform.sex[i].checked)                     flag = true;             }             if(!flag) {                 alert("男士，还是女士?");                 myform.sex[0].focus();                 return false;             } var bFlag = 0;             var fLength = document.myform.favor.length;             for(var i=0; i<fLength; i++)             {                 if(myform.favor[i].checked)                     bFlag ++;             }                         if(bFlag <= 0)             {                 alert("你没有爱好吗?");                 myform.favor[0].focus();                 return false;             }

嘿嘿，是不是超简单啊！
虽然以前也自己写过一些，但是感觉都不太好，这次坐下来认真的去写，感觉语言表达能力很差，写的不好，但是对我而言，意义重大啊！给我写自己的东西，开了个头！随手做笔记是一个很好的习惯，但是也没必要拿个本子去记，现在完全可以利用计算机和网络！