收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 131509|回复: 44

[作品展示] 最完美的select下拉框美化(已更新地址)

  [复制链接]
发表于 2010-12-24 16:03:37 | 显示全部楼层 |阅读模式
很多人为select的诸多不完善而头痛,如无法自定义样式、IE6中无法被浮动层遮住等等。下面介绍一款堪称最完美的下拉框组件:UU人下拉框

特点1:美化的并且可自定义的外观
UU人下拉框使用JS进行渲染。当页面引入了脚本和CSS后,页面中的下拉框都会变成如下外观:
01.jpg


该外观是由CSS和图片控制。通过修改CSS可以很方便地实现更改外观。
UU人下拉框不存在IE6中无法被浮动层遮住等问题。

特点2:使用简单
UU人下拉框代码写法与原来的写法一样,都是如下代码:
<select>
        <option value="">请选择功能</option>
    <option value="1">新增图片</option>
    <option value="2">维护图片</option>
    <option value="3">新增新闻</option>
</select>


也可以动态创建UU人下拉框。

特点3:宽度处理
你是否遇到以下两种情况:
(1)不设置下拉框宽度,那么下拉框宽度默认为最宽的选项的宽度。当其选项过长时轻则会导致整个表单不整齐,重则会撑坏页面布局;
(2)设置下拉框宽度,但是由于下拉框的选项宽度有可能会很长,可能会导致内容显示不完全。

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

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

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

另外还可以通过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>

效果如下:
05.jpg

特点5:下拉列表展开的方向智能化
原始的下拉框如果在网页中的位置比较偏下,向下展开肯能会导致内容显示不全。
UU人下拉框在这种情况会进行智能判断从而向上展开。效果如下:
06.jpg

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


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

特点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指定要联动的下拉框的ID,childDataPath指定二级下拉框数据来源,与一级下拉框的value关联来获取数据。
效果如下:
09.jpg

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

特点9:完美的浏览器兼容性
无论是IE6、IE7、IE8还是FireFox、Chrome、Safira,甚至在Linux下都保持功能与外观的一致性。

注:原来的地址已更新,新的下载地址如下:

点击这里下载示例

这个下拉框是 “QUI框架”的一部分,可以下载整个框架来使用更多的组件。

点击下载QUI
(直接点击链接即可,使用迅雷可能会导致无法下载)

[[i] 本帖最后由 fukai 于 2011-10-12 09:17 编辑 ]

补充内容 (2012-3-21 09:58):
下拉框最新地址:http://code.google.com/p/qui-fra ... ar&can=2&q=
QUI框架最新地址:http://code.google.com/p/qui-fra ... ar&can=2&q=

评分

参与人数 1威望 +1 收起 理由
nealyo + 1 原创内容

查看全部评分

本帖被以下淘专辑推荐:

 楼主| 发表于 2010-12-25 11:46:06 | 显示全部楼层
原帖由 [i]我佛山人 于 2010-12-25 11:40 发表
没有响应Home/End/PgUp/PgDn

因为不常用所以没有做。如果需要我可以以后加上。
目前只有TAB键打开和上下箭头移动选择和回车键选中
回复 支持 2 反对 1

使用道具 举报

发表于 2011-1-12 12:25:20 | 显示全部楼层
楼主似乎没考虑ie6下的input背景平铺问题,我当时做这种select时input有渐变圆角的背景,比你多用了两个标签 ,ie6/7下当两个下拉列表垂直放的比较近时,上面的下拉列表无法覆盖住下面的下拉列表,这个问题似乎也没考虑 不过你这个功能还挺全面的
回复 支持 1 反对 1

使用道具 举报

发表于 2010-12-25 11:40:18 | 显示全部楼层
没有响应Home/End/PgUp/PgDn
回复 支持 2 反对 0

使用道具 举报

发表于 2010-12-24 17:14:58 | 显示全部楼层
IE8 下 选择的箭头那和前面的框垂直方向有一个像素的错位。
回复 支持 2 反对 0

使用道具 举报

发表于 2011-1-12 13:40:38 | 显示全部楼层
如果使用js改变select的value,模拟的select是否能自动改变?
回复 支持 反对

使用道具 举报

