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

Posted 颜言

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript内容梳理 示例之模态对话框 示例之全选和反选以及取消 示例之后台管理左侧菜单相关的知识,希望对你有一定的参考价值。

 

 

技术分享
 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内容梳理 示例之模态对话框 示例之全选和反选以及取消 示例之后台管理左侧菜单的主要内容,如果未能解决你的问题,请参考以下文章

Bootstrap之javascript插件---弹出框(模态框)Modal

javascript中有几种模态框

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

Vue模态框的封装

学习内容3

JavaScript练习 - 模态对话框