傳統的HTML5的下拉框select只能實現簡單的文字下拉選單,而HT for Web通用元件中ComboBox不僅能夠實現傳統HTML5下拉框效果,而且可以在文字框和下拉選單中新增自定義的小圖示,讓整個元件看起來更直觀,今天我就如何制定ComboBox自定義下拉框做一番探討。
首先我們先來目睹下效果:
看起來跟普通的ComboBox好像也沒什麼特殊的,是的,按照規範的ComboBox設計,完全可以實現同樣的效果,但是今天的主要任務並不是討論有多少實現方案,今天的首要任務是介紹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; }
這是背景漸變效果列表的具體構建程式碼,我來描述下具體的設計思路:
- 將HT for Web支援的漸變效果組合起來放在一個叫gradient的陣列變數中;
- 通過遍歷gradient陣列來動態建立gradient對應的向量圖,並將向量圖存放在gradientImages的陣列變數中;
- 將gradient文字值作為ComboBox的value,並設定ComboBox的相關引數;
- 通過過載ComboBox的drawValue方法來實現自定義下拉選單;
- 在drawValue方法中需要傳入的引數有:g(畫筆),value(對應comboBox中values),selected(是否被選中),x,y(畫筆的其實繪製座標x,y),w,h(畫筆繪製的寬高w,h);
- 通過ht.Default.drawCenterImage()方法將數量圖元繪製到指定位置;
- 通過ht.Default.drawText()方法將要顯示的的值繪製到指定的位置;
- 最後過載ComboBox的onValueChanged()方法來監聽ComboBox的屬性變化,並按照要求做對應的業務處理。
整體思路就是這樣子的,相應的圖形ComboBox元件也是如此的設計思路,接下來我們來了解下ComboBox和HT for Web網路拓撲圖元件GraphView的聯動效果實現吧。
通過兩張圖的對比,我相信大家都能夠感受到變化吧。前一張是GraphView的初始狀態,後一張是通過選中圖元后修改gradient漸變選擇框後的效果,我們來看看具體的程式碼實現,GraphView和Node的建立我就不在這多說了,直接上事件處理的具體實現程式碼:
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); } }
程式碼很簡單,做的事情也很簡單,接下來我們就來分析下程式碼的具體實現:
- 方法的入參:dataModel(資料容器),oldValue(comboBox老值), newValue(comboBox新值), style(要改變的樣式名稱), scope(方法呼叫者);
- 從dataModel中獲取相應的selectionModel sm;
- 根據sm.size()來判斷在GraphView中選取了多少個data,如果一個都沒選中,則修改dataModel中的所有data的屬性;如果有選中的data,則只修改所選中data的屬性。
到此自繪製HT for Web ComboBox下拉框元件的介紹就結束了,HT for Web通用元件的靈活性和易用性還不止如此,在本文中涉及到向量、ComboBox、拓撲圖元件等幾個關鍵的知識點,在後續的文章中會做具體的闡述,歡迎大家屆時關注。