最完美的select下拉框美化

阿东2020 发布于 2013/05/06 11:26
阅读 1K+
收藏 10

很多人为select的诸多不完善而头痛,如无法自定义样式、IE6中无法被浮动层遮住等等。下面介绍一款堪称最完美的下拉框组件:360UI即QUI下拉框( )

 

特点1:美化的并且可自定义的外观

QUI下拉框使用JS进行渲染。当页面引入了脚本和CSS后,页面中的下拉框都会变成如下外观:

该外观是由CSS和图片控制。通过修改CSS可以很方便地实现更改外观。

QUI下拉框不存在IE6中无法被浮动层遮住等问题。

 

特点2:使用简单

QUI下拉框代码写法与原来的写法一样,都是如下代码:

<select>

   <optionvalue="">请选择功能</option>

   <optionvalue="1">新增图片</option>

   <optionvalue="2">维护图片</option>

   <optionvalue="3">新增新闻</option>

 </select>

 

也可以动态创建QUI下拉框。

 

 

特点3:宽度处理

你是否遇到以下两种情况:

1)不设置下拉框宽度,那么下拉框宽度默认为最宽的选项的宽度。当其选项过长时轻则会导致整个表单不整齐,重则会撑坏页面布局;

2)设置下拉框宽度,但是由于下拉框的选项宽度有可能会很长,可能会导致内容显示不完全。

 

QUI下拉框对于宽度的处理方式是:默认会有一个宽度,即使选项里面有很长的文字。效果如下:

这样就保证了表单元素宽度一致又不影响内容。放在表单中的整体效果如下:

 

如果希望下拉框的宽度自适应最长选项,为其设置一个参数即可,效果如下:

 

另外还可以通过style强制一个宽度。

 

特点4:支持分组

下拉框支持分组,代码与普通select分组代码一样。如

<select>

       <option>请选择权限</option>

       <optgroup label="首页信息发布">

              <option value="新增图片">新增图片</option>

              <option value="维护图片">维护图片</option>

              <option value="新增新闻">新增新闻</option>

       </optgroup>

       <optgroup label="人员维护">

               <option value="新增用户">新增用户</option>

        <option value="用户列表">用户列表</option>

       </optgroup>

</select>

效果如下:

 

特点5:下拉列表展开的方向智能化

原始的下拉框如果在网页中的位置比较偏下,向下展开肯能会导致内容显示不全。

QUI下拉框在这种情况会进行智能判断从而向上展开。效果如下:

当下拉列表选项过多,向上也无法展示完全时,UU人下拉框会判断一下向上和向下哪里空间大,就向哪里展开,并出现滚动条。效果如下:

 

特点6:下拉框可编辑

为下拉框代码添加一个属性,就把它变成了一个可编辑的下拉框,效果如下:

 

特点7:集成了ajax联动功能

通过设置可以很简单地实现下拉框联动功能。可支持的联动级数为无限级!

例如如下代码就创建了一个二级联动的下拉框:

所学专业:
<select id="sel01" childId="sel02" childDataPath=" http://localhost/kj/trainplan.do?method=" >
    <option value="">请选择专业</option>
    <option value="bj1">专业1</option>
<option value="bj2">专业2</option>
</select>  
 所属班级:
 <select id="sel02">
    <option value="0">请先选择专业</option>
 </select>     

代码中的childId指定要联动的下拉框的IDchildDataPath指定二级下拉框数据来源,与一级下拉框的value关联来获取数据。

效果如下:

 

 

特点8:自定义下拉列表的列数

当下拉框项目过多时,可以通过添加一个属性来指定列数,并可自定义列宽。效果如下:

 

特点9:完美的浏览器兼容性

无论是IE6IE7IE8还是FireFoxChromeSafira,甚至在Linux下都保持功能与外观的一致性。

 开源项目网址http://www.oschina.net/p/360ui

加载中
0
HolyCake
HolyCake
无图。你说的话里面我一个标点符号都不相信。
0
blindcat
blindcat

看见360咋就觉得别扭呢

0
我已经报警了
我已经报警了
说了一堆如图,结果一个图都没有啊!
0
景愿
景愿
看楼下如何评论标题!
0
hello_152
hello_152

如果每个组件可移植性强、可独立引用、不依赖第三方库,那就代表了组件的发展方向~

0
hello_152
hello_152
如果是把很多个组件搞到一个所谓的框架里面,而用组件必须引所谓的框架,那就比较操蛋~
0
mallon
mallon
图挂了
返回顶部
顶部