热点导读： cos-html-cache, 联系方式, 域名代购&paypal代付款 , 给我短信
主机推荐： hostmonster， bluehost， hostgator, 通过本站优惠买主机, [本站继续代购美国主机]

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