论坛首页 Web前端技术论坛

强大的单选下拉框组件下载(升级版)★

浏览 2995 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2012-12-03   最后修改:2012-12-03

 

我曾经发布过一款下拉框组件,获得不少好评,这个组件原本是QUI框架中的一部分。随着QUI框架V3系列的发布,这款下拉框组件也进行了升级,新增了大量的特性。在这里特别把升级后的下拉框组件单独提取出来给大家下载使用。

同时,也希望大家能支持我最近发布的QUI框架V3系列,里面提供了与此下拉框同样高质量的大量的组件。详见此资讯链接:

http://www.iteye.com/news/26579-ui-web-qui-jquery

 

下面我来介绍一下升级后的下拉框组件的特点。

1、下拉框具有美化的并且可自定义的外观

该外观是由CSS和图片控制。通过修改CSS可以很方便地实现更改外观。兼容IE6-IE9firefoxchrome等主流浏览器。

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

 

 

2、使用方法非常简单

通过下面一句话即可生成一个单选下拉框

prompt用来设置下拉框的提示项,url用于设置下拉框的数据源,通过该地址由后台返回json数据即可。数据格式如下:

这样就构建了一个异步加载数据的下拉框。

 

在这里说明一下,该组件与QUI框架其他表单元素实现方式是一样的:先写一个标签,然后为标签添加各种属性来实现不同的特性。

点击查看API列表

 

 

3、多种数据获取方式

下拉框提供了多种数据获取方式,用来满足各种不同的需求。例如可以像前面使用url获取数据,还可以使用url+参数获取,还可以使用data属性设置本地的数据源。例如:

还可以动态为下拉框设置数据源等等。

 

 

4、本地模式

可以使用原始下拉框的写法构建一个同步模式的下拉框。

效果

 

同步模式下拉框也可以像原始下拉框那样进行分组


 

  

 

5、下拉框宽度处理机制

下拉框默认为120px宽度,当有较长的选项时,下拉框宽度默认不变,而选项容器宽度自适应。

 

这样处理有一个好处是可以与其他表单元素保持一致,让整个表单变得整齐美观。

如果有需要,也可以自定义下拉框的尺寸,为标签添加selWidth属性即可。

 

 

 

6、下拉列表的高度处理机制

当列表数据很多时,下拉框高度会自动控制在可视范围内,然后出现滚动条。方便用户进行选择。


如果有需要,也可以自定义下拉列表高度,为标签添加boxHeight属性即可。

 

 

7、下拉列表的展开方向处理机制

当要展开下拉框时,会自动判断展开方向。

如果下方能够显示全部选项,则优先向下展开;

如果下方空间不够,而上方空间充足,则向上展开;


如果上下空间都不够,那么则向下展开,高度控制在可视范围内,然后出现滚动条;

如果有需要,也可以强制列表向某一方向展开,为标签添加openDirection属性即可。

 

 

8、控制是否可编辑

如果要让下拉框可以编辑,为标签添加editable="true"属性即可。

 

 

 

9、自定义列数

通过为下拉框添加colNum属性可控制下拉列表分成多列,添加colWidth可指定列宽。适用于数据量很大的情况。

 

 

 

10ajax联动功能

通过设置可以很简单地实现下拉框联动功能

第一个下拉框通过childId指定下一级下拉框,childDataPath设置下一级下拉框的数据源。当选择后,会通过childDataPath与当前选项的value一起拼出路径获取数据赋给第二级下拉框。

通过这种方式可以实现无限级的联动级别。

 

 

11、设置初始选中项

通过为标签设置selectedValue可设置初始时选中项

也可设置selectedIdx,通过索引的方式设置选中项

效果是一样的

 

 

12、动态生成与动态修改

下拉框支持动态生成。要动态生成下拉框,在动态生成标签后调用render方法重新渲染即可。

下拉框也支持动态修改,例如可以动态的新增选项、删除选项、选中某一项、重置选中项等。

 

 

点击查看在线示例演示

 

 

组件下载地址:

http://qui-frame.googlecode.com/files/select.rar

 

  • 大小: 10.9 KB
  • 大小: 6.9 KB
  • 大小: 4.7 KB
  • 大小: 1.9 KB
  • 大小: 4.6 KB
  • 大小: 3.6 KB
  • 大小: 5.2 KB
  • 大小: 3.5 KB
  • 大小: 20.2 KB
  • 大小: 3.8 KB
  • 大小: 4.8 KB
  • 大小: 5.3 KB
  • 大小: 2.9 KB
  • 大小: 27 KB
  • 大小: 2.8 KB
  • 大小: 2.4 KB
  • 大小: 2.3 KB
  • 大小: 2 KB
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics