Jquery树形菜单的实现

归类于: HTML客户端, Web技术|WEB Tech — 江东 @ 2008-09-03 20:01:16 才(7)条评论

jQuey这个东西很好很强大,用jQuery操作DOM简直是易如反掌。这不,刚才icemapro小弟给我留言,希望我能写一个jQuery的树形菜单,在强大的就Query的帮助下,仅仅花了大约10分钟就完成了,其中还有大约7分钟在考虑css的问题,所以熟悉jquery可是对你很有帮助的哦,废话不多说,下面发布代码,讲解方式依然在注释中体现:
菜单的html代码如下,你可以根据需要进行扩展:

  1. <ul class="folder">
  2.         <li class="folder"><a href="#root">storyday.com</a></li>
  3.         <li class="folder"><a href="#root" onClick="Exp(this)">第一级目录</a>
  4.                 <ul class="folder disnone" >
  5.                         <li class="folder" ><a href="#">iceman</a></li>
  6.                         <li class="folder" ><a href="#">第2级目录</a></li>
  7.                         <li class="folder" ><a href="#root" onClick="Exp(this)">第2级目录</a>
  8.                                 <ul class="folder disnone">
  9.                                         <li class="folder" ><a href="#">第3级目录</a></li>
  10.                                         <li class="folder" ><a href="#">第3级目录</a></li>
  11.                                 </ul>
  12.                         </li>
  13.                  </ul>
  14.         </li>
  15.         <li class="folder"><a href="#root" >cosbeta</a></li>
  16.         <li class="folder"><a href="#root" >生活点滴</a></li>
  17.         <li class="folder"><a href="#root" >江东</a></li>
  18. </ul>

我想上面的html代码应该不用解释了吧,否则这篇文章你也没有看得必要了哈,下面是css的实现,其实css是最难搞的,目前搞定是实现目录式树形,其他树状也是很简单的,无非就是改变一下css
  1. a:link,a:visited{font-size:12px;
  2. color:#094477;text-decoration:none;
  3. }
  4. a:link:hover,a:visited:hover{
  5. color:#000cf;text-decoration:underline;
  6. }
  7. ul.folder{padding:0;margin:0;list-style:none;/*重置ul的margin和padding,否则打死都无法兼容FF和IE*/}
  8. li.folder{
  9. background:#fff url(folderbg.png) no-repeat 0 0;padding:0px 0 0px 14px;
  10. margin:0 2px;
  11. text-indent:20px;
  12. /*folder背景,目前放到是windows目录背景,如果是其他树形,用其他背景图片替代即可*/
  13. }
  14. li.folder-op{background:#fff url(folderbg-op.png) no-repeat 0 0;}
  15. .disnone{
  16. display:none;
  17. }/*这是一个公共的css class,表示隐藏该元素*/

下面开始介绍重点,那就是js的实现,可能这个重点会让你失望,毕竟代码才那么简单的几行,当然在运用jquery之前肯定是要引入jquery库文件的,本例子中直接引用的本blog(生活点滴)中的jquery库:
  1. <script type="text/javascript"  src="http://www.storyday.com/wp-content/themes/cosxp/common.js.php"></script>

下面是js代码,解释依然在注释中:
  1. function Exp(obj){
  2.                 var html_element = $(obj).parent('.folder');/*获取当前点击的父dom,在本例子中获取的dom节点将是 “第一级目录所在的li.folder”*/
  3.                 var sub_element =  $(html_element).children(".folder"); ;/*根据当前的父dom,获取本级的子dom*/
  4.                 if( html_element.attr('class').indexOf('folder-op') != -1 ){
  5. /*css class .folder-op表示当前已经展开的类,如果展开,则前面的+背景变成-背景,具体可以在后面的例子中看到
  6. 如果class中含有该类,则表示当前已经展开,所以下面的两行的任务是:1.隐藏该目录,2.remove掉此css class
  7. */
  8.                         html_element.removeClass('folder-op');
  9.                         sub_element.hide();
  10.                         }
  11.                         else{
  12. /*否则,添加表示目录已经展开的类,展示该目录*/
  13.                         html_element.addClass('folder-op');
  14.                         sub_element.show(500);
  15.                         }
  16.                 }

对,对于js就只需要上面的几行,太简单了,对吧,下面是例子: (read on …)

jQuery应用系列之 通过遍历进行快速表单验证

归类于: HTML客户端, Web技术|WEB Tech — 江东 @ 2008-04-21 09:45:21 才(4)条评论

在很多情况下,我们对表单中的某些字段需要在客户端做简单的js验证,比如不能为空。按照传统的方式,我们可能就会去写一个函数来一个一个判断表单中的字符是否为空,为空则返回false,譬如:

  1. function validForm(){
  2. if( ( document.getElementById('name').value.length < 1 )
  3.    &&( document.getElementById('pass').value.length < 1 )
  4.    &&( document.getElementById('email').value.length < 1 )
  5.    &&( document.getElementById('tel').value.length < 1 )
  6.    &&( document.getElementById('gendar').value.length < 1 )){
  7.       alert('带有*号的部分不能为空');return false;
  8.  }
  9. }

那么如果使用了jQuery这一切可能便得更加简单,譬如下面这个表单
  1. <form id="reg" action="" method="post">
  2. <input type="text" class="important" id="name" name="name" />*<br />
  3. <input type="text" class="important" id="email" name="email" />*<br />
  4. <input type="text" class="important" id="gender" name="gender" />*<br />
  5. <input type="password" class="important" id="pass" name="pass" />*<br />
  6. </form>

不知道你是否注意到,上面凡是打*好的表单域,我都用了一个css属性,那就是”important”,这样的好处有两点,1.我们可以在css中将必须填写的字段用特殊的样式表来显示;2.方便在jquery中遍历,下面是jquery简单表单验证的函数
  1. function validForm(){
  2. var is_not_valid = false;
  3.         $("#reg input.important").each(function(i){//遍历id=reg中的class=important的表单
  4.                 if(this.value.length < 1){//如果表单为空
  5.                         i ++ ;//增加i
  6.                         is_not_valid =  true;
  7.                         if( i < 2 )//因为这个遍历循环无法用break跳出,只能通过i自增的方式让js只弹出一次alert
  8.                                 alert('带星号的必须填写');
  9.                         this.focus();
  10.                 }
  11.         });
  12.         if( is_not_valid ) return false;
  13. }

表单域太少,所以也许你看不到这个的优点何在,但是一旦不能为空的表单数量很多,优势就明显了!


生活点滴Enjoy Life is proudly powered by WordPress | admin| About Us | cosbeta| Bluehost| site map 0.738s & 22