Self-drawing HT for WEB ComboBox drop-down box component

of traditionalHTML5The drop-down boxSelectYou can only implement a simple text drop-down list, andHT forWEBin common componentsComboBoxnot only to achieve the traditionalHTML5Drop -down box effect, and you can add custom small icons to the text box and drop-down list to make the whole component look more intuitive, today I'll developComboBoxCustomize the drop-down box to do some research.

First, let's see the effect:

looks like normal. ComboBox It seems that there is nothing special, yes, according to the standard ComboBox design, can achieve the same effect, but today's main task is not to discuss how many implementation scenarios, the first task today is to introduce HT for Web of the ComboBox the usage of the custom drop-down list.

So the next step is to start a specific introduction, nonsense not much to say, on the code:

function Creategradientcombobox (datamodel) {var sm = Datamodel.sm (), Gradientcombobox = new Ht.widget.ComboBox () , gradients = [' linear.southwest ', ' linear.southeast ', ' linear.northwest ', ' linear.northeast ', ' Linear.nort ' H ', ' Linear.south ', ' linear.west ', ' linear.east ', ' radial.center ', ' radial.southwest ', ' radial.southeast ', ' radial.no Rthwest ', ' radial.northeast ', ' Radial.north ', ' Radial.south ', ' radial.west ', ' radial.east ', ' Spread.hori ' Zontal ', ' spread.vertical ', ' spread.diagonal ', ' spread.antidiagonal ', ' Spread.north ', ' Spread.south ', ' spread.west ', ' Spread.east '], gradientimages = [], indent = gradientcombobox.getindent (), height =, paddi    ng = 2; Gradients.foreach (function (gradient) {Gradientimages[gradient] = {width:indent, height:h Eight, comps: [{type: ' rect ', rect: [Padding, padding, I Ndent-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 = this, indent = self.ge        Tindent (), 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, Newvalu E, ' Shape.gradiEnt ', this);    }; return gradientcombobox;}

This is the concrete construction code of the background gradient effect list, let me describe the specific design idea:

2. will be HT For Web the supported gradient effects are grouped together in a set called Gradient in the array variable;
4. gradient array to dynamically create gradient gradientimages
6. gradient literal value as combobox value combobox
8. by overloading ComboBox of the Drawvalue method to implement a custom drop-down list;
9. in theDrawvaluethe parameters to be passed in the method are:g(brushes),value(correspondingComboBoxinValues),selected(whether or not it is selected),x,y(the brush actually draws coordinatesx,y),W,h(Brush-drawn width-heightW,h);
11. through ht. The Default.drawcenterimage () method plots the quantity entity to the specified position;
13. through ht. The Default.drawtext () method draws the value to be displayed to the specified position;
15. Last Reload ComboBox of the onvaluechanged () method to listen ComboBox property changes and do the corresponding business processing as required.

The whole idea is like this, the corresponding graphic C Ombobox component is the same design idea, let's look at the next ComboBox and the HT for Web network topology diagram component Graphview the linkage effect to achieve it.

through the comparison between the two graphs, I believe that everyone can feel the change. The previous one is The initial state of the Graphview, and the latter is the effect of modifying the gradient gradient selection box after selecting the entity, let's take a look at the specific code implementation, Graphview and Node Creation I'm not going to talk about this anymore. The specific implementation code for the event handling directly:

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

The code is very simple, the things to do is very simple, then we will analyze the implementation of the Code:

1. the entry of the method:Datamodel(Data container),OldValue(ComboBoxold value), NewValue(ComboBoxnew value), Style(the name of the style to change), Scope(method caller);
3. from Datamodel to obtain the appropriate Selectionmodel SM ;
4. according tosm.size ()to judge theGraphviewHow many of these are selected in theData, if none is selected, modify theDatamodelall of theDataIf there is a selectedData, modify only the selectedData's properties.

to this self-drawing HT For Web ComboBox The introduction of the drop-down box component is over, HT for Web The flexibility and ease-of-use of general-purpose components is more than that, and in this article it involves vectors, ComboBox , topology diagram components and other key knowledge points, in the following article will do a concrete exposition, welcome to the attention of all.

Self-drawing HT for WEB ComboBox drop-down box component