左侧菜单，表格，认证登录作业
Posted TAMAYURA
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了左侧菜单，表格，认证登录作业相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <!-- saved from url=(0041)http://v3.bootcss.com/examples/dashboard/ --> 3 <html lang="zh-CN"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 7 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 8 <meta name="viewport" content="width=device-width, initial-scale=1"> 9 <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> 10 <meta name="description" content=""> 11 <meta name="author" content=""> 12 <link rel="icon" href="http://v3.bootcss.com/favicon.ico"> 13 14 <title>Dashboard Template for Bootstrap</title> 15 16 <!-- Bootstrap core CSS --> 17 <link href="./Dashboard_files/bootstrap.min.css" rel="stylesheet"> 18 19 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 20 <link href="./Dashboard_files/ie10-viewport-bug-workaround.css" rel="stylesheet"> 21 22 <!-- Custom styles for this template --> 23 <link href="./Dashboard_files/dashboard.css" rel="stylesheet"> 24 25 <!-- Just for debugging purposes. Don‘t actually copy these 2 lines! --> 26 <!--[if lt IE 9]> 27 <script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> 28 <script src="Dashboard_files/ie-emulation-modes-warning.js"></script> 29 30 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 31 <!--[if lt IE 9]> 32 <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> 33 <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> 34 <![endif]--> 35 36 37 <style> 38 .menu { 39 margin: 0 -20px; 40 border-bottom: 1px solid #336699; 41 } 42 43 .head { 44 padding: 15px; 45 } 46 47 .my-table-tool { 48 margin-bottom: 15px; 49 } 50 51 .menu .nav-sidebar > li > a { 52 padding-right: 40px; 53 padding-left: 40px; 54 } 55 56 .input_color { 57 border-color: #f66495; 58 } 59 60 .text_color { 61 color: #f66495; 62 } 63 </style> 64 65 </head> 66 67 <body> 68 69 <nav class="navbar navbar-inverse navbar-fixed-top"> 70 <div class="container-fluid"> 71 <div class="navbar-header"> 72 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 73 aria-expanded="false" aria-controls="navbar"> 74 <span class="sr-only">Toggle navigation</span> 75 <span class="icon-bar"></span> 76 <span class="icon-bar"></span> 77 <span class="icon-bar"></span> 78 </button> 79 <a class="navbar-brand" href="http://v3.bootcss.com/examples/dashboard/#">Project name</a> 80 </div> 81 <div id="navbar" class="navbar-collapse collapse"> 82 <ul class="nav navbar-nav navbar-right"> 83 84 <li><a href="http://v3.bootcss.com/examples/dashboard/#">Dashboard</a></li> 85 <li><a href="http://v3.bootcss.com/examples/dashboard/#">Settings</a></li> 86 <li><a href="http://v3.bootcss.com/examples/dashboard/#">Profile</a></li> 87 <li><a href="http://v3.bootcss.com/examples/dashboard/#">Help</a></li> 88 <li><a href="" data-toggle="modal" data-target="#myModal2">登录</a></li> 89 <li><a href="">注册</a></li> 90 91 </ul> 92 <form class="navbar-form navbar-right"> 93 <input type="text" class="form-control" placeholder="Search..."> 94 </form> 95 </div> 96 </div> 97 </nav> 98 99 <div class="container-fluid"> 100 <div class="row"> 101 <div class="col-sm-3 col-md-2 sidebar"> 102 103 <div class="menu"> 104 <div class="head bg-primary">菜单一</div> 105 <ul class="nav nav-sidebar"> 106 <li class=""><a href="http://v3.bootcss.com/examples/dashboard/#">Overview <span 107 class="sr-only">(current)</span></a> 108 </li> 109 <li><a href="http://v3.bootcss.com/examples/dashboard/#">Reports</a></li> 110 <li><a href="http://v3.bootcss.com/examples/dashboard/#">Analytics</a></li> 111 <li><a href="http://v3.bootcss.com/examples/dashboard/#">Export</a></li> 112 </ul> 113 </div> 114 115 <div class="menu"> 116 <div class="head bg-primary">菜单二</div> 117 <ul class="nav nav-sidebar"> 118 <li><a href="http://v3.bootcss.com/examples/dashboard/">Nav item</a></li> 119 <li><a href="http://v3.bootcss.com/examples/dashboard/">Nav item again</a></li> 120 <li><a href="http://v3.bootcss.com/examples/dashboard/">One more nav</a></li> 121 <li><a href="http://v3.bootcss.com/examples/dashboard/">Another nav item</a></li> 122 <li><a href="http://v3.bootcss.com/examples/dashboard/">More navigation</a></li> 123 </ul> 124 </div> 125 126 <div class="menu"> 127 <div class="head bg-primary">菜单三</div> 128 <ul class="nav nav-sidebar"> 129 <li><a href="http://v3.bootcss.com/examples/dashboard/">Nav item again</a></li> 130 <li><a href="http://v3.bootcss.com/examples/dashboard/">One more nav</a></li> 131 <li><a href="http://v3.bootcss.com/examples/dashboard/">Another nav item</a></li> 132 </ul> 133 </div> 134 135 136 </div> 137 <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> 138 139 <div class="panel panel-primary"> 140 <div class="panel-heading">Panel heading without title</div> 141 <div class="panel-body"> 142 143 <!-- 表格上面的按钮--> 144 145 <div class="row my-table-tool"> 146 <div class="col-md-12"> 147 <button class="btn btn-success" data-toggle="modal" data-target="#myModal">添加</button> 148 </div> 149 </div> 150 151 <div class="table-responsive table-bordered"> 152 <table class="table table-striped"> 153 <thead> 154 <tr> 155 <th>#</th> 156 <th>姓名</th> 157 <th>年龄</th> 158 <th>性别</th> 159 <th>操作</th> 160 161 </tr> 162 </thead> 163 <tbody> 164 <tr> 165 <td>1</td> 166 <td class="col-md-3">ldq</td> 167 <td class="col-md-3">15</td> 168 <td class="col-md-3"> 169 男 170 </td> 171 <td> 172 <button class="btn del_but btn-danger">删除</button> 173 <button class="btn alter_but btn-primary">更改</button> 174 </td> 175 </tr> 176 177 178 </tbody> 179 </table> 180 </div> 181 </div> 182 </div> 183 184 185 </div> 186 </div> 187 </div> 188 189 <!--添加数据Modal--> 190 <div id="myModal" class="modal fade " tabindex="-1" role="dialog"> 191 <div class="modal-dialog modal-lg" role="document"> 192 <div class="modal-content"> 193 <div class="modal-header"> 194 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span> 195 </button> 196 <h4 class="modal-title">Modal title</h4> 197 </div> 198 <div class="modal-body"> 199 <form class="form-horizontal"> 200 <div class="form-group"> 201 <label for="name" class="col-sm-2 control-label">姓名</label> 202 <div class="col-sm-10"> 203 <input type="email" class="form-control item" id="name" placeholder="name"> 204 </div> 205 </div> 206 <div class="form-group"> 207 <label for="age" class="col-sm-2 control-label">年龄</label> 208 <div class="col-sm-10"> 209 <input type="email" class="form-control item" id="age" placeholder="age"> 210 </div> 211 </div> 212 <div class="form-group"> 213 <label for="sex" class="col-sm-2 control-label">性别</label> 214 <div class="col-sm-10"> 215 <input type="email" class="form-control item" id="sex" placeholder="sex"> 216 </div> 217 </div> 218 219 220 </form> 221 </div> 222 <div class="modal-footer"> 223 <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> 224 <button type="button" class="btn btn-primary">提交</button> 225 </div> 226 </div><!-- /.modal-content --> 227 </div><!-- /.modal-dialog --> 228 </div><!-- /.modal --> 229 <!-- 登录Modal --> 230 <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 231 <div class="modal-dialog modal-lg" role="document"> 232 <div class="modal-content"> 233 <div class="modal-header"> 234 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span> 235 </button> 236 <h4 class="modal-title" id="myModalLabel">Modal title</h4> 237 </div> 238 <div class="modal-body"> 239 <form class="form-horizontal"> 240 <div class="form-group"> 241 <label for="inputEmail3" class="col-sm-2 control-label">Email</label> 242 243 <div class="col-sm-10"> 244 <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> 245 246 <p class="none_add_text"></p> 247 </div> 248 </div> 249 <div class="form-group"> 250 <label for="inputPassword3" class="col-sm-2 control-label">Password</label> 251 252 <div class="col-sm-10"> 253 <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> 254 <p class="none_add_text"></p> 255 </div> 256 </div> 257 <div class="form-group"> 258 <div class="col-sm-offset-2 col-sm-10"> 259 <div class="checkbox"> 260 <label> 261 <input type="checkbox"> Remember me 262 </label> 263 </div> 264 </div> 265 </div> 266 <div class="form-group"> 267 <div class="col-sm-offset-2 col-sm-10"> 268 <button type="submit" class="btn btn-default">Sign in</button> 269 </div> 270 </div> 271 </form> 272 </div> 273 <div class="modal-footer"> 274 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 275 <button type="button" class="btn btn-primary">登录确认</button> 276 </div> 277 </div> 278 </div> 279 </div> 280 <!-- Bootstrap core javascript 281 ================================================== --> 282 <!-- Placed at the end of the document so the pages load faster --> 283 <script src="Dashboard_files/jquery.min.js"></script> 284 <script>window.jQuery || document.write(‘<script src="../../assets/js/vendor/jquery.min.js"><\/script>‘)</script> 285 <script src="Dashboard_files/bootstrap.min.js"></script> 286 <!-- Just to make our placeholder images work. Don‘t actually copy the next line! --> 287 <script src="Dashboard_files/holder.min.js"></script> 288 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 289 <script src="Dashboard_files/ie10-viewport-bug-workaround.js"></script> 290 291 <script> 292 $(".head").on("click", function () { 293 // 兄弟标签 紧挨着的ul标签 隐藏 addClass("hide") 294 $(this).parent().siblings().children("ul").slideUp(); 295 // 把自己 紧挨着的ul标签显示 removeClass("hide") 296 // $(this).next().removeClass("hide"); 297 $(this).next().slideToggle(); 298 }); 299 // $(".head").click(function (e) { 300 // $(e.target.nextElementSibling).toggleClass(‘hide‘) 301 // }); 302 303 //监听 304 $(document).ready(function () { 305 $(document).click(function (e) { 306 // console.log($(e.target).text()); 307 if ($(e.target).text() == ‘删除‘) { 308 $(e.target).parent().parent().remove(); 309 // console.log($(e.target).parent().parent()) 310 } 311 else if ($(e.target).text() == ‘添加‘) { 312 $(".model").removeClass("hide"); 313 $(".shade").removeClass("hide") 314 315 } 316 else if ($(e.target).text() == ‘提交‘) { 317 $("#myModal").modal("hide"); 318 str_num = 0; 319 320 var new_tr = ‘<tr><td>‘ + str_num + ‘</td><td>‘ + $($(".item")[0]).val() + ‘</td><td>‘ + $($(".item")[1]).val() + ‘</td><td>‘ + $($(".item")[2]).val() + ‘</td><td><button class="del_but btn-danger">删除</button><button class="alter_but btn-primary">更改</button></td></tr>‘; 321 322 console.log(str_num); 323 324 // parseInt(str_num)+=1 325 $("tbody").append(new_tr); 326 327 } 328 else if ($(e.target).text() == ‘更改‘) { 329 $(e.target).parent().parent().children().eq(1).html(‘<input type="text" value=‘ + $(e.target).parent().parent().children().eq(1).html() + ‘>‘) 330 $(e.target).parent().parent().children().eq(2).html(‘<input type="text" value=‘ + $(e.target).parent().parent().children().eq(2).html() + ‘>‘) 331 $(e.target).parent().parent().children().eq(3).html(‘<input type="text" value=‘ + $(e.target).parent().parent().children().eq(3).html() + ‘>‘) 332 $(e.target).text(‘保存‘); 333 $(e.target).attr("class", "btn btn-info saveBtn"); 334 335 } 336 else if ($(e.target).text() == ‘保存‘) { 337 $(e.target).parent().parent().children().eq(1).html($(e.target).parent().parent().children().eq(1).children().val()); 338 $(e.target).parent().parent().children().eq(2).html($(e.target).parent().parent().children().eq(2).children().val()); 339 $(e.target).parent().parent().children().eq(3).html($(e.target).parent().parent().children().eq(3).children().val()); 340 341 $(e.target).text(‘更改‘); 342 $(e.target).attr("class", "btn btn-primary edit"); 343 } 344 else if ($(e.target).text() == ‘登录确认‘) { 345 if ($(‘#inputEmail3‘).val() == ‘‘) { 346 $(‘#inputEmail3‘).next().text("请输入注册时用的邮箱或者手机号呀") 347 $(‘#inputEmail3‘).addClass("input_color"); 348 $(‘#inputEmail3‘).next().addClass("text_color") 349 } else { 350 $(‘#inputEmail3‘).next().text("") 351 } 352 if ($(‘#inputPassword3‘).val() == ‘‘) { 353 $(‘#inputPassword3‘).next().text("喵，你没输入密码么？"); 354 $(‘#inputPassword3‘).addClass("input_color"); 355 $(‘#inputPassword3‘).next().addClass("text_color") 356 } else { 357 $(‘#inputPassword3‘).next().text(""); 358 if($(‘#inputPassword3‘).val() !== ‘‘&$(‘#inputEmail3‘).val() !== ‘‘){ 359 $("#myModal2").modal("hide"); 360 } 361 362 } 363 } 364 else if ($(e.target).hasClass("input_color")) { 365 $(‘.form-control‘).next().text(""); 366 $(‘.form-control‘).removeClass("input_color"); 367 $(‘.form-control‘).next().removeClass("text_color") 368 } 369 }) 370 }); 371 </script> 372 </body> 373 </html>
以上是关于左侧菜单，表格，认证登录作业的主要内容，如果未能解决你的问题，请参考以下文章
Express实战 - 应用案例- realworld-API - 路由设计 - mongoose - 数据验证 - 密码加密 - 登录接口 - 身份认证 - token - 增删改查API(代码片段