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

of traditional HTML5 The drop-down box Select You can only implement a simple text drop-down list, and HT for W EB in common components ComboBox not only to achieve traditional HTML5 Drop -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 develop ComboBox Customize 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.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 (;    ) Gradientcombobox.setdropdownwidth (    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;}

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. by traversing Gradient array to dynamically create Gradient vector images and store the vectors in the gradientimages in the array variable;

6. will be Gradient text value as ComboBox of the value , and set ComboBox the relevant parameters;

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 this, the corresponding graphic ComboBox component is also such a design idea, next we understand the ComboBox and HT for Web network topology Diagram component Graphview implementation of the linkage effect.

Through the comparison between the two graphs, I believe that everyone can feel the change. The previous one is the initial state of Graphview, 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, the creation of Graphview and node I will not say more, directly on the event processing of the specific implementation code:

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:

2. datamodel (data container) Span style= "font-size:14px" >oldvalue ( combobox old value) ( combobox new value" , style (method caller);

4. selectionmodel sm

6. according to graphview How many data datamodel data data data

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