最完美的select下拉框美化

很多人为select的诸多不完善而头痛,如无法自定义样式、IE6中无法被浮动层遮住等等。下面介绍一款堪称最完美的下拉框组件。感兴趣的可以从最后的链接地址下载代码研究与交流。

 

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

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


\

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

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

 

特点2:使用简单

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

<select>

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

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

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

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

 </select>

 

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

 

 

特点3:宽度处理

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

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

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

 

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


\

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


\

 

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


\

 

另外还可以通过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:下拉列表展开的方向智能化

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

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


\

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


\

 

特点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下都保持功能与外观的一致性。

 

 

注意:下载地址已改变。下面的是最新的下载地址:


点击这里下载示例

 

 

||| 这是个插件吗? ||| 在Chromium6.0.409.0 (47633)下好像看不到效果. ||| 广告贴,给的demo网站都无法访问。 ||| nplw668 写道 广告贴,给的demo网站都无法访问。

 

不好意思,是空间有问题,有时候无法正常访问。你可以试试多刷新几次页面或者换个时间访问。我最近正准备换个空间。

||| 整体还可以,部分浏览器存在bug
很像是广告贴啊,jQuery插件很多,估计没人花钱买的 ||| 很像Ext的ComboBox啊,还没人家的好。 ||| 我用的ie8 上面看到的效果不是非常好。
对得不是很整齐。 ||| 语法很旬jQuery啊。 ||| zyongking 写道 我用的ie8 上面看到的效果不是非常好。
对得不是很整齐。

 

我做的时候ie6-ie8都确保兼容,可能我用的ie8与你的版本不同的原故。

看来还需要进一步完善。

||| obullxl 写道 语法很旬jQuery啊。

 

确实是基于jquery来开发的组件,但对外的接口与脚本无关。

演示页面我用了jquery语法是为了方便。

||| 苍山洱海 写道 这是个插件吗?

 

可以理解为插件。

这是我最近的一个力作“UU人网页界面集成框架”的一部分。可以分离出来使用。

||| gordonkkk 写道 很像Ext的ComboBox啊,还没人家的好。

 

不要和EXT比较。举个简单的例子,如果你的一个表单其他所有元素都是传统的html标签,难道为了一个下拉框就引入整套EXT的机制然后使用JS来动态创建下拉框并且构造JSON格式的数据吗?

||| 怎么不开源了,你放上来是什么意思了, ||| 确实很实用,在开发中经常需select框,多谢 ||| 楼主这个框架做的相当不错啊 
我到你给的地址去体验了下,有个小问题不知道是我浏览器原因还是代码原因

只要页面上涉及到与下拉列表<select>有关时,点击菜单后整个页面或者页面部分会全部变成蓝色,感觉不是很安逸 ||| zzy491042824 写道 楼主这个框架做的相当不错啊\
我到你给的地址去体验了下,有个小问题不知道是我浏览器原因还是代码原因

只要页面上涉及到与下拉列表<select>有关时,点击菜单后整个页面或者页面部分会全部变成蓝色,感觉不是很安逸

 

没太听明白。等否把截图和你的浏览器信息贴出来我看看。

另外在线版并不是框架的最新版本,可能会存在bug

"|| 就是在体验网址里  表单->基本表单元素->单选下拉列表(select)
点击这个菜单的时候右边会先全部变成蓝色,要等一会界面才显示正常

还有就是,如果我要复制页面上的内容的话,鼠标往下拉的时候滚动条不会跟着滚动


第二张图片是复制页面内容情况。。只能复制可见部分,下面的无法复制 ||| zzy491042824 写道就是在体验网址里  表单->基本表单元素->单选下拉列表(select)
点击这个菜单的时候右边会先全部变成蓝色,要等一会界面才显示正常

还有就是,如果我要复制页面上的内容的话,鼠标往下拉的时候滚动条不会跟着滚动


第二张图片是复制页面内容情况。。只能复制可见部分,下面的无法复制
你用的浏览器一定是IE6吧,第一个问题是由于IE6对JS脚本执行效率过低造成的。每个页面在打开时框架中的脚本都会对该页面进行必要的处理,以实现页面的美观和开发时的便捷。单选下拉列表使用了很多select作为示例,所以在脚本渲染时IE6需要一些时间才能完成。
一方面我以后会不断优化框架的脚本执行效率,另一方面推荐你将IE升级或使用firefox等标准型浏览器。如果你用firefox,渲染将在一瞬间完成。

第二个问题我会检查一下。
多谢你提意见。 ||| fukai 写道

注:原来的地址很多人反映有时无法访问,我特意更换了空间,最下面的地址已经修改了。

 

另外这个下拉框是我最近的力作“UU人网页界面集成框架”的一部分,想详细了解可以下载介绍的PPT,地址:

http://www.uur.cn/web/intro.ppt

 

 

 

 

很多人为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下都保持功能与外观的一致性。

 

点击这里查看在线示例

 

 

通过http://www.uur.cn/web/index.html可以查看更多UU人组件并下载.

 

 

注:原来的地址很多人反映有时无法访问,我特意更换了空间,上面的地址已经修改了。

 

另外这个下拉框是我最近的力作“UU人网页界面集成框架”的一部分,想详细了解可以下载介绍的PPT,地址:

http://www.uur.cn/web/intro.ppt

 

||| 您好,很不错的插件,很实用,有些问题请教下。

<select disabled="true">
<option value="">请选择功能</option>
    <option value="1">新增图片</option>
    <option value="2">维护图片</option>
    <option value="3">新增新闻</option>
</select>

选择框的不可用你是直接用 disabled=“true” 来实现的,但是这就有个问题,

当disabled=“true”时,表单提交的时候会忽略此select的信息,不知道您这个是怎么解决的?
因为在做项目的时候遇到过这种问题,自己是 先disabled了,然后在提交的时候再disabled=“false”
这样实现的,但是感觉很不好~谢谢~ ||| 这框架要收费,楼主放上来明显是打广告,个人很鄙视这种行为 ||| Neptune_9999 写道 您好,很不错的插件,很实用,有些问题请教下。

<select disabled="true">
<option value="">请选择功能</option>
    <option value="1">新增图片</option>
    <option value="2">维护图片</option>
    <option value="3">新增新闻</option>
</select>

选择框的不可用你是直接用 disabled=“true” 来实现的,但是这就有个问题,

当disabled=“true”时,表单提交的时候会忽略此select的信息,不知道您这个是怎么解决的?
因为在做项目的时候遇到过这种问题,自己是 先disabled了,然后在提交的时候再disabled=“false”
这样实现的,但是感觉很不好~谢谢~

个人觉得可以使用hidden来存select的值


©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值