傳統(tǒng)的HTML5的下拉框select只能實(shí)現(xiàn)簡單的文字下拉列表，而HT for Web通用組件中ComboBox不僅能夠?qū)崿F(xiàn)傳統(tǒng)HTML5下拉框效果，而且可以在文本框和下拉列表中添加自定義的小圖標(biāo)，讓整個(gè)組件看起來更直觀，今天我就如何制定ComboBox自定義下拉框做一番探討。

首先我們先來目睹下效果：

看起來跟普通的ComboBox好像也沒什么特殊的，是的，按照規(guī)范的ComboBox設(shè)計(jì)，完全可以實(shí)現(xiàn)同樣的效果，但是今天的主要任務(wù)并不是討論有多少實(shí)現(xiàn)方案，今天的首要任務(wù)是介紹HT for Web的ComboBox自定義下拉列表的用法。

那么接下來就開始具體的方案介紹，廢話不多說，上代碼：

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;

}

這是背景漸變效果列表的具體構(gòu)建代碼，我來描述下具體的設(shè)計(jì)思路：

將HT for Web支持的漸變效果組合起來放在一個(gè)叫g(shù)radient的數(shù)組變量中；

通過遍歷gradient數(shù)組來動(dòng)態(tài)創(chuàng)建gradient對應(yīng)的矢量圖，并將矢量圖存放在gradientImages的數(shù)組變量中；

將gradient文本值作為ComboBox的value，并設(shè)置ComboBox的相關(guān)參數(shù)；

通過重載ComboBox的drawValue方法來實(shí)現(xiàn)自定義下拉列表；

在drawValue方法中需要傳入的參數(shù)有：g(畫筆)，value(對應(yīng)comboBox中values)，selected(是否被選中)，x，y(畫筆的其實(shí)繪制坐標(biāo)x，y)，w，h(畫筆繪制的寬高w，h)；

通過ht.Default.drawCenterImage()方法將數(shù)量圖元繪制到指定位置；

通過ht.Default.drawText()方法將要顯示的的值繪制到指定的位置；

最后重載ComboBox的onValueChanged()方法來監(jiān)聽ComboBox的屬性變化，并按照要求做對應(yīng)的業(yè)務(wù)處理。

整體思路就是這樣子的，相應(yīng)的圖形ComboBox組件也是如此的設(shè)計(jì)思路，接下來我們來了解下ComboBox和HT for Web網(wǎng)絡(luò)拓?fù)鋱D組件GraphView的聯(lián)動(dòng)效果實(shí)現(xiàn)吧。

通過兩張圖的對比，我相信大家都能夠感受到變化吧。前一張是GraphView的初始狀態(tài)，后一張是通過選中圖元后修改gradient漸變選擇框后的效果，我們來看看具體的代碼實(shí)現(xiàn)，GraphView和Node的創(chuàng)建我就不在這多說了，直接上事件處理的具體實(shí)現(xiàn)代碼：

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

}

}

代碼很簡單，做的事情也很簡單，接下來我們就來分析下代碼的具體實(shí)現(xiàn)：

方法的入?yún)?#xff1a;dataModel(數(shù)據(jù)容器),oldValue(comboBox老值), newValue(comboBox新值), style(要改變的樣式名稱), scope(方法調(diào)用者)；

從dataModel中獲取相應(yīng)的selectionModel sm；

根據(jù)sm.size()來判斷在GraphView中選取了多少個(gè)data，如果一個(gè)都沒選中，則修改dataModel中的所有data的屬性；如果有選中的data，則只修改所選中data的屬性。

到此自繪制HT for Web ComboBox下拉框組件的介紹就結(jié)束了，HT for Web通用組件的靈活性和易用性還不止如此，在本文中涉及到矢量、ComboBox、拓?fù)鋱D組件等幾個(gè)關(guān)鍵的知識點(diǎn)，在后續(xù)的文章中會(huì)做具體的闡述，歡迎大家屆時(shí)關(guān)注。

總結(jié)

以上是生活随笔為你收集整理的下拉框的value值怎么设置为变量_自绘制HT For Web ComboBox下拉框组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。