6、第九 - WEB开发基础 - HTML页面中的JS案例讲解

于 2018-09-19 16:20:00 发布
阅读量84 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/chen170615/p/9670691.html
本文介绍如何利用HTML、CSS和JavaScript实现网页中的弹出框功能，包括显示与隐藏控制，并展示了全选、反选及取消等操作的实现方法。此外，还介绍了通过document API实现后台管理左侧菜单的动态显示。

 　页面中的弹出框思路设计，其实是要做隐藏。就一个开关、配合样式做操作。 

一、 HTML页面中的弹出框设计

本案例主要是应用了，document、display的隐藏、删除样式功能。其中，样式层叠的效果。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;

        }
        .c1 {
            position: fixed;
            left: 0;
            right: 0;
            top:0;
            bottom: 0;
            background-color: white;
            z-index: 9;
            opacity: 0.6;
        }
        .c2 {
            width: 200px;
            height: 150px;
            background-color: white;
            position: fixed;
            left: 50%;
            right: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
            border: 1px solid black;
        }

    </style>
</head>
<body style="margin: 0">

    <div>
        <input type="button" value="添加" onclick="ShowModel()">
        <table border="1">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>职业</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>chen1203</td>
                    <td>IT</td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- 遮罩层开始-->
    <div id="i1" class="c1 hide"></div>
    <!-- 遮罩层开始-->

    <!-- 弹出框开始-->
    <div id='i2' class="c2 hide">
        <p><input type="text" /></p>
        <p><input type="text" /></p>
        <p>
            <input type="button" value="取消" onclick="HideModel()" />
            <input type="submit" value="确定"  />
        </p>
    </div>
     <!-- 弹出框结束-->

    <script>
        function ShowModel() {
            document.getElementById('i1').classList.remove('hide');
            document.getElementById('i2').classList.remove('hide');

        }
        function HideModel() {
            document.getElementById('i1').classList.add('hide');
            document.getElementById('i2').classList.add('hide');
        }
    </script>
</body>
</html>

 效果：（点击：添加，弹出对话框；点击 取消，弹出框关闭，后续可以优化点击 确定 提交信息到后台）

二、 弹出框设计中全选、反选及取消

本案例，使用HTML框架、 CSS、JS的结合 ，采用复选框的模式判断做选择。

例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;

        }
        .c1 {
            position: fixed;
            left: 0;
            right: 0;
            top:0;
            bottom: 0;
            background-color: white;
            z-index: 9;
            opacity: 0.6;
        }
        .c2 {
            width: 200px;
            height: 150px;
            background-color: white;
            position: fixed;
            left: 50%;
            right: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
            border: 1px solid black;
        }

    </style>
</head>
<body style="margin: 0">

    <div>
        <input type="button" value="添加" onclick="ShowModel();" />
        <input type="button" value="全选" onclick="ChooseAll();" />
        <input type="button" value="反选" onclick="CancleAll();" />
        <input type="button" value="取消" onclick="ReverAll();" />

        <table id="tb_1">
            <tbody>
                <tr >
                    <td><input type="checkbox"/></td>
                    <td>chen1</td>
                    <td>IT1</td>
                </tr>
                <tr >
                    <td><input type="checkbox"/></td>
                    <td>chen2</td>
                    <td>IT2</td>
                </tr>
                <tr >
                    <td><input type="checkbox"/></td>
                    <td>chen3</td>
                    <td>IT3</td>
                </tr>
                <tr >
                    <td><input type="checkbox"/></td>
                    <td>chen4</td>
                    <td>IT4</td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- 遮罩层开始-->
    <div id="i1" class="c1 hide"></div>
    <!-- 遮罩层开始-->

    <!-- 弹出框开始-->
    <div id='i2' class="c2 hide">
        <p><input type="text" /></p>
        <p><input type="text" /></p>
        <p>
            <input type="button" value="取消" onclick="HideModel()" />
            <input type="submit" value="确定"  />
        </p>
    </div>
     <!-- 弹出框结束-->

    <script>
        function ShowModel() {
            document.getElementById('i1').classList.remove('hide');
            document.getElementById('i2').classList.remove('hide');

        }
        function HideModel() {
            document.getElementById('i1').classList.add('hide');
            document.getElementById('i2').classList.add('hide');
        }

        function ChooseAll() {
            var tbody = document.getElementById('tb_1');
            var tr_list = tbody.children[0].children;

            //循环所有的tr,currcnt_tr,注意html的层级关系 document.getElementById('tb_1').children[0].children[0].children[0]
            for (var i=0;i<tr_list.length;i++) {
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = true;
            }
        }

        function CancleAll() {
            var tbody = document.getElementById('tb_1');
            var tr_list = tbody.children[0].children;

            //循环所有的tr,currcnt_tr,注意html的层级关系 document.getElementById('tb_1').children[0].children[0].children[0]
            for (var i=0;i<tr_list.length;i++) {
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                 if (checkbox.checked) {
                    checkbox.checked = false;
                } else {
                    checkbox.checked = true;
                }
            }

        }
        function ReverAll() {
            var tbody = document.getElementById('tb_1');
            var tr_list = tbody.children[0].children;

            //循环所有的tr,currcnt_tr,注意html的层级关系 document.getElementById('tb_1').children[0].children[0].children[0]
            for (var i = 0; i < tr_list.length; i++) {
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = false
            }
        }

    </script>
</body>
</html>

 效果：（无论是点击，添加、全选、反选、取消，都会有相对应的操作）

三、 后台管理左侧菜单

本次案例的应用只知识点，document 中的间接查找功能。

示例如下： 

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .item .header {
            height: 35px;
            width: 300px;
            background-color: cornflowerblue;
            color: white;
            line-height: 35px;
        }

    </style>
</head>
<body>
    <div style="width: 300px;">
        <div class="item">
            <div id="i1" class="header" onclick="ChangeMenu('i1')">菜单1</div>
            <div class="contnet hide">
                <div>内容信息1</div>
                <div>内容信息1</div>
                <div>内容信息1</div>
                <div>内容信息1</div>
            </div>
        </div>
        <div class="item">
            <div id="i2" class="header" onclick="ChangeMenu('i2')">菜单2</div>
            <div  class="contnet hide ">
                <div>内容信息2</div>
                <div>内容信息2</div>
                <div>内容信息2</div>
                <div>内容信息2</div>
            </div>
        </div>
        <div class="item">
            <div id="i3" class="header" onclick="ChangeMenu('i3')">菜单3</div>
            <div  class="contnet hide ">
                <div>内容信息3</div>
                <div>内容信息3</div>
                <div>内容信息3</div>
                <div>内容信息3</div>
            </div>
        </div>
        <div class="item">
            <div id="i4" class="header" onclick="ChangeMenu('i4')">菜单4</div>
            <div  class="contnet hide ">
                <div>内容信息4</div>
                <div>内容信息4</div>
                <div>内容信息4</div>
                <div>内容信息4</div>
            </div>
        </div>
    </div>
    <script>
        function ChangeMenu(nid){
            var currnet_header = document.getElementById(nid);
            var item_list = currnet_header.parentElement.parentElement.children;
            for (var i=0;i<item_list.length;i++){
                var current_item = item_list[i];
                current_item.children[1].classList.add('hide');
            }
            currnet_header.nextElementSibling.classList.remove('hide')
//            console.log(currnet_header)
        }
    </script>
</body>
</html>

 效果：(点击菜单的时候，会弹出对话框下的内容)

~~ 以上~~

 

转载于:https://www.cnblogs.com/chen170615/p/9670691.html

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值