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内容梳理 示例之模态对话框 示例之全选和反选以及取消 示例之后台管理左侧菜单的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap之javascript插件---弹出框（模态框）Modal