`
fukai
  • 浏览: 22343 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

最好用的单选下拉框组件下载(升级版)★

阅读更多

我曾经发布过一款下拉框组件,获得不少好评,这个组件原本是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
分享到:
评论

相关推荐

    QUI框架Select单选下拉框美化版

    摘要:脚本资源,Ajax/JavaScript,QUI,下拉框 QUI框架Select单选下拉框美化版,QUI框架V3系列并不是对以往简单的升级,而是从各个方面都做了重大改进和完善。可以说,当看了这个3.0系列,你会发现以往的版本和它完全...

    jQuery Select 下拉单选框模拟插件 V1.3.6.2.zip

    《jQuery Select 下拉单选框模拟插件 V1.3.6.2 深度解析》 在网页开发中,下拉选择框(Select)是常见的一种交互元素,用于提供用户选择一组预设选项。然而,原生的HTML Select在样式定制和交互体验上存在一定的...

    Angularjs单选改为多选的开发过程及问题解析

    在Web开发中,下拉框组件是用户界面中常见的元素,用于从一组选项中选择一个或多个值。AngularJS是一种流行的JavaScript框架,它通过数据绑定和依赖注入等特性简化了动态Web应用的开发。随着项目需求的变化,有时...

    jQuery easyUI-1.3最新版

    3. **表单(Form)**:jQuery EasyUI 提供了多种表单元素,如文本框、下拉框、复选框、单选按钮等,以及表单验证功能,简化了表单的设计和交互。 4. **菜单(Menu)**:创建上下文菜单或侧边栏菜单,支持多级结构,可...

    select2 带查询功能select

    它的设计目的是提供美观、功能丰富的多选和单选下拉框,支持搜索、无限滚动、分页、自定义模板等功能。 2. **实时搜索功能:** Select2 的核心功能之一是实时搜索或称为“类型提示”,用户在输入框中输入字符时,...

    extjs2.2和2.3的官方包

    3. **强大的表单功能**:提供了丰富的表单控件,如文本框、下拉框、复选框、单选按钮等,支持表单验证和数据提交。 4. **AJAX支持**:通过内置的Ajax工具,可以方便地进行异步数据通信,实现与服务器的无缝交互。 5....

    extjs--ext-3.2.1

    4. **表单组件**:ExtJS提供了强大的表单组件,包括文本框、下拉框、复选框、单选按钮等,且支持验证和自定义布局,使得创建复杂的表单变得容易。 5. **布局管理**:3.2.1版本的ExtJS有多种布局方式,如Fit布局、...

    web组建开发指南

    ### WEB组件开发指南 #### 一、前言 1. **概述**: - 本文档旨在为开发者提供一套全面的指南,以便更好地理解和运用Web组件进行开发工作。 - Web组件是现代Web开发中不可或缺的一部分,它们允许开发者创建可重用...

    XeFramework 一款轻量级的Delphi通用系统UI框架

    包含了一些各类风格的文本标签、复选框、单选框、下拉框和简易列表的效果演示界面 包含了一个进度条加载任务的演示界面,里面还有几类不同风格的进度条的展示 包含了一套系统选项设置窗体(由多个子窗体组成),里面...

    最前卫的框架H-ui.1.3.2-前端开发框架(源码)

    3. **表单元素**:包括输入框、下拉框、复选框、单选按钮等,具有验证和提示功能。 4. **数据展示**:如表格、卡片、轮播图等,可实现数据的高效展示和交互。 四、源码分析 H-ui.1.3.2的源码可供开发者深入学习和...

    BJUI前端完整框架

    由于BJUI的组件化设计,开发者可以根据项目需求,自由组合和扩展功能,甚至可以编写自定义插件,以满足特定的业务逻辑。 总之,BJUI前端完整框架以其全面的组件、易用的API和良好的社区支持,成为了后台型项目开发...

    jira使用手册.docx

    jira管理下级菜单有:应用程序、项目、问题、插件、用户管理、最新升级报告、系统。 1. 用户管理 用户管理用户管理下级菜单有:用户、组、jira用户服务器、用户目录。本手册只介绍用户及组。 * 用户:jira系统中...

    jQuery LigerUI V1.3.3

    2. **表单(Form)**:提供各种表单控件,如文本框、下拉框、复选框、单选按钮等,支持验证和自动填充功能,可实现复杂表单的构建。 3. **对话框(Dialog)**:包括普通对话框、提示对话框、确认对话框和自定义内容...

    Extjs中文教程

    - 组件是Extjs中最核心的概念之一,几乎所有的UI都是由组件构成的。 - 每个组件都有自己的生命周期、状态管理和事件系统。 - **组件分类** - 按照功能和用途可以分为基本组件、容器组件和复杂组件。 - 基本组件...

Global site tag (gtag.js) - Google Analytics