正文

javascript内容梳理示例之模态对话框示例之全选和反选以及取消示例之后台管理左侧菜单

颜言  2022-02-13  448

关键词：

 1 <!DOCTYPE html>
 2 <!--示例之模态对话框-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         .hide{
 9             display: none;
10         }
11         .c1{
12             position: fixed;
13             left: 0;
14             top:0;
15             right:0;
16             bottom:0;
17             background-color: black;
18             opacity: 0.6;
19             z-index: 9;
20             }
21         .c2{
22             width:180px;
23             height:120px;
24             background-color: white;
25             position:fixed;
26             left: 50%;
27             top:50%;
28             margin-left: -200PX;
29             margin-top: -200px;
30             z-index: 10;
31             }
32     </style>
33 </head>
34 <body style="margin: 100px;">
35 
36     <div>
37         <input type="button" value="添加" onclick="ShowModel();"/>
38         <table>
39             <thead>
40                 <tr>
41                     <th>主机名</th>
42                     <th>端口</th>
43                 </tr>
44             </thead>
45             <tbody>
46                 <tr>
47                     <td>1.1.1.1</td>
48                     <td>191</td>
49                 </tr>
50                 <tr>
51                     <td>1.1.1.2</td>
52                     <td>192</td>
53                 </tr>
54                 <tr>
55                     <td>1.1.1.3</td>
56                     <td>193</td>
57                 </tr>
58             </tbody>
59         </table>
60     </div>
61     <!--遮罩层开始-->
62     <div id="i1" class="c1 hide"></div>
63     <!--遮罩层结束-->
64     <!--弹出框开始-->
65     <div id="i2" class="c2 hide">
66         <p><input type="text" /></p>
67         <p><input type="text" /></p>
68         <p>
69             <input type="button" value="取消"  onclick="HideModel();"/>
70             <input type="button" value="确定" />
71         </p>
72     </div>
73     <!--弹出框结束-->
74     <script>
75         function ShowModel() {
76             document.getElementById(‘i1‘).classList.remove(‘hide‘);
77             document.getElementById(‘i2‘).classList.remove(‘hide‘);
78                                  }
79         function HideModel() {
80             document.getElementById(‘i1‘).classList.add(‘hide‘);
81             document.getElementById(‘i2‘).classList.add(‘hide‘);
82                                  }
83     </script>
84 </body>
85 </html>

示例之模态对话框

  1 <!DOCTYPE html>
  2 <!--示例之全选和反选以及取消-->
  3 <html lang="en">
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>Title</title>
  7     <style>
  8         .hide{
  9             display: none;
 10         }
 11         .c1{
 12             position: fixed;
 13             left: 0;
 14             top:0;
 15             right:0;
 16             bottom:0;
 17             background-color: black;
 18             opacity: 0.6;
 19             z-index: 9;
 20             }
 21         .c2{
 22             width:180px;
 23             height:120px;
 24             background-color: white;
 25             position:fixed;
 26             left: 50%;
 27             top:50%;
 28             margin-left: -200PX;
 29             margin-top: -200px;
 30             z-index: 10;
 31             }
 32     </style>
 33 </head>
 34 <body style="margin: 100px;">
 35 
 36     <div>
 37         <input type="button" value="添加" onclick="ShowModel();"/>
 38         <input type="button" value="全选" onclick="ChooseAll();"/>
 39         <input type="button" value="取消" onclick="CancleAll();"/>
 40         <input type="button" value="反选" onclick="ReverseAll();"/>
 41         <table>
 42             <thead>
 43                 <tr>
 44                     <th>选择</th>
 45                     <th>主机名</th>
 46                     <th>端口</th>
 47                 </tr>
 48             </thead>
 49             <tbody id="tb">
 50                 <tr>
 51                     <td>
 52                         <input type="checkbox"/>
 53                     </td>
 54                     <td>1.1.1.1</td>
 55                     <td>191</td>
 56                 </tr>
 57                 <tr>
 58                     <td>
 59                         <input type="checkbox" id="test"/>
 60                     </td>
 61                     <td>1.1.1.2</td>
 62                     <td>192</td>
 63                 </tr>
 64                 <tr>
 65                     <td>
 66                         <input type="checkbox"/>
 67                     </td>
 68                     <td>1.1.1.3</td>
 69                     <td>193</td>
 70                 </tr>
 71             </tbody>
 72         </table>
 73     </div>
 74     <!--遮罩层开始-->
 75     <div id="i1" class="c1 hide"></div>
 76     <!--遮罩层结束-->
 77     <!--弹出框开始-->
 78     <div id="i2" class="c2 hide">
 79         <p><input type="text" /></p>
 80         <p><input type="text" /></p>
 81         <p>
 82             <input type="button" value="取消"  onclick="HideModel();"/>
 83             <input type="button" value="确定" />
 84         </p>
 85     </div>
 86     <!--弹出框结束-->
 87     <script>
 88         function ShowModel() {
 89             document.getElementById(‘i1‘).classList.remove(‘hide‘);
 90             document.getElementById(‘i2‘).classList.remove(‘hide‘);
 91                                  }
 92         function HideModel() {
 93             document.getElementById(‘i1‘).classList.add(‘hide‘);
 94             document.getElementById(‘i2‘).classList.add(‘hide‘);
 95                                  }
 96         function ChooseAll() {
 97             var tbody = document.getElementById(‘tb‘)
 98             //获取所有的tr
 99             var tr_list = tbody.children;
100             for(var i=0;i<tr_list.length;i++){
101                                     //循环所有的tr，current_tr
102                                     var current_tr = tr_list[i];
103                                     var checkbox = current_tr.children[0].children[0];
104                                     checkbox.checked = true;
105                                                  }
106                                  }
107         function CancleAll() {
108             var tbody = document.getElementById(‘tb‘)
109             //获取所有的tr
110             var tr_list =tbody.children;
111             for(var i=0;i<tr_list.length;i++){
112                                     //循环所有的tr，current_tr
113                                     var current_tr = tr_list[i];
114                                     var checkbox = current_tr.children[0].children[0];
115                                     checkbox.checked = false;
116                                                  }
117                                  }
118         function ReverseAll() {
119             var tbody = document.getElementById(‘tb‘)
120             //获取所有的tr
121             var tr_list =tbody.children;
122             for(var i=0;i<tr_list.length;i++){
123                                     //循环所有的tr，current_tr
124                                     var current_tr = tr_list[i];
125                                     var checkbox = current_tr.children[0].children[0];
126                                     if(checkbox.checked) {
127                                         checkbox.checked = false;
128                                                              }
129                                     else {
130                                         checkbox.checked = true;
131                                             }
132                                                  }
133                                  }
134     </script>
135 </body>
136 </html>

示例之全选和反选以及取消

 1 <!DOCTYPE html>
 2 <!--示例之后台管理左侧菜单-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         .hide{
 9             display: none;
10                 }
11         .item .header{
12             height:35px;
13             background-color: #2459a2;
14             color: white;
15             line-height: 35px;
16                         }
17     </style>
18 </head>
19 <body>
20     <div style="height: 48px;"> </div>
21     <div style="width: 300px;">
22         <div class="item">
23             <div id =‘i1‘class="header" onclick="ChangeMenu(‘i1‘);"> 菜单一</div>
24             <div class="content">
25                 <div>内容11</div>
26                 <div>内容12</div>
27                 <div>内容13</div>
28             </div>
29         </div>
30         <div class="item">
31             <div id =‘i2‘class="header" onclick="ChangeMenu(‘i2‘);"> 菜单二</div>
32             <div class="content hide">
33                 <div>内容21</div>
34                 <div>内容22</div>
35                 <div>内容23</div>
36             </div>
37         </div>
38         <div class="item">
39             <div id =‘i3‘class="header" onclick="ChangeMenu(‘i3‘);"> 菜单三</div>
40             <div class="content hide">
41                 <div>内容31</div>
42                 <div>内容32</div>
43                 <div>内容33</div>
44             </div>
45         </div>
46         <div class="item">
47             <div id =‘i4‘class="header" onclick="ChangeMenu(‘i4‘);"> 菜单四</div>
48             <div class="content hide">
49                 <div>内容41</div>
50                 <div>内容42</div>
51                 <div>内容43</div>
52             </div>
53         </div>
54     </div>
55     <script>
56         function ChangeMenu(nid) {
57             var current_header = document.getElementById(nid);
58            //console.log(current_header);
59             var  item_list = current_header.parentElement.parentElement.children;
60            //console.log(item_list);
61             for(var i=0;i<item_list.length;i++){
62                                 var current_item = item_list[i];
63                                 current_item.children[1].classList.add(‘hide‘);
64                                                     }
65             current_header.nextElementSibling.classList.remove(‘hide‘);
66                                     }
67     </script>
68 
69 
70 </body>
71 </html>

