最完美的select下拉框美化

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

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

UU 人下拉框使用 JS 进行渲染。当页面引入了脚本和 CSS 后,页面中的下拉框都会变成如下外观:精心开发5年的UI前端框架!

该外观是由 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 )设置下拉框宽度,但是由于下拉框的选项宽度有可能会很长,可能会导致内容显示不完全。精心开发5年的UI前端框架!

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 人下拉框在这种情况会进行智能判断从而向上展开。效果如下:精心开发5年的UI前端框架!

当下拉列表选项过多,向上也无法展示完全时, 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 :自定义下拉列表的列数

当下拉框项目过多时,可以通过添加一个属性来指定列数,并可自定义列宽。效果如下:精心开发5年的UI前端框架!

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

无论是 IE6 、 IE7 、 IE8 还是 FireFox 、 Chrome 、 Safira ,甚至在 Linux 下都保持功能与外观的一致性。

更多详情请点击:点击这里

时间: 2024-07-28 13:41:21

最完美的select下拉框美化的相关文章

基于jQuery select下拉框美化插件

今天给大家分享一款基于jQuery select下拉框美化插件,这款插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.  <table>         <tr>             <td>                 <h2>                     演示1</h2>                 <select name="drop1&qu

select下拉框美化

html: <li> <span>年份:</span> <select @change="" class="select" id=""> <option></option> </select> </li> <li> <span>月份:</span> <select @change="" id

web前端html实例-select下拉菜单美化代码

自带的select下拉菜单美观度实在不怎么样,并且不容易美化,当然我们可以模拟实现select下拉菜单,但是代码稍显复杂,不过也可以通过简单的CSS实现此效果,下面通过实例简单作一下介绍. 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.

jQuery制作简洁的多级联动Select下拉框

今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这个Select下拉框也可以绑定下拉事件,并获取当前选中项的值. html代码: <div class="wrap">        <div class="nice-select" name="nice-select">   

一款基于jQuery的联动Select下拉框

今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这个Select下拉框也可以绑定下拉事件,并获取当前选中项的值. 在线预览   源码下载 实现的代码. html代码: <div class="wrap"> <div class="nice-select" name="nice-select&

JavaScript获取Select下拉框Option的Value和Text值的方法

Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个form表单中的Select下拉框菜单为例,来说明如何用JavaScript获取其 Value值和Text值: 示例表单,里面是一个select下拉列表框的各个列表项及值: <form name="form1"> <select name="testvalue&

Javascript获取select下拉框选中的的值

现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 <select id="test"  name="">     <option   value="1">text1</option>     <option   value="2">text2</option>    </select> co

模拟select下拉框之多选(数据源采用模拟Ajax数据--原创)

最近需要一个下拉多选,本来想偷懒的,所以在网上百度了一番,最终还是发现没有一个符合自己要求的,所以我自己写了一个插件.下面是GIF动态效果图展示 相信大家已经看到效果了,接下来就是我的代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模拟select下拉框之多选</title> <style

去除select下拉框默认样式

去除select下拉框默认样式 select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*将背景改为红色*/ background:red; /*加padding防止文字覆盖*/ padding-right: 14px; } /*清除