forked from fanruan/fineui
guy
8 years ago
4 changed files with 306 additions and 309 deletions
@ -1,224 +1,222 @@ |
|||||||
/** |
/** |
||||||
* Created by GUY on 2017/2/8. |
* Created by GUY on 2017/2/8. |
||||||
* |
* |
||||||
* @class BI.BubbleCombo |
* @class BI.BubbleCombo |
||||||
* @extends BI.Widget |
* @extends BI.Widget |
||||||
*/ |
*/ |
||||||
BI.BubbleCombo = BI.inherit(BI.Widget, { |
BI.BubbleCombo = BI.inherit(BI.Widget, { |
||||||
_const: { |
_const: { |
||||||
TRIANGLE_LENGTH: 6 |
TRIANGLE_LENGTH: 6 |
||||||
}, |
}, |
||||||
_defaultConfig: function () { |
_defaultConfig: function () { |
||||||
return BI.extend(BI.BubbleCombo.superclass._defaultConfig.apply(this, arguments), { |
return BI.extend(BI.BubbleCombo.superclass._defaultConfig.apply(this, arguments), { |
||||||
baseCls: "bi-bubble-combo", |
baseCls: "bi-bubble-combo", |
||||||
trigger: "click", |
trigger: "click", |
||||||
toggle: true, |
toggle: true, |
||||||
direction: "bottom", //top||bottom||left||right||top,left||top,right||bottom,left||bottom,right
|
direction: "bottom", //top||bottom||left||right||top,left||top,right||bottom,left||bottom,right
|
||||||
isDefaultInit: false, |
isDefaultInit: false, |
||||||
destroyWhenHide: false, |
destroyWhenHide: false, |
||||||
isNeedAdjustHeight: true,//是否需要高度调整
|
isNeedAdjustHeight: true,//是否需要高度调整
|
||||||
isNeedAdjustWidth: true, |
isNeedAdjustWidth: true, |
||||||
stopPropagation: false, |
stopPropagation: false, |
||||||
adjustLength: 0,//调整的距离
|
adjustLength: 0,//调整的距离
|
||||||
// adjustXOffset: 0,
|
// adjustXOffset: 0,
|
||||||
// adjustYOffset: 10,
|
// adjustYOffset: 10,
|
||||||
hideChecker: BI.emptyFn, |
hideChecker: BI.emptyFn, |
||||||
offsetStyle: "left", //left,right,center
|
offsetStyle: "left", //left,right,center
|
||||||
el: {}, |
el: {}, |
||||||
popup: {}, |
popup: {}, |
||||||
}) |
}) |
||||||
}, |
}, |
||||||
_init: function () { |
_init: function () { |
||||||
BI.BubbleCombo.superclass._init.apply(this, arguments); |
BI.BubbleCombo.superclass._init.apply(this, arguments); |
||||||
var self = this, o = this.options; |
var self = this, o = this.options; |
||||||
this.combo = BI.createWidget({ |
this.combo = BI.createWidget({ |
||||||
type: "bi.combo", |
type: "bi.combo", |
||||||
element: this, |
element: this, |
||||||
trigger: o.trigger, |
trigger: o.trigger, |
||||||
toggle: o.toggle, |
toggle: o.toggle, |
||||||
direction: o.direction, |
direction: o.direction, |
||||||
isDefaultInit: o.isDefaultInit, |
isDefaultInit: o.isDefaultInit, |
||||||
destroyWhenHide: o.destroyWhenHide, |
destroyWhenHide: o.destroyWhenHide, |
||||||
isNeedAdjustHeight: o.isNeedAdjustHeight, |
isNeedAdjustHeight: o.isNeedAdjustHeight, |
||||||
isNeedAdjustWidth: o.isNeedAdjustWidth, |
isNeedAdjustWidth: o.isNeedAdjustWidth, |
||||||
adjustLength: this._getAdjustLength(), |
adjustLength: this._getAdjustLength(), |
||||||
stopPropagation: o.stopPropagation, |
stopPropagation: o.stopPropagation, |
||||||
adjustXOffset: 0, |
adjustXOffset: 0, |
||||||
adjustYOffset: 0, |
adjustYOffset: 0, |
||||||
hideChecker: o.hideChecker, |
hideChecker: o.hideChecker, |
||||||
offsetStyle: o.offsetStyle, |
offsetStyle: o.offsetStyle, |
||||||
el: o.el, |
el: o.el, |
||||||
popup: BI.extend({ |
popup: BI.extend({ |
||||||
type: "bi.bubble_popup_view" |
type: "bi.bubble_popup_view" |
||||||
}, o.popup), |
}, o.popup), |
||||||
}); |
}); |
||||||
this.combo.on(BI.Combo.EVENT_TRIGGER_CHANGE, function () { |
this.combo.on(BI.Combo.EVENT_TRIGGER_CHANGE, function () { |
||||||
self.fireEvent(BI.BubbleCombo.EVENT_TRIGGER_CHANGE, arguments); |
self.fireEvent(BI.BubbleCombo.EVENT_TRIGGER_CHANGE, arguments); |
||||||
}); |
}); |
||||||
this.combo.on(BI.Combo.EVENT_CHANGE, function () { |
this.combo.on(BI.Combo.EVENT_CHANGE, function () { |
||||||
self.fireEvent(BI.BubbleCombo.EVENT_CHANGE, arguments); |
self.fireEvent(BI.BubbleCombo.EVENT_CHANGE, arguments); |
||||||
}); |
}); |
||||||
this.combo.on(BI.Combo.EVENT_EXPAND, function () { |
this.combo.on(BI.Combo.EVENT_EXPAND, function () { |
||||||
self.fireEvent(BI.BubbleCombo.EVENT_EXPAND, arguments); |
self.fireEvent(BI.BubbleCombo.EVENT_EXPAND, arguments); |
||||||
}); |
}); |
||||||
this.combo.on(BI.Combo.EVENT_COLLAPSE, function () { |
this.combo.on(BI.Combo.EVENT_COLLAPSE, function () { |
||||||
self.fireEvent(BI.BubbleCombo.EVENT_COLLAPSE, arguments); |
self.fireEvent(BI.BubbleCombo.EVENT_COLLAPSE, arguments); |
||||||
}); |
}); |
||||||
this.combo.on(BI.Combo.EVENT_AFTER_INIT, function () { |
this.combo.on(BI.Combo.EVENT_AFTER_INIT, function () { |
||||||
self.fireEvent(BI.BubbleCombo.EVENT_AFTER_INIT, arguments); |
self.fireEvent(BI.BubbleCombo.EVENT_AFTER_INIT, arguments); |
||||||
}); |
}); |
||||||
this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { |
this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { |
||||||
self.fireEvent(BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW, arguments); |
self.fireEvent(BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW, arguments); |
||||||
}); |
}); |
||||||
this.combo.on(BI.Combo.EVENT_AFTER_POPUPVIEW, function () { |
this.combo.on(BI.Combo.EVENT_AFTER_POPUPVIEW, function () { |
||||||
self._showTriangle(); |
self._showTriangle(); |
||||||
self.fireEvent(BI.BubbleCombo.EVENT_AFTER_POPUPVIEW, arguments); |
self.fireEvent(BI.BubbleCombo.EVENT_AFTER_POPUPVIEW, arguments); |
||||||
}); |
}); |
||||||
this.combo.on(BI.Combo.EVENT_BEFORE_HIDEVIEW, function () { |
this.combo.on(BI.Combo.EVENT_BEFORE_HIDEVIEW, function () { |
||||||
self._hideTriangle(); |
self._hideTriangle(); |
||||||
self.fireEvent(BI.BubbleCombo.EVENT_BEFORE_HIDEVIEW, arguments); |
self.fireEvent(BI.BubbleCombo.EVENT_BEFORE_HIDEVIEW, arguments); |
||||||
}); |
}); |
||||||
this.combo.on(BI.Combo.EVENT_AFTER_HIDEVIEW, function () { |
this.combo.on(BI.Combo.EVENT_AFTER_HIDEVIEW, function () { |
||||||
self.fireEvent(BI.BubbleCombo.EVENT_AFTER_HIDEVIEW, arguments); |
self.fireEvent(BI.BubbleCombo.EVENT_AFTER_HIDEVIEW, arguments); |
||||||
}); |
}); |
||||||
}, |
}, |
||||||
|
|
||||||
_getAdjustLength: function () { |
_getAdjustLength: function () { |
||||||
return this._const.TRIANGLE_LENGTH + this.options.adjustLength; |
return this._const.TRIANGLE_LENGTH + this.options.adjustLength; |
||||||
}, |
}, |
||||||
|
|
||||||
_createTriangle: function (direction) { |
_createTriangle: function (direction) { |
||||||
var pos = {}, op = {}; |
var pos = {}, op = {}; |
||||||
var adjustLength = this.options.adjustLength; |
var adjustLength = this.options.adjustLength; |
||||||
var offset = this.element.offset(); |
var offset = this.element.offset(); |
||||||
var left = offset.left, right = offset.left + this.element.outerWidth(); |
var left = offset.left, right = offset.left + this.element.outerWidth(); |
||||||
var top = offset.top, bottom = offset.top + this.element.outerHeight(); |
var top = offset.top, bottom = offset.top + this.element.outerHeight(); |
||||||
switch (direction) { |
switch (direction) { |
||||||
case "left": |
case "left": |
||||||
pos = { |
pos = { |
||||||
top: top, |
top: top, |
||||||
height: this.element.outerHeight(), |
height: this.element.outerHeight(), |
||||||
left: left - adjustLength - this._const.TRIANGLE_LENGTH |
left: left - adjustLength - this._const.TRIANGLE_LENGTH |
||||||
}; |
}; |
||||||
op = {width: this._const.TRIANGLE_LENGTH}; |
op = {width: this._const.TRIANGLE_LENGTH}; |
||||||
break; |
break; |
||||||
case "right": |
case "right": |
||||||
pos = { |
pos = { |
||||||
top: top, |
top: top, |
||||||
height: this.element.outerHeight(), |
height: this.element.outerHeight(), |
||||||
left: right + adjustLength |
left: right + adjustLength |
||||||
}; |
}; |
||||||
op = {width: this._const.TRIANGLE_LENGTH}; |
op = {width: this._const.TRIANGLE_LENGTH}; |
||||||
break; |
break; |
||||||
case "top": |
case "top": |
||||||
pos = { |
pos = { |
||||||
left: left, |
left: left, |
||||||
width: this.element.outerWidth(), |
width: this.element.outerWidth(), |
||||||
top: top - adjustLength - this._const.TRIANGLE_LENGTH |
top: top - adjustLength - this._const.TRIANGLE_LENGTH |
||||||
}; |
}; |
||||||
op = {height: this._const.TRIANGLE_LENGTH}; |
op = {height: this._const.TRIANGLE_LENGTH}; |
||||||
break; |
break; |
||||||
case "bottom": |
case "bottom": |
||||||
pos = { |
pos = { |
||||||
left: left, |
left: left, |
||||||
width: this.element.outerWidth(), |
width: this.element.outerWidth(), |
||||||
top: bottom + adjustLength |
top: bottom + adjustLength |
||||||
}; |
}; |
||||||
op = {height: this._const.TRIANGLE_LENGTH}; |
op = {height: this._const.TRIANGLE_LENGTH}; |
||||||
break; |
break; |
||||||
default: |
default: |
||||||
break; |
break; |
||||||
} |
} |
||||||
this.triangle = BI.createWidget(op, { |
this.triangle && this.triangle.destroy(); |
||||||
type: "bi.center_adapt", |
this.triangle = BI.createWidget(op, { |
||||||
cls: "button-combo-triangle-wrapper", |
type: "bi.center_adapt", |
||||||
items: [{ |
cls: "button-combo-triangle-wrapper", |
||||||
type: "bi.layout", |
items: [{ |
||||||
cls: "bubble-combo-triangle-" + direction + " bi-high-light-border" |
type: "bi.layout", |
||||||
}] |
cls: "bubble-combo-triangle-" + direction + " bi-high-light-border" |
||||||
}); |
}] |
||||||
pos.el = this.triangle; |
}); |
||||||
BI.createWidget({ |
pos.el = this.triangle; |
||||||
type: "bi.absolute", |
BI.createWidget({ |
||||||
element: this, |
type: "bi.absolute", |
||||||
items: [pos] |
element: this, |
||||||
}) |
items: [pos] |
||||||
}, |
}) |
||||||
|
}, |
||||||
_createLeftTriangle: function () { |
|
||||||
this._createTriangle("left"); |
_createLeftTriangle: function () { |
||||||
}, |
this._createTriangle("left"); |
||||||
|
}, |
||||||
_createRightTriangle: function () { |
|
||||||
this._createTriangle("right"); |
_createRightTriangle: function () { |
||||||
}, |
this._createTriangle("right"); |
||||||
|
}, |
||||||
_createTopTriangle: function () { |
|
||||||
this._createTriangle("top"); |
_createTopTriangle: function () { |
||||||
}, |
this._createTriangle("top"); |
||||||
|
}, |
||||||
_createBottomTriangle: function () { |
|
||||||
this._createTriangle("bottom"); |
_createBottomTriangle: function () { |
||||||
}, |
this._createTriangle("bottom"); |
||||||
|
}, |
||||||
_showTriangle: function () { |
|
||||||
var pos = this.combo.getPopupPosition(); |
_showTriangle: function () { |
||||||
switch (pos.dir) { |
var pos = this.combo.getPopupPosition(); |
||||||
case "left,top": |
switch (pos.dir) { |
||||||
case "left,bottom": |
case "left,top": |
||||||
this._createLeftTriangle(); |
case "left,bottom": |
||||||
this.combo.getView().showLine("right"); |
this._createLeftTriangle(); |
||||||
break; |
this.combo.getView().showLine("right"); |
||||||
case "right,top": |
break; |
||||||
case "right,bottom": |
case "right,top": |
||||||
this._createRightTriangle(); |
case "right,bottom": |
||||||
this.combo.getView().showLine("left"); |
this._createRightTriangle(); |
||||||
break; |
this.combo.getView().showLine("left"); |
||||||
case "top,left": |
break; |
||||||
case "top,right": |
case "top,left": |
||||||
this._createTopTriangle(); |
case "top,right": |
||||||
this.combo.getView().showLine("bottom"); |
this._createTopTriangle(); |
||||||
break; |
this.combo.getView().showLine("bottom"); |
||||||
case "bottom,left": |
break; |
||||||
case "bottom,right": |
case "bottom,left": |
||||||
this._createBottomTriangle(); |
case "bottom,right": |
||||||
this.combo.getView().showLine("top"); |
this._createBottomTriangle(); |
||||||
break; |
this.combo.getView().showLine("top"); |
||||||
} |
break; |
||||||
}, |
} |
||||||
|
}, |
||||||
_hideTriangle: function () { |
|
||||||
this.triangle && this.triangle.destroy(); |
_hideTriangle: function () { |
||||||
this.combo.getView() && this.combo.getView().hideLine(); |
this.triangle && this.triangle.destroy(); |
||||||
}, |
this.triangle = null; |
||||||
|
this.combo.getView() && this.combo.getView().hideLine(); |
||||||
hideView: function () { |
}, |
||||||
this._hideTriangle(); |
|
||||||
this.combo && this.combo.hideView(); |
hideView: function () { |
||||||
}, |
this._hideTriangle(); |
||||||
|
this.combo && this.combo.hideView(); |
||||||
showView: function () { |
}, |
||||||
this.combo && this.combo.showView(); |
|
||||||
}, |
showView: function () { |
||||||
|
this.combo && this.combo.showView(); |
||||||
hasView: function () { |
}, |
||||||
return BI.isNotNull(this.combo.getView()); |
|
||||||
}, |
isViewVisible: function () { |
||||||
|
return this.combo.isViewVisible(); |
||||||
isViewVisible: function () { |
} |
||||||
return this.combo.isViewVisible(); |
}); |
||||||
} |
|
||||||
}); |
BI.BubbleCombo.EVENT_TRIGGER_CHANGE = "EVENT_TRIGGER_CHANGE"; |
||||||
|
BI.BubbleCombo.EVENT_CHANGE = "EVENT_CHANGE"; |
||||||
BI.BubbleCombo.EVENT_TRIGGER_CHANGE = "EVENT_TRIGGER_CHANGE"; |
BI.BubbleCombo.EVENT_EXPAND = "EVENT_EXPAND"; |
||||||
BI.BubbleCombo.EVENT_CHANGE = "EVENT_CHANGE"; |
BI.BubbleCombo.EVENT_COLLAPSE = "EVENT_COLLAPSE"; |
||||||
BI.BubbleCombo.EVENT_EXPAND = "EVENT_EXPAND"; |
BI.BubbleCombo.EVENT_AFTER_INIT = "EVENT_AFTER_INIT"; |
||||||
BI.BubbleCombo.EVENT_COLLAPSE = "EVENT_COLLAPSE"; |
|
||||||
BI.BubbleCombo.EVENT_AFTER_INIT = "EVENT_AFTER_INIT"; |
|
||||||
|
BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; |
||||||
|
BI.BubbleCombo.EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW"; |
||||||
BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; |
BI.BubbleCombo.EVENT_BEFORE_HIDEVIEW = "EVENT_BEFORE_HIDEVIEW"; |
||||||
BI.BubbleCombo.EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW"; |
BI.BubbleCombo.EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW"; |
||||||
BI.BubbleCombo.EVENT_BEFORE_HIDEVIEW = "EVENT_BEFORE_HIDEVIEW"; |
|
||||||
BI.BubbleCombo.EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW"; |
|
||||||
BI.shortcut("bi.bubble_combo", BI.BubbleCombo); |
BI.shortcut("bi.bubble_combo", BI.BubbleCombo); |
@ -1,79 +1,80 @@ |
|||||||
/** |
/** |
||||||
* 文本输入框trigger |
* 文本输入框trigger |
||||||
* |
* |
||||||
* Created by GUY on 2015/9/15. |
* Created by GUY on 2015/9/15. |
||||||
* @class BI.EditorTrigger |
* @class BI.EditorTrigger |
||||||
* @extends BI.Trigger |
* @extends BI.Trigger |
||||||
*/ |
*/ |
||||||
BI.EditorTrigger = BI.inherit(BI.Trigger, { |
BI.EditorTrigger = BI.inherit(BI.Trigger, { |
||||||
_const: { |
_const: { |
||||||
hgap: 4 |
hgap: 4 |
||||||
}, |
}, |
||||||
|
|
||||||
_defaultConfig: function () { |
_defaultConfig: function () { |
||||||
var conf = BI.EditorTrigger.superclass._defaultConfig.apply(this, arguments); |
var conf = BI.EditorTrigger.superclass._defaultConfig.apply(this, arguments); |
||||||
return BI.extend(conf, { |
return BI.extend(conf, { |
||||||
baseCls: (conf.baseCls || "") + " bi-editor-trigger bi-border", |
baseCls: (conf.baseCls || "") + " bi-editor-trigger bi-border", |
||||||
height: 30, |
height: 30, |
||||||
validationChecker: BI.emptyFn, |
validationChecker: BI.emptyFn, |
||||||
quitChecker: BI.emptyFn, |
quitChecker: BI.emptyFn, |
||||||
allowBlank: false, |
allowBlank: false, |
||||||
watermark: "", |
watermark: "", |
||||||
errorText: "", |
errorText: "", |
||||||
triggerWidth: 30 |
triggerWidth: 30 |
||||||
}); |
}); |
||||||
}, |
}, |
||||||
|
|
||||||
_init: function () { |
_init: function () { |
||||||
this.options.height -= 2; |
this.options.height -= 2; |
||||||
BI.EditorTrigger.superclass._init.apply(this, arguments); |
BI.EditorTrigger.superclass._init.apply(this, arguments); |
||||||
var self = this, o = this.options, c = this._const; |
var self = this, o = this.options, c = this._const; |
||||||
this.editor = BI.createWidget({ |
this.editor = BI.createWidget({ |
||||||
type: "bi.sign_editor", |
type: "bi.sign_editor", |
||||||
height: o.height, |
height: o.height, |
||||||
value: o.value, |
value: o.value, |
||||||
validationChecker: o.validationChecker, |
validationChecker: o.validationChecker, |
||||||
quitChecker: o.quitChecker, |
quitChecker: o.quitChecker, |
||||||
mouseOut: false, |
mouseOut: false, |
||||||
allowBlank: o.allowBlank, |
allowBlank: o.allowBlank, |
||||||
watermark: o.watermark, |
watermark: o.watermark, |
||||||
errorText: o.errorText |
errorText: o.errorText |
||||||
}); |
}); |
||||||
this.editor.on(BI.Controller.EVENT_CHANGE, function () { |
this.editor.on(BI.Controller.EVENT_CHANGE, function () { |
||||||
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
||||||
}); |
}); |
||||||
this.editor.on(BI.SignEditor.EVENT_CHANGE, function () { |
this.editor.on(BI.SignEditor.EVENT_CHANGE, function () { |
||||||
self.fireEvent(BI.EditorTrigger.EVENT_CHANGE, arguments); |
self.fireEvent(BI.EditorTrigger.EVENT_CHANGE, arguments); |
||||||
}); |
}); |
||||||
|
|
||||||
BI.createWidget({ |
BI.createWidget({ |
||||||
element: this, |
element: this, |
||||||
type: 'bi.htape', |
type: 'bi.htape', |
||||||
items: [ |
items: [ |
||||||
{ |
{ |
||||||
el: this.editor |
el: this.editor |
||||||
}, { |
}, { |
||||||
el: { |
el: { |
||||||
type: "bi.trigger_icon_button", |
type: "bi.trigger_icon_button", |
||||||
width: o.triggerWidth |
cls: "bi-border-left", |
||||||
}, |
width: o.triggerWidth |
||||||
width: o.triggerWidth |
}, |
||||||
} |
width: o.triggerWidth |
||||||
] |
} |
||||||
}); |
] |
||||||
}, |
}); |
||||||
|
}, |
||||||
getValue: function () { |
|
||||||
return this.editor.getValue(); |
getValue: function () { |
||||||
}, |
return this.editor.getValue(); |
||||||
|
}, |
||||||
setValue: function (value) { |
|
||||||
this.editor.setValue(value); |
setValue: function (value) { |
||||||
}, |
this.editor.setValue(value); |
||||||
|
}, |
||||||
setText: function (text) { |
|
||||||
this.editor.setState(text); |
setText: function (text) { |
||||||
} |
this.editor.setState(text); |
||||||
}); |
} |
||||||
BI.EditorTrigger.EVENT_CHANGE = "BI.EditorTrigger.EVENT_CHANGE"; |
}); |
||||||
|
BI.EditorTrigger.EVENT_CHANGE = "BI.EditorTrigger.EVENT_CHANGE"; |
||||||
BI.shortcut("bi.editor_trigger", BI.EditorTrigger); |
BI.shortcut("bi.editor_trigger", BI.EditorTrigger); |
Loading…
Reference in new issue