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

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

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

看起来跟普通的ComboBox好像也没什么特殊的,是的,按照规范的ComboBox设计,完全可以实现同样的效果,但是今天的主要任务并不是讨论有多少实现方案,今天的首要任务是介绍HT for WebComboBox自定义下拉列表的用法。

那么接下来就开始具体的方案介绍,废话不多说,上代码:

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;
}

这是背景渐变效果列表的具体构建代码,我来描述下具体的设计思路:

  1. HT for Web支持的渐变效果组合起来放在一个叫gradient的数组变量中;
  2. 通过遍历gradient数组来动态创建gradient对应的矢量图,并将矢量图存放在gradientImages的数组变量中;
  3. 将gradient文本值作为ComboBox的value,并设置ComboBox的相关参数;
  4. 通过重载ComboBox的drawValue方法来实现自定义下拉列表;
  5. 在drawValue方法中需要传入的参数有:g(画笔),value(对应comboBox中values),selected(是否被选中),x,y(画笔的其实绘制坐标x,y),w,h(画笔绘制的宽高w,h);
  6. 通过ht.Default.drawCenterImage()方法将数量图元绘制到指定位置;
  7. 通过ht.Default.drawText()方法将要显示的的值绘制到指定的位置;
  8. 最后重载ComboBox的onValueChanged()方法来监听ComboBox的属性变化,并按照要求做对应的业务处理。

整体思路就是这样子的,相应的图形ComboBox组件也是如此的设计思路,接下来我们来了解下ComboBoxHT for Web网络拓扑图组件GraphView的联动效果实现吧。

通过两张图的对比,我相信大家都能够感受到变化吧。前一张是GraphView的初始状态,后一张是通过选中图元后修改gradient渐变选择框后的效果,我们来看看具体的代码实现,GraphViewNode的创建我就不在这多说了,直接上事件处理的具体实现代码:

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);
    }
}

代码很简单,做的事情也很简单,接下来我们就来分析下代码的具体实现:

  1. 方法的入参:dataModel(数据容器),oldValue(comboBox老值), newValue(comboBox新值), style(要改变的样式名称), scope(方法调用者);
  2. 从dataModel中获取相应的selectionModel sm;
  3. 根据sm.size()来判断在GraphView中选取了多少个data,如果一个都没选中,则修改dataModel中的所有data的属性;如果有选中的data,则只修改所选中data的属性。

到此自绘制HT for Web ComboBox下拉框组件的介绍就结束了,HT for Web通用组件的灵活性和易用性还不止如此,在本文中涉及到矢量、ComboBox、拓扑图组件等几个关键的知识点,在后续的文章中会做具体的阐述,欢迎大家届时关注。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏hightopo

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

943
来自专栏phodal

我的职业是前端工程师【三】:学习前端只需要三个月【语言篇】

过去,我一直无法相信:一个新人在三个月里可以学好前端。后来,我信了。因为三个月后,我又是一个前端的新人,我又需要重新入门前端。 前端领域好似也有一个“摩尔定律”...

1709
来自专栏Web 开发

读书笔记《React-引领未来的用户界面开发框架》

其组件化思路,是一种垂直划分,每个组件高度自治。与我们习惯上的Html、JS、CSS三分离的水平划分思路不一样。

560
来自专栏阿凯的Excel

金字塔图绘制(Excel绘制图表系列课程)

今天和大家分享金字塔图的绘制 什么是金字塔图呢?就是长得很像金字塔的图! 哦! 问:那是长这样? ? 答:额,有点像,但是不是! 问:那是怎样? 答:如下图。...

2813
来自专栏增长技术

关于Swift

Swift是一种新的建立在C和Objective-C的基础之上用来开发iOS和OS X应用,完全兼容C。 Swift采用了安全的编程模式并增添了现代的功能使编程...

812
来自专栏Android机器圈

Android之MaterialDesign应用技术

  PS:纵观现在大大小小软件的界面都变的比较漂亮,还有一些系统了,比如小米的MIUI,华为的EMUI等,虽然底层都是安卓,但他们的界面多多少少都会不同,谷歌对...

3479
来自专栏hightopo

HT图形组件设计之道(三)

1133
来自专栏HT

HT图形组件设计之道(三)

上篇我们通过定制了CPU和内存展示界面,体验了HT for Web通过定义矢量实现图形绘制与业务数据的代码解耦及绑定联动,这类案例后续文章还会继续以便大家掌握更...

2069
来自专栏木子昭的博客

红了绿了什么的最有意思了

在线展示地址: http://echarts.baidu.com/examples/editor.html?c=area-simple

424
来自专栏前端黑板报

小程序-实现竖排文字(二)

前一篇文章《小程序-实现竖排文字》只说了一个解决方案,这次再说一些别的解决方案。 把每一句古诗竖排布局,wxml 代码结构: <view class="mod-...

2626

扫码关注云+社区