1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 .clearfix:after{
8 content: '';
9 display: table;
10 clear: both;
11 }
12 .div1{
13 width: 800px;
14 /*background-color: gold;*/
15 margin: 100px auto 0;
16
17 }
18
19 .h2{
20 margin: 0;
21 }
22
23 .div2{
24 width: 800px;
25 margin: 20px auto 20px;
26 }
27
28 .input01{
29 float: left;
30 width: 750px;
31 height: 20px;
32
33 }
34 .input02{
35 float: right;
36 cursor: pointer;
37 }
38
39 .div3{
40 width: 800px;
41 }
42 .ul01{
43 list-style: none;
44 width: 800px;
45 margin: 0;
46 padding: 0;
47
48 }
49
50 .li01{
51 width: 800px;
52 border-bottom: 1px solid #666;
53 margin: 0;
54 height: 40px;
55 /*background-color: green;*/
56 overflow: hidden;
57
58 }
59 .span01{
60 float: left;
61 line-height: 40px;
62 font-size: 14px;
63 }
64 .span02{
65 float: right;
66 width: 200px;
67 height: 40px;
68 }
69 .span02 input{
70 float: right;
71 margin: 0;
72 line-height: 40px;
73 margin-right: 10px;
74 border: 0;
75 background-color: #fff;
76 cursor: pointer;
77 padding: 0
78 font-size: 20px;
79 outline: none;
80 }
81 .span02 input:hover{
82 color: red;
83 }
84 </style>
85 <script type="text/javascript" src="../jquery-1.12.4.min.js"></script>
86 <script type="text/javascript">
87 $(function(){
88 $input01 = $('.input01');
89 $input02 = $('.input02');
90 $ul01 = $('.ul01');
91
92 $input02.click(function(){
93 var $val = $input01.val();
94 $input01.val('');
95 if ($val == '')
96 {
97 alert('请输入你要新建的文件名');
98 return;
99 }
100 else
101 {
102 $a = $('<li class="li01 clearfix"><span class="span01">' + $val + '</span><span class="span02"><input type="button" name="" value="↑" class="input03"><input type="button" name="" value="↓" class="input04"><input type="button" name="" value="删除" class="input05"></span></li>');
103 $ul01.append($a);
104 }
105 })
106
107 $ul01.delegate('input','click',function(){
108 var $handle = $(this).prop('class');
109 if ($handle == 'input05')
110 {
111 ($(this).parent()).parent().remove();
112 return;
113 }
114
115 if ($handle == 'input04')
116 {
117 ($(this).parent()).parent().insertAfter(($(this).parent()).parent().next());
118 return;
119 }
120
121 if ($handle == 'input03')
122 {
123 if (($(this).parent()).parent().prev().length == 0)
124 {
125 alert('this is top');
126 return;
127 }
128 else
129 {
130 ($(this).parent()).parent().insertBefore(($(this).parent()).parent().prev());
131 return;
132 }
133
134
135 }
136 });
137 });
138 </script>
139 </head>
140 <body>
141 <div class="div1">
142 <h2 class="h2">To do list</h2>
143 <div class="div2 clearfix">
144 <input type="text" name="" class="input01" >
145 <input type="button" name="" value="增加" class="input02">
146 </div>
147
148 <div class="div3">
149 <ul class="ul01">
150 <li class="li01 clearfix">
151 <span class="span01">学习html</span>
152 <span class="span02">
153 <input type="button" name="" value="↑" class="input03">
154 <input type="button" name="" value="↓" class="input04">
155 <input type="button" name="" value="删除" class="input05">
156 </span>
157 </li>
158 <li class="li01 clearfix">
159 <span class="span01">学习python</span>
160 <span class="span02">
161 <input type="button" name="" value="↑" class="input03">
162 <input type="button" name="" value="↓" class="input04">
163 <input type="button" name="" value="删除" class="input05">
164 </span>
165 </li>
166 <li class="li01 clearfix">
167 <span class="span01">python</span>
168 <span class="span02">
169 <input type="button" name="" value="↑" class="input03">
170 <input type="button" name="" value="↓" class="input04">
171 <input type="button" name="" value="删除" class="input05">
172 </span>
173 </li>
174 </ul>
175 </div>
176 </div>
177 </body>
178 </html>
