水果购物网UI界面的最新修改

表单控件(Form Control)：复选框(input type="checkbox")

复选框允许用户在一组选项里，选择多个。示例代码：

<input type="checkbox" name="fruit" value ="apple">苹果<br>

<input type="checkbox" name="fruit" value ="orange">桔子<br>

<input type="checkbox" name="fruit" value ="mango">芒果<br>

用checked表示缺省已选的选项。

<input type="checkbox" name="fruit" value ="orange" checked>桔子<br>

根据昨天toto的意见，把删除操作改成了对勾出要删除项对应的多选框，最后用删除选定项按钮。  

下面是修改后的buylist_mylist.html

1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
2 < html xmlns ="http://www.w3.org/1999/xhtml" > <!-- InstanceBegin template="/Templates/1.dwt" codeOutsideHTMLIsLocked="false" -->
3 < head >
4 < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
5 <!-- InstanceBeginEditable name="doctitle" -->
6 < title > 无标题文档 </ title >
7 <!-- InstanceEndEditable -->
8 < style type ="text/css" >
9 #apDiv1 { position : absolute ;
10 width : 772px ;
11 height : 572px ;
12 z-index : 1 ;
13 left : 20px ;
14 top : 23px ;
15 background-color : #FFFFFF ;
16 }
17 #apDiv2 { position : absolute ;
18 width : 153px ;
19 height : 86px ;
20 z-index : 1 ;
21 left : 9px ;
22 top : 9px ;
23 }
24 #apDiv3 {
25 position : absolute ;
26 width : 106px ;
27 height : 205px ;
28 z-index : 2 ;
29 left : 6px ;
30 top : 315px ;
31 background-color : #FFFFFF ;
32 }
33 #apDiv4 { position : absolute ;
34 width : 591px ;
35 height : 392px ;
36 z-index : 3 ;
37 left : 180px ;
38 top : 152px ;
39 }
40 #apDiv5 { position : absolute ;
41 width : 158px ;
42 height : 192px ;
43 z-index : 4 ;
44 left : 7px ;
45 top : 120px ;
46 }
47 #apDiv6 { position : absolute ;
48 width : 574px ;
49 height : 90px ;
50 z-index : 5 ;
51 left : 166px ;
52 top : 9px ;
53 }
54 #apDiv7 { position : absolute ;
55 width : 481px ;
56 height : 96px ;
57 z-index : 2 ;
58 left : 5px ;
59 top : 215px ;
60 background-color : #66B3FF ;
61 }
62 #apDiv8 {
63 position : absolute ;
64 width : 538px ;
65 height : 413px ;
66 z-index : 6 ;
67 left : 177px ;
68 top : 118px ;
69 }
70 #apDiv9 {
71 position : absolute ;
72 width : 200px ;
73 height : 115px ;
74 z-index : 2 ;
75 }
76 </ style >
77 <!-- InstanceBeginEditable name="head" -->
78 < style type ="text/css" >
79 #apDiv10 { position : absolute ;
80 width : 200px ;
81 height : 115px ;
82 z-index : 1 ;
83 left : 50px ;
84 top : 57px ;
85 }
86 #apDiv11 {
87 position : absolute ;
88 width : 487px ;
89 height : 138px ;
90 z-index : 1 ;
91 left : 12px ;
92 top : 7px ;
93 }
94 </ style >
95 <!-- InstanceEndEditable -->
96 </ head >
97
98 < body >
99 < div id ="apDiv1" >
100 < div id ="apDiv2" >< img src ="pictures/banana.jpg" alt ="logo" width ="133" height ="80" /></ div >
101 < div id ="apDiv3" >
102 < table width ="155%" border ="0" >
103 < tr >
104 < td width ="100%" height ="79" >< p > {% if user.is_authenticated %} < a href ="/buylist/mylist/" > MyList </ a > {% endif %} </ p ></ td >
105 </ tr >
106 < tr >
107 < td >< a href ="2.html" > FAQ </ a ></ td >
108 </ tr >
109 < tr >
110 < td >< a href ="1.html" > Index </ a ></ td >
111 </ tr >
112 </ table >
113 </ div >
114 < div id ="apDiv5" >
115 < p > {% if user.is_authenticated %} < br />
116 Logged in: {{ user.username }} </ br >
117 < br />
118 < a href ="{% url auth_logout %}" > Log out </ a >< br />
119 < a href ="{% url auth_password_change %}" > Change password </ a > {% else %} < a href ="{% url auth_login %}" > Log in </ a > {% endif %} </ p >
120 </ p >
121 </ div >
122 < div id ="apDiv6" >
123 < p >< img width ="369" height ="54" src ="1_clip_image001.gif" alt ="清华水果购物网" /></ p >
124 </ div >
125 <!-- InstanceBeginEditable name="EditRegion3" -->
126 < div id ="apDiv8" >
127 < div id ="apDiv11" >
128 < p > All the list for {{mylist.1.name}} is: </ p >
129 {%for object in mylist%}
130
131 < p > List{{forloop.counter}}
132 < input name ="checkbox{{forloop.counter}}" type ="checkbox" id ="checkbox" checked />
133
134 </ p >
135 < p > {{object.buywhat}} address:{{object.address}} </ p >
136 < p > Date: from {{object.startdate}} to {{object.enddate}}
137
138 < label for ="button" ></ label >
139 </ p >
140 < p > Which Day: < br />
141 Monday:{{object.monday}} < br />
142 Tuesday:{{object.tuesday}} < br />
143 Wednesday:{{object.wednesday}} < br />
144 Thursday:{{object.thursday}} < br />
145 Friday:{{object.friday}} < br />
146 Saturday:{{object.saturday}} < br />
147 Sunday:{{object.sunday}} </ p >
148
149
150 {%endfor%}
151
152 < form action ='/buylist/' method ="post" >
153 < p > {% csrf_token %} </ p >
154 < p >
155 < input type ="submit" name ="删除选定list" id ="删除选定list" value ="删除选定list" />
156 < input type ="submit" name ="button" id ="button" value ="删除所有list" />
157 < input type ="submit" value ="不做修改返回主页" />
158 </ p >
159 </ form >
160 </ div >
161 </ div >
162 <!-- InstanceEndEditable --> </ div >
163 </ body >
164 <!-- InstanceEnd --> </ html >

整个UI的页面见昨天的附件

http://www.cnblogs.com/banana-totolv/archive/2011/05/26/2059115.html

转载于:https://www.cnblogs.com/banana-totolv/archive/2011/05/27/2059777.html