水果购物网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
posted on 2011-05-27 12:47 banana.totolv 阅读(947) 评论(0) 编辑 收藏 举报
