注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

IOS & JAVA KEY

(iMilo)

 
 
 

日志

 
 
关于我

All the splendor in the world is not worth a good friend!! Hello my friend!!

网易考拉推荐

JQuery(纵向横向菜单)小结  

2010-11-24 21:06:52|  分类: JQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

2010/11/24

说明:此次小结是为了展示JQuery实现菜单的效果。

文件清单:

       menu.jsp        ----菜单JSP页面

       jquery.js         ----JQuery源文件JS

       menu.js          ----菜单使用的JS

       style.css          ----菜单样式文件

menu.jsp源文件,如下:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>

        <title>JQuery[菜单效果]</title>

        <link rel="stylesheet" type="text/css" href="style.css" />

        <script type="text/javascript" src="jquery.js"></script>

        <script type="text/javascript" src="menu.js"></script>

    </head>

    <body>

        <ul>

            <li class="mainMenu">

                <a href="#">机构管理</a>

                <ul>

                    <li><a href="#">添加机构</a></li>

                    <li><a href="#">修改机构</a></li>

                    <li><a href="#">查询机构</a></li>

                </ul>

            </li>

            <li class="mainMenu">

                <a href="#">部门管理</a>

                <ul>

                    <li><a href="#">添加部门</a></li>

                    <li><a href="#">修改部门</a></li>

                    <li><a href="#">查询部门</a></li>

                </ul>

            </li>

            <li class="mainMenu">

                <a href="#">员工管理</a>

                <ul>

                    <li><a href="#">添加员工</a></li>

                    <li><a href="#">修改员工</a></li>

                    <li><a href="#">查询员工</a></li>

                </ul>

            </li>

        </ul>

        <br/>

        <hr/>

        <br/>

        <ul>

            <li class="crossMenu">

                <a href="#">机构管理</a>

                <ul>

                    <li><a href="#">添加机构</a></li>

                    <li><a href="#">修改机构</a></li>

                    <li><a href="#">查询机构</a></li>

                </ul>

            </li>

            <li class="crossMenu">

                <a href="#">部门管理</a>

                <ul>

                    <li><a href="#">添加部门</a></li>

                    <li><a href="#">修改部门</a></li>

                    <li><a href="#">查询部门</a></li>

                </ul>

            </li>

            <li class="crossMenu">

                <a href="#">员工管理</a>

                <ul>

                    <li><a href="#">添加员工</a></li>

                    <li><a href="#">修改员工</a></li>

                    <li><a href="#">查询员工</a></li>

                </ul>

            </li>

        </ul>

    </body>

</html>

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 UL{

    display: 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');

                }

                else

                {

                    childMenu.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)');

        }

        else

        {

            mainNode.css('background-image', 'url(resources/images/collapsed.gif)');

        }

    }

}

       

小结:

A部分

     页面中的菜单可以通过嵌套ulli来表示;

     菜单最外层为ul,一层每个主菜单放在一个li中,如果有子菜单,在这个主菜单的li中建立新的ul,再依次嵌套即可构件多层的菜单;

     浏览器中ulli元素默认情况下文字前都有圆点标识符,li元素会有缩进.Opera浏览器比较特殊,li的标志符号和其他浏览器不同;

     list-style属性值为none时,可以清除ulli前的小圆点

     清除子菜单的缩进值,需要paddingmargin都为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()方法可以用于显示或隐藏元素,没有参数的效果和修改cssdisplay属性效果一样。参数可以是以毫秒为单位的数值,或者是’slow’,’normal’,fast’,都可以控制完成显示或隐藏需要的时间。注意这时动画效果是靠不断改变元素的宽度和高度来实现的。

     toggle方法更为强大,可以省去判断元素是否显示、隐藏,直接让显示的元素隐藏起来,隐藏的元素显示出来。参数使用方法和show()hide()相同;

     slideDownslideUp可以实现向下或向上卷动的效果,实际上是通过制定时间内修改元素的高度来实现动画效果。需要注意的是这两个方法参数如果为空的情况下和show()hide()不同;

     slideToggletoggle达到类似的效果;

     DOCTYPE对于JQuery的动画效果是有影响的。没有DOCTYPE定义时,在IE中,JQuery的动画会出现闪烁的糟糕效果;

     Float的值为left,可以使原本各自位于一行的元素全部在一行中向左浮动;

C部分

     可以给多个选择器定义同样的样式,选择器之间用,分割。同样对于JQuery$()方法,也可以传入多个选择器。

  评论这张
 
阅读(1961)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017