文档章节

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

xhload3d
 xhload3d
发布于 2015/03/12 16:17
字数 1089
阅读 450
收藏 0

传统的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文本值作为ComboBoxvalue,并设置ComboBox的相关参数;

  4. 通过重载ComboBoxdrawValue方法来实现自定义下拉列表;

  5. drawValue方法中需要传入的参数有:g(画笔),value(对应comboBoxvalues),selected(是否被选中),xy(画笔的其实绘制坐标xy),wh(画笔绘制的宽高wh);

  6. 通过ht.Default.drawCenterImage()方法将数量图元绘制到指定位置;

  7. 通过ht.Default.drawText()方法将要显示的的值绘制到指定的位置;

  8. 最后重载ComboBoxonValueChanged()方法来监听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(数据容器),oldValuecomboBox老值), newValuecomboBox新值), style(要改变的样式名称), scope(方法调用者);

  2. dataModel中获取相应的selectionModel sm

  3. 根据sm.size()来判断在GraphView中选取了多少个data,如果一个都没选中,则修改dataModel中的所有data的属性;如果有选中的data,则只修改所选中data的属性。

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

© 著作权归作者所有

xhload3d
粉丝 194
博文 174
码字总数 362206
作品 0
崇明
私信 提问
easyui combobox下拉框实现多选框以及全选、全不选的实现

实现效果如下图: 当勾选全选的时候,可以选中下列所有的选项,当取消勾选时可取消所有勾选。 废话不多说 贴代码吧: 前端代码: //这里的id是上面的combobox的id,因为我要在点击一个按钮的之...

故久呵呵
2018/07/12
414
0
easyui里的disabled设置

在设置禁用和可用的时候,尝试过的写法有: $('#ID').combobox('enable'); $('#ID').combobox('disable'); 也尝试过: $("#ID").combobox("disabled",false); $("#ID").combobox("disabled",tru......

文文1
2016/09/20
161
0
前端框架 JQuery LigerUI 更新至 V1.2.0

V1.2.0更新记录 核心 [需求]支持解析html(属性、事件直接在html元素中定义即可) 表单 [需求]新增RadioList组件 [需求]新增CheckBoxList组件 [需求]新增ListBox组件 [需求]新增PopupEdit(弹出...

夫复何求
2013/07/07
6.3K
12
Qt编写自定义控件52-颜色下拉框

一、前言 这个控件写了很久了,元老级别的控件之一,开发之初主要是自己的好几个项目要用到,比如提供一个颜色下拉框设置对应的曲线或者时间颜色,视频监控项目中经常用到的OSD标签设置,这个...

飞扬青云
09/17
38
0
.NET快速信息化系统开发框架 V3.2 -> Web 用户管理模块编辑界面-组织机构选择支持级联选择

下拉框级联选择功能非常的实用,框架用户管理编辑界面对组织机构的选择在3.2版本中新增了级联选择的支持,让组织机构的选择更加的方便与高效,也不容易出错。 我们框架的组织机构结合实际分成...

NET快速开发框架
2018/07/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql-connector-java升级到8.0后保存时间到数据库出现了时差

在一个新项目中用到了新版的mysql jdbc 驱动 <dependency>     <groupId>mysql</groupId>     <artifactId>mysql-connector-java</artifactId>     <version>8.0.18</version> ......

ValSong
55分钟前
5
0
Spring Boot 如何部署到 Linux 中的服务

打包完成后的 Spring Boot 程序如何部署到 Linux 上的服务? 你可以参考官方的有关部署 Spring Boot 为 Linux 服务的文档。 文档链接如下: https://docs.ossez.com/spring-boot-docs/docs/r...

honeymoose
57分钟前
5
0
Spring Boot 2 实战:使用 Spring Boot Admin 监控你的应用

1. 前言 生产上对 Web 应用 的监控是十分必要的。我们可以近乎实时来对应用的健康、性能等其他指标进行监控来及时应对一些突发情况。避免一些故障的发生。对于 Spring Boot 应用来说我们可以...

码农小胖哥
今天
6
0
ZetCode 教程翻译计划正式启动 | ApacheCN

原文:ZetCode 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 ApacheCN 学习资源 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 ...

ApacheCN_飞龙
今天
4
0
CSS定位

CSS定位 relative相对定位 absolute绝对定位 fixed和sticky及zIndex relative相对定位 position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则...

studywin
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部