你的位置:首页 > 软件开发 > 网页设计 > 自绘制HT For Web ComboBox下拉框组件

自绘制HT For Web ComboBox下拉框组件

发布时间:2015-03-12 17:01:34
传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HT for Web通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框和下拉列表中添加自定义的小图标,让整个组件看起来更直观,今天我就如何制定ComboBox自定义下拉框做一番探讨。首 ...

传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HT for Web通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框和下拉列表中添加自定义的小图标,让整个组件看起来更直观,今天我就如何制定ComboBox自定义下拉框做一番探讨。

首先我们先来目睹下效果:

自绘制HT For Web ComboBox下拉框组件 自绘制HT For Web 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 ComboBox下拉框组件

关键词:web

web
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。