示例之后台管理左侧菜单

 1 <!DOCTYPE html>
 2 <!--JavaScript内容梳理-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7 </head>
 8 <body>
 9         <div>CSS补充：
10             <div>position</div>
11             <div>background</div>
12             <div>hover</div>
13             <div>overflow</div>
14             <div>z-index</div>
15             <div>opacity</div>
16             <div>示例：输入框右边放置图标</div>
17         </div>
18         <div>javaScript：
19             <div>局部变量 var</div>
20             <div>基本数据类型：
21                 <div>数字</div>
22                 <div>字符串</div>
23                 <div>数组</div>
24                 <div>字典</div>
25                 <div>布尔值</div>
26             </div>
27             <div>For循环</div>
28             <div>条件语句
29                 <div>==</div>
30                 <div>!=</div>
31                 <div>===</div>
32                 <div>||</div>
33                 <div>&&</div>
34             </div>
35             <div>函数的定义：
36                 <div>function func(){....}</div>
37             </div>
38         </div>
39         <div>Dom：
40             <div>找标签
41                 <div>直接找$(‘#id‘) $(‘.c1‘).siblings()</div>
42                 <div>间接找</div>
43             </div>
44             <div>操作
45                 <div>innerText</div>
46                 <div>checkbox:
47                     <div>checked</div>
48                 </div>
49                 <div>className</div>
50                 <div>classList</div>
51             </div>
52             <div>事件：
53                 <div>〈div onclick="函数（123）"〉〈/div〉</div>
54                 <div>〈script〉〈/script〉</div>
55             </div>.
56             <div>定时器：
57                 <div>
58                     setInterval(‘函数（）‘,4000)
59                 </div>
60             </div>
61             <div>其他：
62                 <div>
63                     alert()
64                     console.log()
65                 </div>
66             </div>
67         </div>
68         <div>实例：
69             <div>欢迎光临</div>
70             <div>多选</div>
71             <div>模拟对话框</div>
72             <div>左侧菜单</div>
73             <div>返回顶部</div>
74         </div>
75 </body>
76 </html>

JavaScript内容梳理

javascript设计模式之中介者模式示例

飞机把注册信息放到铁塔里，发送数据到铁塔，报告其它的飞机一些信息。varfeiji=function(name){this.name=name;}feiji.prototype.send=function(msg,to){console.log(this.name+"发送了信息");tatai.sned(msg,to);};feiji.prototype.jieshou=function(msg) 查看详情

java示例代码_从模态对话框中获取响应

java示例代码_从模态对话框中获取响应查看详情

qt之模态非模态半模态窗口的介绍及实现qdialog的exec()方法

一、简述先简单介绍一下模态与非模态对话框。模态对话框简单一点讲就是在弹出模态对话框时，除了该对话框整个应用程序窗口都无法接受用户响应，处于等待状态，直到模态对话框被关闭。这时一般需要点击对话框中的确定... 查看详情

web之javascript语句

---恢复内容开始---一、javaScript语句1，alert(字符串或变量)：警告消息对话框<scripttype="text/javascript">varmynum=30;//定义变量并赋值alert("hello!");//用消息对话框输出“hello！”alert(mynum);//用消息框输出变量“30”</script>注意：1... 查看详情

qt创建模态对话框阻塞整个应用程序和非模态对话框唯一性约束的简单示例

QT创建模态对话框阻塞整个应用程序和非模态对话框唯一性约束的简单示例部分代码：//创建模态对话框阻塞整个应用程序和非模态对话框唯一性约束QMenu*pDialog=mBar->addMenu(QString::fromLocal8Bit("对话框"));QAction*pTopDialog=pDialog->addAc... 查看详情

mfc编程入门之十一（对话框：模态对话框及其弹出过程）

　　加法计算器对话框程序大家照着做一遍后，相信对基于对话框的程序有了些解了，有个好的开始对于以后的学习大有裨益。趁热打铁，这一节讲讲什么是对话框和非模态对话框，以及模态对话框怎样弹出。一、模态对话框和... 查看详情

前端面试知识点梳理之五——javascript面向对象

一、相关问题　　1.创建对象有几种方法　　2.原型，构造函数，实例，原型链　　3.instanceof的原理　　4.new运算符二、问题解答1.创建对象有几种方法查看详情

（转载）vs2010/mfc编程入门之十一（对话框：模态对话框及其弹出过程）

加法计算器对话框程序大家照着做一遍后，相信对基于对话框的程序有些了解了，有个好的开始对于以后的学习大有裨益。趁热打铁，鸡啄米这一节讲讲什么是模态对话框和非模态对话框，以及模态对话框怎样弹出。 &nb... 查看详情

mybatis示例之association(代码片段)

...0c;通过这些代码能够学习Mybatis中很有用的知识，这些内容在doc文档中可能只是简单提到了，或者有一些文字说明，通过这些单元测试能更直观的了解如何在Mybatis使用这些内容。这一节内容为Association关联的结果查询&# 查看详情

jdk模块化之简单示例(代码片段)

...块相关命令行编译打包运行查看模块化的JAR模块声明中的内容简单示例单模块HelloWorld-Module以下示例都采用JDK17，IDEA2021.2进行开发。主要步骤如下：新建一个模块命名模块应用的文件结构开发、运行、打包图解查看详情

jdk模块化之简单示例(代码片段)

go笔记之二：一个完整的播放器示例

...个播放器示例，可进行添加、删除、浏览和模拟播放，其内容是对Go语言接口使用的良好展示源码及可执行文件参考书籍《Go语言编程》，可以正常运行，发布在此以备不时之需查看详情

django示例之--图书管理操作

示例：实现对图书的添加，删除，修改操作models.py文件内容：from django.db import models# Create your models here.class Book(models.Model): title=models.CharField(m 查看详情

express之helloworld示例

...全不一样_，Express应用生成器所创建的应用框架包含多个JavaScript文件、Jade模板和针对不同用途的子目录。进入查看详情

javascript之粗浅原型和原型链(代码片段)

目录1、示例代码2、注解1、示例代码functionStudent(params) this.params=params;letstudent=newStudent('159357');console.log(student.__proto__===Student.prototype);//trueconsole.log(student.co 查看详情

dom节点对象之创建和插入节点示例

...teElement("节点名")　　2、新建文本节点：createTextNode("文本内容")　　3、将文本节点添加到新建节点中：appendChild(文本节点名)　　4、获取要插入节点的对象：getElementById("id名")　　5、将新建节点插入到目标节点对象中：insertChild(... 查看详情

javascript系列文章：react总结之webpack模块组织(代码片段)

现代前端开发离不开打包工具，以Webpack为代表的打包工具已经成为日常开发必备的工具，以React技术栈为例，我们ES6形式的源代码，需要经过Webpack和Babel处理，才能生成发布版文件，在浏览器中运行。今天就结合React来梳理一下W... 查看详情

lvgl|lvgl应用技巧之巧用图层编写模式对话框(代码片段)

文章目录什么是对话框对话框的分类无模式对话框模式对话框lvgl上的解决方案lvgl无模式对话框效果lvgl模式对话框效果实现原理lvgl无模式对话框示例代码lvgl模式对话框代码改进实现源码更近一步的改进什么是对话框模态对话框&... 查看详情