下拉框的value值怎么设置为变量_自绘制HT For Web ComboBox下拉框组件
传统的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、拓扑图组件等几个关键的知识点,在后续的文章中会做具体的阐述,欢迎大家届时关注。
下拉框的value值怎么设置为变量_自绘制HT For Web ComboBox下拉框组件相关推荐
- 自绘制HT For Web ComboBox下拉框组件
传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HT for Web通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框和下拉列表中添加自定义的小图标,让 ...
- python设置环境变量_小白Python进行中
一.安装 安装包的下载 在官网进行下载,我选用Python3.8.0. Welcome to Python.orgwww.python.org 安装 安装的时候可以借鉴该视频. Windows 10 ...
- linux设置环境变量_什么是linux环境变量
本来这篇文章好几天之前就写好了,但是媳妇儿跟我说工作日就不要发了,大家都在上班,哪有闲心思看你的文章.哎,可能大家用头条都是在放松刷娱乐,看小姐姐.所以就一直拖到现在.周末了,更是放松的好时候,葛优躺 ...
- linux中设置环境变量_如何在Linux中设置环境变量
linux中设置环境变量 Wondering how to set environment variables in Linux? This is exactly what we'll be doin ...
- java设置系统环境变量_设置java 环境变量
DOS下任意目录用JAVA,JAVAC肯定是显示正确咯,因为你设置好了JAVAlib和bin的但是JAVA文件需要DOS下CD好了目录才能JAVAC否则是在C:\program里查找该JAVA文件你任 ...
- java 代码里设置环境变量_如何在一个java程序里设置环境变量
展开全部 环境变量是一个具有特定名字的对象,它包含了一个或者多个应用程序所将使用到的信息.例如path,当要62616964757a686964616fe4b893e5b19e313333613064 ...
- 锁屏界面提示某些设置已隐藏_分享华为手机锁屏状态下几大隐藏小功能,快来体验...
分享华为手机锁屏状态下几大隐藏小功能. 一.熄屏显示 平常想要在手机上看时间.日期等信息,需要点亮屏幕,很费时费电,还损耗手机按键. 熄屏显示,支持在熄屏状态下显示时间.日期.手机电量等基础信息,更有 ...
- win7python怎么设置环境变量_如何在win7下设置python的环境变量
工具/原料 win7 方法/步骤 右键计算机,选择属性. 环境变量"> 点高级系统设置--环境变量. 在系统变量中双击Path. 输入变量名及变量值,点确定. win+r打开运行,输入 ...
- vs矩形框边框线显示被选中的区域;_条形码区域解码:Web小工具
条形码解码首先要做定位,找到条形码在图像中的区域.但是有时候受图像质量影响,算法找寻的区域可能产生偏差,最后导致解码失败.这个时候,可以尝试手动选择区域,来辅助条形码的识别. Web Canvas框选 ...
最新文章
- Pandas中iloc、loc、ix三者的区别
- softmax 与 logsoftmax 区别 或者说logsoftmax优点
- vue 中watch函数名_vue中避免使用函数来绑定依赖
- 互联网公司败局汇总,这些公司都是怎么死的?(上篇)
- 写给新手程序员的一封信
- asp.net mvc中用 log4net记录日志到数据库中
- JAVA常见错误处理方法 和 JVM内存结构
- 蝙蝠侠遥控器pcb_通过蝙蝠侠从Circle到ML:第一部分
- 解决adb调试显示 Connected Device ************** [null]
- linux远程调用的脚本在ssh时报错,linux:ssh远程调用tomcat脚本时候出错
- 在Ajax方式产生的浮动框中,点击选项包含某个关键字的选项
- awk用法小结(作者总结)
- [剑指offer]面试题第[67]题[Leetcode][JAVA][第8题] 字符串转换整数 (atoi)[字符串]
- 使用 Composer 为 ThinkPHP(3.2.3)框架添加和管理组件
- 测试面试题集-3.生活物品测试:杯子、伞、钢笔、桌子
- css怎么写链接到图片和地址
- 网络游戏的客户端同步问题
- 一个实现业务规则组合小框架
- Memcached启动提示:cann't run as root without the -u switch
- java持续集成soapui_接口自动化测试持续集成--Soapui接口测试
热门文章
- quartz获取开始结束时间_王者荣耀s21什么时候开始是9月24日吗?王者荣耀s20赛季结束时间...
- 行星齿轮设计_精密行星减速机的作用、分类及应用领域和特点
- python怎么验证两个json是不是一样_比较Python中的两个JSON树
- 漫画科普:芯片是如何设计出来的
- java bitset 扩展_将java BitSet保存到DB
- java 文件递归删除文件夹_Java十行代码实现递归删除文件夹中所有文件
- python seach_python 正则re.search
- python识别图片指定位置文字_python批量识别图片指定区域文字内容
- 系统动力学9种模型_软工国际标准专栏(9)|系统和软件质量模型
- 对于反射的一些总结(一)