JQuery(纵向横向菜单)小结.docx

JQuery(纵向横向菜单)小结2010/11/24说明：此次小结是为了展示JQuery实现菜单的效果。文件清单：menu.jsp -菜单JSP页面jquery.js-JQuery源文件JSmenu.js-菜单使用的JSstyle.css-菜单样式文件menu.jsp源文件，如下：JQuery菜单效果机构管理添加机构修改机构查询机构部门管理添加部门修改部门查询部门员工管理添加员工修改员工查询员工机构管理添加机构修改机构查询机构部门管理添加部门修改部门查询部门员工管理添加员工修改员工查询员工style.css样式源文件，如下：/*菜单样式：2010-11-24*/UL,LI/*去掉小圆点*/list-style: none;UL/*清除子菜单缩进*/padding: 0;/*但IE浏览器不能缩进*/margin: 0;/*主菜单样式*/.mainMenu,.crossMenu/*字体大小*/font-size: 12px;/*添加背景图片*/background-image: url(././resources/images/title.gif);/*背景图横向重复*/background-repeat: repeat-x;/*主菜单宽度*/width: 70px;/*子菜单样式*/LI/*背景色*/background-color: #EEEEEE;A/*取消链接的下划线*/text-decoration: none;/*子菜单缩进*/padding-left: 15px;/*让连接充满区域，及菜单边缘也可以点击*问题：如果值为block,IE会出现问题，*不能填充，且子菜单会变样，因此我们*用 inline解决，但是不能解决填充，*因此加上宽度(70 - 15)*/display: block;display: inline;width: 70px;/*在所有的链接加3个像素的上边距和下边距*/padding-top: 3px;padding-bottom: 3px;.mainMenu A,.crossMenu A/*主菜单链接为白色*/color: white;/*链接背景图片*/background-image: url(././resources/images/collapsed.gif);/*背景图不重复*/background-repeat: no-repeat;/*背景箭头的位置*/background-position: 2px center;.mainMenu LI A,.crossMenu LI A/*子菜单链接文字为黑色*/color: black;/*去掉子菜单背景箭头*/background-image: none;/*主菜单下的UL全部隐藏*/.mainMenu UL,.crossMenu ULdisplay: none;/*横向菜单*/.crossMenu/*横向排列*/float: left;/*字体大小*/font-size: 12px;menu.js源文件，如下：$(function()/* * 如果使用.mainMenu a选择器，会 * 出现点击子菜单也会触发click事件 * 解决方法：使用JQuery的特有方式 * .mainMenu a * */$(.mainMenu a).click(function()/找到主菜单项的子菜单项var childMenu = $(this).next(ul);/*常规方法*/*if(none = childMenu.css(display)childMenu.css(display,block);elsechildMenu.css(display,none);*/*使用JQuery的方法 * 数值为毫秒 * 文字：slow/normal,fast*/childMenu.show(100);/childMenu.show(normal);/childMenu.hide(100);/省去if else 判断/childMenu.toggle(normal);/卷帘效果，也支持参数/childMenu.slideDown();/childMenu.slideUp();/省去if else 判断childMenu.slideToggle();changeIcon($(this););/处理横向菜单/*$(.crossMenu a).hover(function()$(this).next(ul).slideDown();,function()/但是鼠标移到子菜单，会有bug,子菜单消失/$(this).next(ul).slideUp();/首先得到子菜单var childMenu = $(this).next(ul);/解决方法，延时处理(300ms)var timeOutID = setTimeout(function()$(this).next(ul).slideUp();,300);childMenu.hover(function()/删除父菜单的延时clearTimeout(timeOutID);,function()/但此时还是有问题，走了很多弯路$(this).slideUp();););*/$(.crossMenu).hover(/自己判断/function()/$(this).children(ul).slideDown();/,/function()/$(this).children(ul).slideUp();/卷帘效果function()$(this).children(ul).slideToggle();changeIcon($(this).children(a);););/*修改主菜单的指示图标*/function changeIcon(mainNode)if(mainNode)if(mainNode.css(background-image).indexOf(collapsed.gif) = 0)mainNode.css(background-image, url(resources/images/expanded.gif);elsemainNode.css(background-image, url(resources/images/collapsed.gif);小结：A部分 页面中的菜单可以通过嵌套ul和li来表示； 菜单最外层为ul，一层每个主菜单放在一个li中，如果有子菜单，在这个主菜单的li中建立新的ul，再依次嵌套即可构件多层的菜单； 浏览器中ul和li元素默认情况下文字前都有圆点标识符，li元素会有缩进.Opera浏览器比较特殊，li的标志符号和其他浏览器不同； list-style属性值为none时，可以清除ul和li前的小圆点 清除子菜单的缩进值，需要padding和margin都为0，其中IE只有margin也为0时才可以清除缩进值； 可以使用background-image来指定一个元素的背景图，如果背景图比元素的实际大小要小，那么背景图会自动在横向和纵向上重复显示，直到填满整个区域； 可以使用background-repeat来控制背景图的重复填充方式； 如果一个元素上同时定义了背景图和背景色，那么有背景图的地方是不会显示背景色的； text-decoration属性值为none时，可以取消链接A文字下方的下划线； background-position可以控制背景图的位置，属性值既可以用数值，也可以使用center,left,top这些值来控制横向和纵向的位置。这个属性的两个值，第一个对应横向，第二个对应纵向；B部分 background-image的值为none表示没有背景图； background-repeat的值为no-repeat时，背景图不会在所在的区域中重复显示； display的值为none可以用来隐藏元素； .mainMenu a 和 .mainMenu a 的不同之处，前者选择使用了.mainMenu的这个class的元素内部所有的a节点，后者只选择.mainMenu的子节点中的a节点； show(),hide()方法可以用于显示或隐藏元素，没有参数的效果和修改css的display属性效果一样。参数可以是以毫秒为单位的数值，或者是slow,normal,fast,都可以控制完成显示或隐藏需要的时间。注意这时动画效果是靠不断改变元素的宽度和高度来实现的。 toggle方法更为强大，可以省去判断元素是否显示、隐藏，直接让显示的元素隐藏起来，隐藏的元素显示出来。参数使用方法和show()和hide()相同； slideDown、slideUp可以实现向下或向上卷动的效果，实际上是通过制定时间内修改元素的高度来实现动画效果。需要注意的是这两个方法参数如果为空的情况下和show()，hide(