左侧菜单,表格,认证登录作业

  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">&times;</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">&times;</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>
原文地址:https://www.cnblogs.com/ldq1996/p/7682654.html