最完美的select下拉框美化.doc_第1页
最完美的select下拉框美化.doc_第2页
最完美的select下拉框美化.doc_第3页
最完美的select下拉框美化.doc_第4页
最完美的select下拉框美化.doc_第5页
已阅读5页,还剩2页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

最完美的select下拉框美化很多人为select的诸多不完善而头痛,如无法自定义样式、IE6中无法被浮动层遮住等等。下面介绍一款堪称最完美的下拉框组件:UU人下拉框特点1:美化的并且可自定义的外观UU人下拉框使用JS进行渲染。当页面引入了脚本和CSS后,页面中的下拉框都会变成如下外观:该外观是由CSS和图片控制。通过修改CSS可以很方便地实现更改外观。UU人下拉框不存在IE6中无法被浮动层遮住等问题。特点2:使用简单UU人下拉框代码写法与原来的写法一样,都是如下代码:请选择功能 新增图片 维护图片 新增新闻 也可以动态创建UU人下拉框。特点3:宽度处理你是否遇到以下两种情况:(1)不设置下拉框宽度,那么下拉框宽度默认为最宽的选项的宽度。当其选项过长时轻则会导致整个表单不整齐,重则会撑坏页面布局;(2)设置下拉框宽度,但是由于下拉框的选项宽度有可能会很长,可能会导致内容显示不完全。UU人下拉框对于宽度的处理方式是:默认会有一个宽度,即使选项里面有很长的文字。效果如下:这样就保证了表单元素宽度一致又不影响内容。放在表单中的整体效果如下:如果希望下拉框的宽度自适应最长选项,为其设置一个参数即可,效果如下:另外还可以通过style强制一个宽度。特点4:支持分组下拉框支持分组,代码与普通select分组代码一样。如请选择权限新增图片维护图片新增新闻 新增用户 用户列表效果如下:特点5:下拉列表展开的方向智能化原始的下拉框如果在网页中的位置比较偏下,向下展开肯能会导致内容显示不全。UU人下拉框在这种情况会进行智能判断从而向上展开。效果如下:当下拉列表选项过多,向上也无法展示完全时,UU人下拉框会判断一下向上和向下哪里空间大,就向哪里展开,并出现滚动条。效果如下:特点6:下拉框可编辑为下拉框代码添加一个属性,就把它变成了一个可编辑的下拉框,效果如下:特点7:集成了ajax联动功能通过设置可以很简单地实现下拉框联动功能。可支持的联动级数为无限级!例如如下代码就创建了一个二级联动的下拉框:所学专业: 请选择专业专业1专业2 所属班级: 请先选择专业 代码中的childId指定要联动的下拉框的ID,childDataPath指定二级下拉框数据来源,与一级下拉框的value关联来获取数据。效果如下:特点8:自定义下拉列表的列数当下拉框项目过多时,可以通过添加一个属性来指定列数,并可自定义列宽。效果如下:特点9:完美的浏览器兼容性无论是IE6、IE7、IE8还是FireFox、Chrome、Safira,甚至在Linux下都保持功能与外观的一致性。点击这里查看在线示例 (链接到分离版中的该组件)通过/001/可以查看更多UU人组件并提供下载.这个下拉框是我最近

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论