开发学院网页设计JavaScript 基于jQuery打造智能的人员选择输入框 阅读

基于jQuery打造智能的人员选择输入框

 2009-10-29 00:00:00 来源:WEB开发网   
核心提示: 容器我们用Div就可以了,小方块也比较简单 ,基于jQuery打造智能的人员选择输入框(2),来看一下,最外层是div包裹,接着就是CSS了,这个css其实很简单,然后是嵌套一个a标签(为了方便以后做hover效果),在a标签中是一个span放置文字

容器我们用Div就可以了,小方块也比较简单 ,来看一下,最外层是div包裹,然后是嵌套一个a标签(为了方便以后做hover效果),在a标签中是一个span放置文字,

input[type=hidden] 来防止这个节点的数据,img就似乎删除按钮的载体,那控件的载体又是什么呢?其实从设计来说可以是个input的,但是我更偏向于div,在实例化的时候往div中动态添加一个input来附加autocomplete的属性,如果反过来在input外包裹容器的话,在一些特殊情况下定位会是问题。

基于jQuery打造智能的人员选择输入框

那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.}

上一页  1 2 3 4 5 6 7  下一页

Tags:基于 jQuery 打造

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接