• 第二十七篇 导航栏和内容块


    导航栏和内容块

    上节课留下了一个小练习:

    老师做了一份,但是没有图片图标,所以代码里没有用到 img 标签。
    在写之前,我们要分析吧,这个页面,难度只有左侧的导航栏。因为动态!
    我们可以用到jQuery的mouseover()移入方法 和 mouseout()移出方法,还有click()点击方法,点击一级菜单,弹出二级菜单,老师用的是slideToggle()方法,jQuery特效效果,滑动效果。
    好啦,光说怎么好学?我们看代码:
     
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>综合之前的知识,写一个动态页面</title>
        <!--使用jQuery一定不要忘记引用jQuery文件-->
        <script src="../js/jquery-1.12.2.min.js"></script>
        <style>
            html,body{height: 100%;margin: 0;}
            #div0{
                /*给最外层div宽度,然后居中显示*/
                width: 1360px;
                margin: 0 auto;
                height: 100%;
            }
            #left{
                height: 100%;
                position: fixed;
                float: left;
                background-color: #393D49;
                width: 15%;
                color:#d9d9d9;
                padding:0 10px;
            }
            .rit{
                float: right;
            }
            .f1{
                font-size: 21px;
            }
            .dd{
                padding: 10px 0;
            }
            .f2{
                display: none;
            }
            .f3{
                padding:10px 0 10px 30px;
                font-size:17px;
            }
            .a{
                background-color: #000;
                color:#fff;
                font-weight: 700;
            }
            .b{
                background-color: #009688;
                color:#fff;
                cursor: pointer;
            }
            #center{
                float: right;
                width: 83%;
            }
            #c1{
                float: left;
                width: 100%;
                margin-top: 20px;
                padding-bottom:10px;
                border-bottom:1px solid #dedede;
            }
            #a1{
                float: left;
                background-color: #1AA094;
                color:#fff;
                padding:10px;
                text-decoration: none;
                font-size: 12px;
            }
            #f1{
                float: right;
            }
            #f1 span{
                font-size: 14px;
                border: 1px solid #dedede;
                font-weight: 700;
                background-color: #FBFBFB;
                padding:5px 15px;
            }
            #g{
                font-size: 15px;
                border: 1px solid #dedede;
                padding:3px 15px 4px 15px;
                margin-left: -9px;
            }
            #su{
                color:#fff;
                background-color: #1AA094;
                border: 1px solid #dedede;
                margin-left: -5px;
                padding:6px 7px 5px 7px;
            }
            #ta{
                float: left;
                width: 100%;
                margin-top:20px;
            }
            #ta th{
                background-color: #F2F2F2;
                border: 1px solid #dedede;
            }
            td{
                border: 1px solid #dedede;
                text-align: center;
            }
        </style>
    </head>
    <body>
    <!--给一个最外层div控制宽度,考虑到各位同学和老师电脑分辨率不一样,就演示一下1360px宽度-->
    <div id="div0">
        <div style="float:left; 100%;height: 100%;">
            <!--这个left div,是左侧导航栏。-->
            <div id="left">
                <!--class="f1" 的都是一级菜单-->
                <div class="f1">
                    <div class="dd">
                        系统配置
                        <span class="rit"></span>
                    </div>
                </div>
                <!--class="f2" 的都是二级菜单-->
                <div class="f2">
                    <!--二级菜单里,划分-->
                    <div class="f3">葫芦娃</div>
                    <div class="f3">西游记</div>
                    <div class="f3">三国</div>
                </div>
                <div class="f1">
                    <div class="dd">
                        菜单配置
                        <span class="rit"></span>
                    </div>
                </div>
                <div class="f2">
                    <div class="f3">左导航栏</div>
                    <div class="f3">顶导航栏</div>
                </div>
                <div class="f1">
                    <div class="dd">
                        内容管理
                        <span class="rit"></span>
                    </div>
                </div>
                <div class="f2">
                    <div class="f3">文章管理</div>
                    <div class="f3">评论管理</div>
                </div>
                <div class="f1">
                    <div class="dd">
                        用户管理
                        <span class="rit"></span>
                    </div>
                </div>
                <div class="f2">
                    <div class="f3">普通用户</div>
                    <div class="f3">管理员</div>
                    <div class="f3">权限组</div>
                    <div class="f3">会员等级</div>
                </div>
                <div class="f1">
                    <div class="dd">
                        记录管理
                        <span class="rit"></span>
                    </div>
                </div>
                <div class="f2">
                    <div class="f3">聊天记录</div>
                    <div class="f3">登录记录</div>
                    <div class="f3">交易记录</div>
                </div>
                <div class="f1">
                    <div class="dd">
                        扩展管理
                        <span class="rit"></span>
                    </div>
                </div>
                <div class="f2">
                    <div class="f3">钩子</div>
                    <div class="f3">插件</div>
                </div>
            </div>
            <!--以上是左侧导航栏-->
            <!--以下是中间内容部分-->
            <div id="center">
                <div id="c1">
                    <a id="a1" href="javascript:;">添加用户</a>
                    <form id="f1" action="#" method="post">
                        <span>关键字</span>
                        <input id="g" type="text" placeholder="请输入关键字"/>
                        <input id="su" type="submit" value="搜索"/>
                    </form>
                </div>
                <table cellspacing="0" id="ta">
                    <tr>
                        <th>ID</th>
                        <th>用户名</th>
                        <th>手机</th>
                        <th>邮箱</th>
                        <th>状态</th>
                        <th>创建时间</th>
                        <th>最后登录时间</th>
                        <th>最后登录IP</th>
                        <th>操作</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                        <td>8</td>
                        <td>9</td>
                    </tr>
                </table>
            </div>
            <!--以上是中间内容部分-->
        </div>
    </div>
    <!--以下是写 js -->
    <script>
        var a = $(".f1"); //将此类传给我们声明的a来控制
        //鼠标移入一级菜单,添加类
        a.mouseover(function (){
            //addClass()方法是添加此类
            $(this).children(".dd").addClass("a");
        });
        //鼠标移入一级菜单,删除类
        a.mouseout(function (){
            //removeClass()方法是删除此类
            $(this).children(".dd").removeClass("a");
        });
        //鼠标点击一级菜单,弹出相应的二级菜单
        a.click(function (){
            //先隐藏所有二级菜单并且改变后面的内容
            a.next().slideUp();
            a.find(".rit").text('');
            //判断它的内容,然后做出修改
            if($(this).find(".rit").text() == ''){
                $(this).find(".rit").text('');
            }
            else{
                $(this).find(".rit").text('');
            }
            //现在当前一级菜单下面的二级,使用的是滑动效果 取反向
            $(this).next().slideToggle();
        });
    
        //以下是二级菜单的 样式
        var b =$(".f3");//将此类传给我们声明的b来控制
        //移入时候,增加样式
        b.mouseover(function (){
            $(this).addClass("b");
        });
        //移出时候,删除样式
        b.mouseout(function (){
            $(this).removeClass("b");
        });
    
    </script>
    </body>
    </html>
    260行左右的代码,如果我们使用外部css和js,那么html页面的代码就会减少很多。因为老师是演示,就不躲躲藏藏的,就全写在页面上。 同学们重点注意看,左侧导航栏,一级菜单和二级菜单的关系。
     
    老师用到的是jQuery,同学们如果直接copy过去,主要jQuery文件的引用和路径
     
     

    第二十七篇 导航栏和内容块

  • 相关阅读:
    AJAX局部刷新
    jquery 调用数据
    java 节点流(字符流,字节流)和包装流(缓冲流,转换流)
    java File类的使用以及一些函数
    java 自定义泛型
    java 注解
    jdbc baseDAO 以及 每个类的继承
    jdbc 事物 commit 和rollback方法
    jdbc 可处理数据库事物的通用增删查改函数
    jdbc 数据库批处理insert操作
  • 原文地址:https://www.cnblogs.com/longfeng995/p/7597147.html
Copyright © 2020-2023  润新知