首页 > 飞信机器人 > > 正文

最完美的select下拉框美化

日期:2016-10-21 10:00:07编辑作者:新葡京线上娱乐
很多人为select的诸多不完善而头痛,如无法自定义样式、IE6中无法被浮动层遮住等等。下面介绍一款堪称最完美的下拉框组件:UU人下拉框
 
特点1:美化的并且可自定义的外观
UU人下拉框使用JS进行渲染。当页面引入了脚本和CSS后,页面中的下拉框都会变成如下外观:
 
 
 
该外观是由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人下拉框对于宽度的处理方式是:默认会有一个宽度,即使选项里面有很长的文字。效果如下:
 
 
这样就保证了表单元素宽度一致又不影响内容。放在表单中的整体效果如下:
 
 
如果希望下拉框的宽度自适应最长选项,为其设置一个参数即可,效果如下:
 
 
另外还可以通过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:下拉列表展开的方向智能化
原始的下拉框如果在网页中的位置比较偏下,向下展开肯能会导致内容显示不全。
UU人下拉框在这种情况会进行智能判断从而向上展开。效果如下:
 
 
当下拉列表选项过多,向上也无法展示完全时,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指定要联动的下拉框的ID,childDataPath指定二级下拉框数据来源,与一级下拉框的value关联来获取数据。
效果如下:
 
 
特点8:自定义下拉列表的列数
当下拉框项目过多时,可以通过添加一个属性来指定列数,并可自定义列宽。效果如下:
 
 
特点9:完美的浏览器兼容性
无论是IE6、IE7、IE8还是FireFox、Chrome、Safira,甚至在Linux下都保持功能与外观的一致性。
 
注:原来的地址已更新,新的下载地址如下:
 
点击这里下载示例
 
这个下拉框是 “QUI框架”的一部分,可以下载整个框架来使用更多的组件。
 
点击下载QUI
(直接点击链接即可,使用迅雷可能会导致无法下载)

相关文章

新葡京线上娱乐:5款常见原型工具,产品特色知多少?

工欲善其事必先利其器。天天和产品打交道,无可避免的要做一些页面原型,当然也离不开各种工具。好的原型工具软件可以大大提高工作效率,但 ..

发布日期:2016-11-12 详细>>

南平市团建工作有了全国首家飞信机器人助手

5月4日上午9时16分,一条署名中共南平市委副书记周秀光的节日问候短信发给了全市10万名团员青年、基层团干和青年工作者。这标致着南平市团 ..

发布日期:2016-10-07 详细>>

飞信机器人/控制指令集

机器人控制指令概述通过向 commands 目录放置命令文件(UTF-8编码),就能控制飞信机器人动作。飞信机器人在执行完指令后,会删除命令文件 ..

发布日期:2016-10-07 详细>>

全新方式:用flash As开发H5游戏新的可行性研究

依稀记得十几年前,那时正值互联网初期,一切都猛烈的发展。就像如今的H5一样,flash在当时,作为一种全新的技术,其热烈程度,一点也不输H ..

发布日期:2016-11-03 详细>>

飞信机器人拉近南平青年心

在介绍全国共青团系统第一个专属飞信机器人青青时,团福建省南平市委副书记赵明正告诉记者,5个月来,该单位与中国移动南平分公司联合建设 ..

发布日期:2016-10-07 详细>>

网站统计: