【蓝桥软件学院】简单下拉框.docxVIP

简单下拉框课程目标了解Combo的基本属性、方法和事件灵活掌握Combobox的基本操作ComboCombo简介自定义下拉框显示一个可编辑的文本框和下拉面板在html页面。这是构建其他复杂的组合部件（如：combobox,combotree,combogrid等）之前需要构建的最基本的组件。Combo扩展自ValidateBox。Combo并不是学习的重点，只是为后续的ComboBox、ComboTree及ComboGrid打基础。大家简单了解即可。效果如下图：开发Combo程序复制inputid=ccstyle=width:150px/inputdivid=spdivstyle=color:#99BBE8;background:#fafafa;padding:5px;Select a language/divdivstyle=padding:10pxinputtype=radioname=langvalue=01spanJava/spanbr/inputtype=radioname=langvalue=02spanC#/spanbr/inputtype=radioname=langvalue=03spanRuby/spanbr/inputtype=radioname=langvalue=04spanBasic/spanbr/inputtype=radioname=langvalue=05spanFortran/span/div/divscripttype=text/javascript$(function(){/** * 当点击刷新按钮刷新页面时combo控件中的值被清除，但是单选按钮依然是选中状态，所以需要清除checked属性 */$(#sp input).removeProp(checked);$(#cc).combo({required:true,editable:false});$(#sp).appendTo($(#cc).combo(panel));$(#sp input).click(function(){var v = $(this).val();var s = $(this).next(span).text();$(#cc).combo(setValue, v).combo(setText, s).combo(hidePanel);});});/script参考代码:23/combo01.html效果如上图。自定义下拉框使用Javascript创建一个select或input元素。注意：使用自定义下拉框不能通过标签的方式进行创建。Combo常用属性属性名属性值类型描述默认值widthnumber组件的宽度。autoheightnumber组件的高度。22panelWidthnumber下拉面板宽度。nullpanelHeightnumber下拉面板高度。200panelMinWidthnumber下拉面板最小宽度。nullpanelMaxWidthnumber下拉面板最大宽度。nullpanelMinHeightnumber下拉面板最小高度。nullpanelMaxHeightnumber下拉面板最大高度。nullpanelAlignstring面板对齐方式。可用值有：left,right。200multipleboolean定义是否支持多选。falseselectOnNavigationboolean定义是否允许使用键盘导航来选择项目。trueseparatorstring在多选的时候使用何种分隔符进行分割。,editableboolean定义用户是否可以直接输入文本到字段中。truedisabledboolean设置启用/禁用字段。falsereadonlyboolean设置该字段为读写/只读模式。falsehasDownArrowboolean定义是否显示向下箭头按钮。truevaluestring字段的默认值。delaynumber最后一次输入事件与执行有哪些信誉好的足球投注网站之间的延迟间隔（执行自动完成功能的延迟间隔）200keyHandlerobject在用户按下键的时候调用一个函数。案例一：代码如下：复制$(#cc).combo({panelAlign:right,width:100,panelWidth:300,multiple:true,required:true,editable:false,hasDownArrow:false});参考代码:23/combo02.html效果如下图：Combo常用方法方法名方法参数描述optionsnone返回属性对象。panelnone返回下拉面板对象。textboxnone返回文本框对象。destroynone销毁该组件。resizewidth调整组件宽度。sho