`
xhload3d
  • 浏览: 207706 次
社区版块
存档分类
最新评论

自绘制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文本值作为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、拓扑图组件等几个关键的知识点,在后续的文章中会做具体的阐述,欢迎大家届时关注。

 
 

  • 大小: 10.6 KB
  • 大小: 10.1 KB
  • 大小: 24.8 KB
  • 大小: 29.4 KB
分享到:
评论

相关推荐

    ios-自定义ComboBox下拉框组件.zip

    本项目“ios-自定义ComboBox下拉框组件”正是为了解决这一问题,它提供了一个类似网页中ComboBox的功能,使得用户可以在输入框中进行选择操作,提升界面的交互性。 该组件的核心在于其自定义的下拉框效果,它允许...

    C#自定义ComboBox下拉框

    这个自定义ComboBox下拉框的主要特点包括: 1. **复选框集成**:在下拉列表的每一项中都包含了复选框,用户可以勾选多个选项,这对于需要多选的场景非常有用。例如,用户可能需要从一组类别中选择多个标签或者兴趣...

    wpf comboBox 下拉框全国地址联动

    在本文中,我们将深入探讨如何在WPF(Windows Presentation Foundation)应用程序中实现一个基于comboBox的全国地址联动功能。ComboBox是WPF中一个常用的控件,它允许用户在下拉列表中选择一个项或者输入自定义内容...

    ComBoBox下拉框图片文字显示源码

    总结,实现“ComBoBox下拉框图片文字显示源码”主要涉及自定义控件、处理DrawItem事件、管理图片资源和数据结构。这是一个对用户界面定制化程度较高的功能,适用于需要丰富视觉效果的Windows应用程序。通过这种方式...

    改变ComboBox下拉高度/强行展开下拉表/自动查询列表/多列下拉框/XP风格Combobox/带图标的ComboBox

    这个主题涵盖了几个关于ComboBox的高级特性和定制方法,包括改变下拉高度、强制展开下拉列表、实现自动查询功能、创建多列下拉框、应用XP风格以及添加图标到ComboBox。 1. 改变ComboBox下拉高度:默认情况下,...

    Delphi为StringGrid控件增加Combobox下拉框.rar

    Delphi为StringGrid网格显示控件中增加下拉框功能,也就是在Grid控件中添加Combobox下拉列表的功能,在任意列显示一个ComboBox功能,如演示截图所示,可大大扩展Grid的功能。生成列表:  with Sender as TComboBox ...

    好用的combobox下拉框

    好用的combobox下拉框

    支持多选的ComboBox下拉框控件源代码

    在.NET框架中,ComboBox是Windows Forms控件库中的一个常用组件,它通常用于展示一个下拉列表供用户选择。然而,标准的ComboBox控件只支持单选,即一次只能选择一个选项。但在某些应用场景中,我们需要用户能同时...

    通用型带CheckBox的ComboBox下拉框控件

    总的来说,这个“通用型带CheckBox的ComboBox下拉框控件”是一个实用的UI组件,它简化了多选下拉框的实现,并且提供了丰富的可定制性。对于需要多选功能的Windows Forms或WPF应用来说,这是一个理想的解决方案。通过...

    C# 枚举绑定到ComboBox下拉框

    本文介绍C# 枚举绑定到ComboBox下拉框的实际开发代码,是开发人员的实际经验总结;绑定原理也适用于其他开发语言,如:Java、C++等

    vue自定义ComboBox下拉框多选组件.zip

    用途:一般用于系统管理中多选角色,涉及 1、css样式:flex布局,postion之absolute,relative,画三角形 2、input checkbox类型的 v-model 双向绑定 onchange事件 3、数组过滤及循环遍历 4、子组件向父组件传值

    有名的combobox下拉框插件压缩后的js版本

    combobox下拉框插件,具体的api可见combobox官网,主要特色是很方便地进行级联选择,这里是js压缩后的版本,使用时之间放入html即可,更加轻巧可用。

    combobox实现下拉框多选

    本方法和用checkbox, listbox等控件和事件拼凑出来的不同,本方法是一个集成的独立控件,基本实现了控件的顺滑度,下拉框可悬浮等效果,可以认为是comboBox的升级版,使用方便,仅需引用编译好的DLL,直接在toolBox...

    Delphi在stringGrid控件中嵌入Combobox下拉框

    StringGrid是TStringGrid组件的实例,它继承自TDrawGrid,提供了文本编辑、颜色设置、单元格对齐等特性。要在StringGrid的某个单元格中添加Combobox,我们需要执行以下步骤: 1. **创建Combobox**:在Form设计界面...

    WPF DataGrid ComboBox下拉框数据绑定 代码实例

    在本文中,我们将深入探讨如何在WPF(Windows Presentation Foundation)中使用DataGrid控件结合ComboBox实现数据绑定。WPF是.NET Framework的一部分,提供了一种强大的UI开发工具,支持丰富的图形效果和数据绑定...

    支持多选的ComboBox下拉框控件源代码用户自定义控件-带checkbox功能的按钮

    "支持多选的ComboBox下拉框控件源代码"是一种常见的需求,它允许用户在下拉列表中选择多个选项,通常通过集成复选框来实现。这个控件在数据输入和筛选时提供了极大的便利性。以下是对这一主题的详细说明: 1. **...

    krpano 生成html弹窗,showtextlist文本介绍,combobox下拉框,hotspot热点带标题

    krpano同样支持创建combobox(下拉框)控件,这对于提供多种选项供用户选择非常有用。在krpano的xml中,你可以定义一个`combobox`层,设置其`options`属性为包含选项的数组。用户选择某个选项后,可以通过监听`...

    自动改变宽度的ComboBox

    4. **自定义控件**:如果内置的ComboBox控件不支持自动调整宽度,开发者可能需要创建一个自定义控件,继承自ComboBox,并添加额外的逻辑来处理宽度变化。 5. **布局管理**:在一些高级的UI框架中,如WPF,可以利用...

    VB.Net自己写的一个控件:ComboBox下拉列表中显示多列数据

    自己考虑到可以用一个ComboBox和一个ListView结合做一个能够显示多列内容的ComboBox下拉框,可以将一个数据表绑定到ComboBox中的用户控件。 界面和用法:...

Global site tag (gtag.js) - Google Analytics