传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HT for Web通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框和下拉列表中添加自定义的小图标,让整个组件看起来更直观,今天我就如何制定ComboBox自定义下拉框做一番探讨。
首先我们先来目睹下效果:
看起来跟普通的ComboBox好像也没什么特殊的,是的,按照规范的ComboBox设计,完全可以实现同样的效果,但是今天的主要任务并不是讨论有多少实现方案,今天的首要任务是介绍HT for Web的ComboBox自定义下拉列表的用法。
那么接下来就开始具体的方案介绍,废话不多说,上代码:
function createGradientComboBox(dataModel){ var sm = dataModel.sm(), gradientComboBox = new ht.widget.ComboBox(), gradients = ['linear.southwest','linear.southeast','linear.northwest','linear.northeast', 'linear.north','linear.south','linear.west','linear.east', 'radial.center','radial.southwest','radial.southeast','radial.northwest','radial.northeast', 'radial.north','radial.south','radial.west','radial.east', 'spread.horizontal','spread.vertical','spread.diagonal','spread.antidiagonal', 'spread.north','spread.south','spread.west','spread.east'], gradientImages = [], indent = gradientComboBox.getIndent(), height = 18, padding = 2; gradients.forEach(function (gradient) { gradientImages[gradient] = { width: indent, height: height, comps: [ { type: 'rect', rect: [padding, padding, indent - 2 * padding, height - 2 * padding], background: 'red', gradient: gradient, gradientColor: 'white' } ] }; }); gradientComboBox.setValues(gradients); gradientComboBox.setValue('linear.southwest'); gradientComboBox.setWidth(90); gradientComboBox.setDropDownWidth(140); gradientComboBox.drawValue = function(g, value, selected, x, y, w, h){ var self = this, indent = self.getIndent(), label = self.toLabel(value), icon = gradientImages[value]; if(icon){ ht.Default.drawCenterImage(g, icon, x+indent/2, y+h/2); x += indent; } if(label){ ht.Default.drawText(g, label, self.getLabelFont(value, selected), self.getLabelColor(value, selected), x, y, 0, h); } }; gradientComboBox.onValueChanged = function(oldValue, newValue){ onComboBoxValueChanged(dataModel, oldValue, newValue, 'shape.gradient', this); }; return gradientComboBox; }
这是背景渐变效果列表的具体构建代码,我来描述下具体的设计思路:
- 将HT for Web支持的渐变效果组合起来放在一个叫gradient的数组变量中;
- 通过遍历gradient数组来动态创建gradient对应的矢量图,并将矢量图存放在gradientImages的数组变量中;
- 将gradient文本值作为ComboBox的value,并设置ComboBox的相关参数;
- 通过重载ComboBox的drawValue方法来实现自定义下拉列表;
- 在drawValue方法中需要传入的参数有:g(画笔),value(对应comboBox中values),selected(是否被选中),x,y(画笔的其实绘制坐标x,y),w,h(画笔绘制的宽高w,h);
- 通过ht.Default.drawCenterImage()方法将数量图元绘制到指定位置;
- 通过ht.Default.drawText()方法将要显示的的值绘制到指定的位置;
- 最后重载ComboBox的onValueChanged()方法来监听ComboBox的属性变化,并按照要求做对应的业务处理。
整体思路就是这样子的,相应的图形ComboBox组件也是如此的设计思路,接下来我们来了解下ComboBox和HT for Web网络拓扑图组件GraphView的联动效果实现吧。
通过两张图的对比,我相信大家都能够感受到变化吧。前一张是GraphView的初始状态,后一张是通过选中图元后修改gradient渐变选择框后的效果,我们来看看具体的代码实现,GraphView和Node的创建我就不在这多说了,直接上事件处理的具体实现代码:
function onComboBoxValueChanged(dataModel, oldValue, newValue, style, scope){ var sm = dataModel.sm(); if(sm.size() === 0){ dataModel.each(function(data){ data.setStyle(style, newValue); }, scope); }else{ sm.each(function(data){ data.setStyle(style, newValue); }, scope); } }
代码很简单,做的事情也很简单,接下来我们就来分析下代码的具体实现:
- 方法的入参:dataModel(数据容器),oldValue(comboBox老值), newValue(comboBox新值), style(要改变的样式名称), scope(方法调用者);
- 从dataModel中获取相应的selectionModel sm;
- 根据sm.size()来判断在GraphView中选取了多少个data,如果一个都没选中,则修改dataModel中的所有data的属性;如果有选中的data,则只修改所选中data的属性。
到此自绘制HT for Web ComboBox下拉框组件的介绍就结束了,HT for Web通用组件的灵活性和易用性还不止如此,在本文中涉及到矢量、ComboBox、拓扑图组件等几个关键的知识点,在后续的文章中会做具体的阐述,欢迎大家届时关注。
相关推荐
wpf comboBox 下拉框全国地址联动 的整个项目代码
自定义类似网页中的下拉框组件,可设置comboBox背景,字体颜色,整体颜色,更改大小,获取选中项的值、设置弹出框的大小。
这个是从国外网站直接下载的自定义ComboBox下拉框,支持下拉列表中带复选框,下来列表多列列表。
Delphi为StringGrid网格显示控件中增加下拉框功能,也就是在Grid控件中添加Combobox下拉列表的功能,在任意列显示一个ComboBox功能,如演示截图所示,可大大扩展Grid的功能。生成列表: with Sender as TComboBox ...
实现了ComBoBox下拉框显示图片和文字的效果,实现Static控件图片的显示效果 ,简单的源码仅供参考
好用的combobox下拉框
本文介绍C# 枚举绑定到ComboBox下拉框的实际开发代码,是开发人员的实际经验总结;绑定原理也适用于其他开发语言,如:Java、C++等
C# 支持多选的ComboBox下拉框控件源代码 从网上收集到的,与大家共享。
Delphi在stringGrid控件中嵌入Combobox下拉框,源码,供参考。
用途:一般用于系统管理中多选角色,涉及 1、css样式:flex布局,postion之absolute,relative,画三角形 2、input checkbox类型的 v-model 双向绑定 onchange事件 3、数组过滤及循环遍历 4、子组件向父组件传值
combobox下拉框插件,具体的api可见combobox官网,主要特色是很方便地进行级联选择,这里是js压缩后的版本,使用时之间放入html即可,更加轻巧可用。
支持多选的ComboBox下拉框控件源代码 支持多种资源形式
krpano 生成html弹窗,showtextlist文本介绍,combobox下拉框,hotspot热点带标题
这是我的博客 里提到的 表格使用的整个项目代码
改变ComboBox下拉高度/强行展开下拉表/自动查询列表/多列下拉框/XP风格Combobox/带图标的ComboBox 多个与ComboBox相关的源码工程下载
ios应用源码之一个自己写的下拉框组件,需要者自取 combobox
一个简单的带CheckBox的ComboBox控件,不用重写Paint。可以轻松的修改为其他下拉类型的下拉框,如TreeView\ListView之类的。
IOS应用源码——一个自己写的下拉框组件,需要者自取 comboBox.zip
本方法和用checkbox, listbox等控件和事件拼凑出来的不同,本方法是一个集成的独立控件,基本实现了控件的顺滑度,下拉框可悬浮等效果,可以认为是comboBox的升级版,使用方便,仅需引用编译好的DLL,直接在toolBox...
在WinForm界面上,采用自定义ComboBox控件实现在下拉框中显示颜色列表。本程序在VS2008下编译通过。