发表于 2011-1-12 16:57:51 | 显示全部楼层
我在此基础上改了下,请看:
1.jpg
2.jpg
回复 支持 反对

使用道具 举报

发表于 2011-1-14 09:52:36 | 显示全部楼层
不错的组件,以前游戏人也搞过一个,貌似现在不更新了
回复 支持 反对

使用道具 举报

发表于 2011-1-14 13:12:22 | 显示全部楼层
支持LZ好强大
回复 支持 反对

使用道具 举报

发表于 2011-1-14 13:59:47 | 显示全部楼层
这个很好 大网站用的到 楼主自己写的还偷的
回复 支持 反对

使用道具 举报

发表于 2011-1-18 10:57:59 | 显示全部楼层
很强大,顶一下
回复 支持 反对

使用道具 举报

发表于 2011-1-18 17:07:53 | 显示全部楼层
很强大,支持楼主。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-1-19 22:48:23 | 显示全部楼层
原帖由 [i]lotusmylove 于 2011-1-12 16:57 发表
我在此基础上改了下,请看:

下拉框改成能够智能提示了?赞一个,呵呵
回复 支持 反对

使用道具 举报

发表于 2011-1-20 08:09:36 | 显示全部楼层
看着强大的LZ我激动得无语
回复 支持 反对

使用道具 举报

发表于 2011-1-20 15:35:33 | 显示全部楼层
这个很强大
回复 支持 反对

使用道具 举报

发表于 2011-1-20 15:44:17 | 显示全部楼层
一直想把select给美化一下,但是找不到方法,楼主真是牛人,研究了这么多
回复 支持 反对

使用道具 举报

发表于 2011-1-21 08:57:53 | 显示全部楼层
还好。只是不太给力,兼容性再加强下。主要不给力得地方是我在IE8下测试弹出内容总是向上跳一下,这种感觉很不爽。
回复 支持 反对

使用道具 举报

发表于 2011-1-24 21:20:08 | 显示全部楼层
收藏标记!!!
回复 支持 反对

使用道具 举报

发表于 2011-1-26 14:26:08 | 显示全部楼层
很不错的东东。留下
回复 支持 反对

使用道具 举报

发表于 2011-1-27 00:06:14 | 显示全部楼层
非常不错
回复 支持 反对

使用道具 举报

发表于 2011-1-27 10:34:14 | 显示全部楼层
太给力了
回复 支持 反对

使用道具 举报

发表于 2011-1-27 17:17:23 | 显示全部楼层
马克一下
回复 支持 反对

使用道具 举报

发表于 2011-1-27 17:39:59 | 显示全部楼层
很NB,要支持
回复 支持 反对

使用道具 举报

发表于 2011-1-29 20:30:02 | 显示全部楼层
我支持了
回复 支持 反对

使用道具 举报

发表于 2011-1-29 22:59:36 | 显示全部楼层
真是无语了,太牛了,去楼主的网站看了,原来楼主的主业还是Flex,这个还是副业。。。。准备去买楼主的书《Flex与ActionScript程序开发》看看,不知道什么都不懂的新人能不能看懂。。。
回复 支持 反对

使用道具 举报

发表于 2011-1-30 21:52:25 | 显示全部楼层
支持楼主,太强大了!
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-3-5 13:44:57 | 显示全部楼层
原帖由 [i]zhoushiya 于 2011-1-29 22:59 发表
真是无语了,太牛了,去楼主的网站看了,原来楼主的主业还是Flex,这个还是副业。。。。准备去买楼主的书《Flex与ActionScript程序开发》看看,不知道什么都不懂的新人能不能看懂。。。

多谢支持,呵呵
回复 支持 反对

使用道具 举报

发表于 2011-3-5 15:46:47 | 显示全部楼层
支持楼主的原创!
回复 支持 反对

使用道具 举报

发表于 2011-3-7 10:00:00 | 显示全部楼层
为什么gb2312的情况下就不能用呢
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-3-9 19:18:46 | 显示全部楼层
原帖由 [i]snono 于 2011-3-7 10:00 发表
为什么gb2312的情况下就不能用呢

免费版只支持UTF-8编码。个人版和企业版可以支持gb2312和gbk
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-9-17 06:47 , Processed in 0.157803 second(s), 13 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表