基于jQuery打造智能的人员选择输入框
2009-10-29 00:00:00 来源:WEB开发网容器我们用Div就可以了,小方块也比较简单 ,来看一下,最外层是div包裹,然后是嵌套一个a标签(为了方便以后做hover效果),在a标签中是一个span放置文字,
input[type=hidden] 来防止这个节点的数据,img就似乎删除按钮的载体,那控件的载体又是什么呢?其实从设计来说可以是个input的,但是我更偏向于div,在实例化的时候往div中动态添加一个input来附加autocomplete的属性,如果反过来在input外包裹容器的话,在一些特殊情况下定位会是问题。
那html既然已经定义好了,接着就是CSS了,这个css其实很简单,就是容器的边框还有就是item的样子而已,来看下代码
01..bbit-usbox
02.{
03. border: solid 1px #3C7FB1;
04. margin:20px;
05. padding:2px;
06. display:block;
07. background-color:#f3fefe;
08.}
09..bbit-usbox .bbit-usbox-item
10.{
11. width:auto;
12. margin-left:4px;
13. margin-top:2px;
14. background-color:#e0e5ee;
15. border: solid 1px #ccd5e4;
16. float:left;
17. white-space : nowrap;
18.}
19..bbit-usbox .bbit-usbox-item a
20.{
21. color:#000;
22. text-decoration:none;
23. padding-left:2px;
24.}
25..bbit-usbox .bbit-usbox-item a span
26.{
27.}
28..bbit-usbox .bbit-usbox-del
29.{
30. background:url("images/usbox/del.gif") no-repeat 50% 80%;
31. width:10px;
32. height:5px;
33. cursor:pointer;
34. border:none;
35. vertical-align:middle;
36. margin-left:2px;
37.}
38..bbit-usbox-boxc
39.{
40. margin-left:4px;
41. clear:left;
42.}
43..bbit-usbox-box
44.{
45.}
46..bbit-usbox-boxc input
47.{
48. background-color:#f3fefe;
49. width:100%;
50. height:17px;
51. display:block;
52. border:none;
53.}
更多精彩
赞助商链接