API Docs for: 1.10.1 最后更新日期:2016年03月28日
Google搜索   
Show:

File: lib/ui/LComboBox-0.1.0.js

/** @language chinese
 * <p>lufylegend.js专用UI,组合框。</p>
 * <p>使用时需要引进lufylegend.ui-x.x.x.js文件。</p>
 * @class UI:LComboBox
 * @constructor
 * @extends LSprite
 * @param {int} size [可选]组合框文字的大小。
 * @param {String} color [可选]组合框文字的颜色。
 * @param {String} font [可选]组合框文字的格式。
 * @param {LPanel} layer [可选]组合框的背景样式。
 * @param {LDisplayObject} layerUp [可选]组合框的按钮抬起状态样式。
 * @param {LDisplayObject} layerOver [可选]组合框的按钮抬起状态样式。
 * @since 0.1.0
 * @examplelink <p><a href="../../../api/ui/LComboBox.html" target="_blank">测试链接</a></p>
 * @public
 */
var LComboBox = (function () {
	function LComboBox (size, color, font, layerBack, layerUp, layerOver) {
		var s = this;
		LExtends(s, LSprite, []);
		s.type = "LComboBox";
		s.list = [];
		/** @language chinese
		 * [只读]组合框的值的索引
		 * @property selectIndex
		 * @type String
		 * @since 0.1.0
		 * @public
		 */
		s.selectIndex = -1;
		/** @language chinese
		 * [只读]组合框的值
		 * @property value
		 * @type String
		 * @since 0.1.0
		 * @public
		 */
		s.value = null;
		s.selectWidth = 100;
		if (!size) {
			size = 16;
		}
		if (!color) {
			color = "#000000";
		}
		if (!font) {
			font = "Arial";
		}
		s.size = size;
		s.color = color;
		s.font = font;
		s.maxIndex = 5;
		if (!layerBack) {
			var back = new LSprite();
			back.graphics.drawRoundRect(1, "#999999", [0, 0, 12, 12, 4], true, "#f5f5f9");
			var bitBack = new LBitmapData(null, 0, 0, 12, 12, LBitmapData.DATA_CANVAS);
			bitBack.draw(back);
			layerBack = new LPanel(bitBack, 200, 30, 4, 8, 4, 8);
		}
		var layer;
		if (!layerUp || !layerOver) {
			var up, down, data;
			grd = LGlobal.canvas.createLinearGradient(0, -20, 0, 40);
			grd.addColorStop(0, "#FFFFFF");
			grd.addColorStop(1, "#CCCCCC");
			up = new LSprite();
			up.graphics.drawRoundRect(1, "#CCCCCC", [0, 0, 22, 22, 2], true, grd);
			up.graphics.drawVertices(1, "#CCCCCC", [[6, 6], [16, 6], [11, 18]], true, "#008000");
			data = new LBitmapData(null, 0, 0, 22, 22, LBitmapData.DATA_CANVAS);
			data.draw(up);
			layerUp = new LBitmap(data);
			down = new LSprite();
			down.graphics.drawRoundRect(1, "#CCCCCC", [0, 0, 22, 22, 2], true, grd);
			down.graphics.drawVertices(1, "#CCCCCC", [[6, 6], [16, 6], [11, 18]], true, "#32CD32");
			data = new LBitmapData(null, 0, 0, 22, 22, LBitmapData.DATA_CANVAS);
			data.draw(down);
			layerOver = new LBitmap(data);
		}
		s.minWidth = layerBack.getWidth();
		s.minHeight = layerBack.getHeight();
		var layer1 = layerBack.clone();
		layerUp.x = layer1.getWidth() - layerUp.getWidth() -4;
		layerUp.y = 4;
		layer1.arraw = layerUp;
		layer1.addChild(layerUp);
		var layer2 = layerBack.clone();
		layerOver.x = layer2.getWidth() - layerOver.getWidth() -4;
		layerOver.y = 4;
		layer2.arraw = layerOver;
		layer2.addChild(layerOver);
		layer = new LButton(layer1, layer2);
		layer.setCursorEnabled(false);
		layer.staticMode = true;
		s.addChild(layer);
		var label = new LTextField();
		label.x = 4;
		label.y = 4;
		label.text = "";
		label.size = s.size;
		label.color = s.color;
		label.font = s.font;
		layer.addChild(label);
		s.label = label;
		s.layer = layer;
		s.addEventListener(LMouseEvent.MOUSE_UP, s._showChildList);
	}
	/** @language chinese
	 * 组合框的值改变时调用此事件。
	 * @event LComboBox.ON_CHANGE
	 * @since 0.1.0
	*/
	LComboBox.ON_CHANGE = "onchange";
	LComboBox.prototype._ll_resize = function () {
		var s = this;
		if (s.list.length == 0) {
			return;
		}
		var txt = new LTextField();
		txt.text = s.list[0].label;
		txt.size = s.size;
		var w = txt.getWidth();
		var h = txt.getHeight();
		if (h + 8 < s.minHeight) {
			h = s.minHeight - 8;
			s.label.y = (h + 8 - txt.getHeight()) * 0.5;
		} else {
			s.label.y = 4;
		}
		if (w + h + 8 < s.minWidth) {
			w = s.minWidth - h - 8;
		}
		var arraw = s.layer.upState.arraw;
		arraw.scaleX = 1;
		arraw.scaleX = arraw.scaleY = h / arraw.getWidth();
		arraw.x = w + 4;
		arraw = s.layer.downState.arraw;
		arraw.scaleX = 1;
		arraw.scaleX = arraw.scaleY = h / arraw.getWidth();
		arraw.x = w + 4;
		s.layer.upState.resize(w + h + 8, h + 8);
		s.layer.downState.resize(w + h + 8, h + 8);
	},
	/** @language chinese
	 * 删除元素。
	 * @method deleteChild
	 * @param {String} value 删除元素的值。
	 * @since 0.1.0
	 * @public
	 */
	LComboBox.prototype.deleteChild = function (value) {
		var s = this, i, l, delIndex = -1;
		for (i = 0, l = s.list.length; i < l; i++) {
			if (s.list[i].value === value) {
				delIndex = i
				break;
			}
		}
		if (delIndex == -1) {
			return;
		}
		s.list.splice(delIndex, 1);
		if (s.value !== value) {
			return;
		}
		if (s.list.length > 0) {
			s.setValue(s.list[delIndex > 0 ? delIndex - 1 : 0]);
		} else {
			s.selectIndex = -1;
			s.value = null;
		}
		s._ll_resize();
	};
	/** @language chinese
	 * 增加元素。
	 * @method setChild
	 * @param {String} value 增加元素的值。
	 * @since 0.1.0
	 * @public
	 */
	LComboBox.prototype.setChild = function (child) {
		var s = this, i, l;
		if (!child || typeof child.value == UNDEFINED || typeof child.label == UNDEFINED) {
			throw "the child must be an object like:{label:a,value:b}";
		}
		for (i = 0, l = s.list.length; i < l; i++) {
			if (s.list[i].value === child.value) {
				return;
			}
		}
		s.list.push(child);
		if (s.list.length == 1) {
			s.setValue(child.value);
		}
		s._ll_resize();
	};
	LComboBox.prototype._showChildList = function (event) {
		var s = event.currentTarget;
		s.showChildList();
	};
	LComboBox.prototype.showChildList = function () {
		var s = this, i, l, child, w;
		var textLayer = new LSprite();
		selectLayer = new LSprite();
		textLayer.addChild(selectLayer);
		textLayer.selectLayer = selectLayer;
		textLayer.childHeight = s.size * 1.5 >>> 0;
		for (i = 0, l = s.list.length; i < l; i++) {
			child = s.list[i];
			var text = new LTextField();
			text.size = s.size;
			text.color = s.color;
			text.font = s.font;
			text.text = child.label;
			text.x = 5;
			text.y = 5 + textLayer.childHeight * i;
			textLayer.addChild(text);
		}
		w = textLayer.getWidth();
		if (w < 196) {
			w = 196;
		}
		textLayer.graphics.drawRect(1, "#999999", [0, 0, w + 4, textLayer.childHeight * s.list.length + 4], true, "#f5f5f9");
		selectLayer.graphics.drawRect(0, "#CCCCCC", [2, 2, w, textLayer.childHeight], true, "#CCCCCC");
		selectLayer.y = textLayer.childHeight * s.selectIndex;
		var coordinate = s.getRootCoordinate();
		textLayer.comboBox = s;
		var translucent = new LSprite();
		translucent.graphics.drawRect(0, "#000000", [0, 0, LGlobal.width, LGlobal.height], true, "#000000");
		translucent.alpha = 0;
		LGlobal.stage.addChild(translucent);
		translucent.addEventListener(LMouseEvent.MOUSE_UP, function (e) {
			var cnt = LGlobal.stage.numChildren;
			LGlobal.stage.removeChildAt(cnt - 1);
			LGlobal.stage.removeChildAt(cnt - 2);
		});
		translucent.addEventListener(LMouseEvent.MOUSE_DOWN, function (e) {});
		translucent.addEventListener(LMouseEvent.MOUSE_MOVE, function (e) {});
		translucent.addEventListener(LMouseEvent.MOUSE_OVER, function (e) {});
		translucent.addEventListener(LMouseEvent.MOUSE_OUT, function (e) {});
		if (s.list.length > s.maxIndex) {
			var sc = new LScrollbar(textLayer, w, textLayer.childHeight * s.maxIndex, 20, false);
			sc.x = coordinate.x;
			sc.y = coordinate.y + s.layer.getHeight();
			if (sc.y + textLayer.childHeight * s.maxIndex > LGlobal.height) {
				sc.y = LGlobal.height - textLayer.childHeight * s.maxIndex;
			}
			sc.resizeHeight(sc._maskH);
			sc._key["down"] = true;
			sc._key["up"] = false;
			sc._tager = {x : 0, y : 40};
			sc._speed = Math.abs(sc._tager.y - sc._showObject.y);
			sc.setSpeed();
			sc.setScrollY(textLayer.childHeight * s.selectIndex);
			LGlobal.stage.addChild(sc);
		} else {
			textLayer.x = coordinate.x;
			textLayer.y = coordinate.y + s.layer.getHeight();
			if (textLayer.y + textLayer.getHeight() > LGlobal.height) {
				textLayer.y = LGlobal.height - textLayer.getHeight();
			}
			LGlobal.stage.addChild(textLayer);
		}
		textLayer.addEventListener(LMouseEvent.MOUSE_MOVE, s._childSelecting);
		textLayer.addEventListener(LMouseEvent.MOUSE_UP, s._childSelected);
	};
	LComboBox.prototype._childSelecting = function (event) {
		var textLayer = event.currentTarget, i;
		i = event.selfY / textLayer.childHeight >>> 0;
		if (i >= textLayer.comboBox.list.length) {
			return;
		}
		textLayer.selectLayer.y = textLayer.childHeight * i;
	};
	LComboBox.prototype._childSelected = function (event) {
		var textLayer = event.currentTarget, i, v;
		i = event.selfY / textLayer.childHeight >>> 0;
		textLayer.comboBox.setValue(textLayer.comboBox.list[i].value);
		var cnt = LGlobal.stage.numChildren;
		LGlobal.stage.removeChildAt(cnt - 1);
		LGlobal.stage.removeChildAt(cnt - 2);
	};
	/** @language chinese
	 * 设置组合框的值。
	 * @method setValue
	 * @param {String} value 组合框的值。
	 * @since 0.1.0
	 * @public
	 */
	LComboBox.prototype.setValue = function (value, noEvent) {
		var s = this, c, i, l;
		if(s.value == value){
			return;
		}
		c = s.list;
		for (i = 0, l = c.length; i < l; i++) {
			if (c[i].value == value) {
				s.selectIndex = i;
				s.value = s.list[s.selectIndex].value;
				s.label.text = s.list[s.selectIndex].label;
				if (!noEvent) {
					s.dispatchEvent(LComboBox.ON_CHANGE);
				}
				break;
			}
		}
	};
	LComboBox.prototype.clone = function () {
		var s = this, a = new LComboBox(), k, c;
		for (k in s.list) {
			c = s.list[k];
			a.setChild({label : c.label, value : c.value});
		}	
		a.setValue(s.value);
		return a;
	};
	return LComboBox;
})();