jQuery学习#2 — 多级菜单

January 1, 2010 4 Comments

在上一篇学习比较中写了简单个tab联系,逻辑性不是很强。这次的是我从网上看到的一个例子–jQuery多级菜单,然后自己重新了一遍,并把自己的理解加在代码的注释中。上一次看jQuery的时候就有看到这个例子,只怪自己当时学习不够认真扎实,照葫芦画瓢写了一遍也没实现,更别说理解了。这次看书的时候比较用心,硬是看明白了这次。demo

这次的顺利还得益于上次的ExtJs项目中的上千次firebug脚本调试,从中学习了不少知识。

我觉得难点主要有两个

  • 第一个难点与jQuery无关,全关系到了全局,那就是CSS样式的设置。顶层的li元素的position应设为relative,次级菜单li元素的position设为absolute
  • 判断鼠标激活的元素是否位于顶层,因为这直接影响到了sub menu位置的left坐标的值

代码:
Read more…

jQuery学习#1 – Tab

December 31, 2009 No Comments

jQuery很久以前就开始学习,但是只看完了选择器就丢下了。最近找来了《锋利的jQuery》来看,感觉还不错,看得比之前认真。刚看完了选择器和动画,自己动手做了个tab。demo

jQuery中的动画效果只要是通过更改元素的位置、大小以及透明度来实现的。

  • hide/show方法通过改变元素的hight、width两个属性值来实现元素的隐藏和现实
  • slideUp/slideDown实现的是一种卷帘的效果,实现的方法是改变元素的height属性值
  • fadeOut/fadeIn方法是改变元素的透明度
  • animate则比较全面,可以根据需要从不同角度来实现动画交过,而上面的三个方法的效果都可以通过animate来实现

代码:

Read more…