forked from fanruan/fineui
Browse Source
# Conflicts: # dist/bundle.ie.min.js # dist/bundle.min.js # dist/fineui.ie.min.js # dist/fineui.min.jsmaster
13 changed files with 4184 additions and 93 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,111 @@
|
||||
/** |
||||
* guy 表示一行数据，通过position来定位位置的数据 |
||||
* @class BI.Html |
||||
* @extends BI.Single |
||||
*/ |
||||
BI.Html = BI.inherit(BI.Single, { |
||||
_defaultConfig: function () { |
||||
var conf = BI.Html.superclass._defaultConfig.apply(this, arguments); |
||||
return BI.extend(conf, { |
||||
baseCls: (conf.baseCls || "") + " bi-text", |
||||
textAlign: "left", |
||||
whiteSpace: "normal", |
||||
lineHeight: null, |
||||
handler: null, // 如果传入handler,表示处理文字的点击事件，不是区域的
|
||||
hgap: 0, |
||||
vgap: 0, |
||||
lgap: 0, |
||||
rgap: 0, |
||||
tgap: 0, |
||||
bgap: 0, |
||||
text: "" |
||||
}); |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this, o = this.options; |
||||
if (o.hgap + o.lgap > 0) { |
||||
this.element.css({ |
||||
"padding-left": o.hgap + o.lgap + "px" |
||||
}); |
||||
} |
||||
if (o.hgap + o.rgap > 0) { |
||||
this.element.css({ |
||||
"padding-right": o.hgap + o.rgap + "px" |
||||
}); |
||||
} |
||||
if (o.vgap + o.tgap > 0) { |
||||
this.element.css({ |
||||
"padding-top": o.vgap + o.tgap + "px" |
||||
}); |
||||
} |
||||
if (o.vgap + o.bgap > 0) { |
||||
this.element.css({ |
||||
"padding-bottom": o.vgap + o.bgap + "px" |
||||
}); |
||||
} |
||||
if (BI.isNumber(o.height)) { |
||||
this.element.css({lineHeight: o.height + "px"}); |
||||
} |
||||
if (BI.isNumber(o.lineHeight)) { |
||||
this.element.css({lineHeight: o.lineHeight + "px"}); |
||||
} |
||||
this.element.css({ |
||||
textAlign: o.textAlign, |
||||
whiteSpace: o.whiteSpace |
||||
}); |
||||
if (o.handler) { |
||||
this.text = BI.createWidget({ |
||||
type: "bi.layout", |
||||
tagName: "span" |
||||
}); |
||||
this.text.element.click(function () { |
||||
o.handler(self.getValue()); |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.default", |
||||
element: this, |
||||
items: [this.text] |
||||
}); |
||||
} else { |
||||
this.text = this; |
||||
} |
||||
}, |
||||
|
||||
mounted: function () { |
||||
var o = this.options; |
||||
|
||||
if (BI.isKey(o.text)) { |
||||
this.setText(o.text); |
||||
} else if (BI.isKey(o.value)) { |
||||
this.setText(o.value); |
||||
} |
||||
}, |
||||
|
||||
doHighLight: function () { |
||||
this.text.element.addClass("bi-high-light"); |
||||
}, |
||||
|
||||
unHighLight: function () { |
||||
this.text.element.removeClass("bi-high-light"); |
||||
}, |
||||
|
||||
setValue: function (text) { |
||||
BI.Html.superclass.setValue.apply(this, arguments); |
||||
if (!this.isReadOnly()) { |
||||
this.setText(text); |
||||
} |
||||
}, |
||||
|
||||
setStyle: function (css) { |
||||
this.text.element.css(css); |
||||
}, |
||||
|
||||
setText: function (text) { |
||||
BI.Html.superclass.setText.apply(this, arguments); |
||||
this.options.text = text; |
||||
this.text.element.html(text); |
||||
} |
||||
}); |
||||
|
||||
BI.shortcut("bi.html", BI.Html); |
||||
@ -0,0 +1,475 @@
|
||||
/** |
||||
* Created by GUY on 2015/6/26. |
||||
*/ |
||||
|
||||
BI.HtmlLabel = BI.inherit(BI.Single, { |
||||
_defaultConfig: function () { |
||||
var conf = BI.HtmlLabel.superclass._defaultConfig.apply(this, arguments); |
||||
return BI.extend(conf, { |
||||
baseCls: (conf.baseCls || "") + " bi-label", |
||||
textAlign: "center", |
||||
whiteSpace: "nowrap", // normal or nowrap
|
||||
forceCenter: false, // 是否无论如何都要居中, 不考虑超出边界的情况, 在未知宽度和高度时有效
|
||||
textWidth: null, |
||||
textHeight: null, |
||||
hgap: 0, |
||||
vgap: 0, |
||||
lgap: 0, |
||||
rgap: 0, |
||||
tgap: 0, |
||||
bgap: 0, |
||||
text: "" |
||||
}); |
||||
}, |
||||
|
||||
_createJson: function () { |
||||
var o = this.options; |
||||
return { |
||||
type: "bi.html", |
||||
textAlign: o.textAlign, |
||||
whiteSpace: o.whiteSpace, |
||||
lineHeight: o.textHeight, |
||||
text: o.text, |
||||
value: o.value |
||||
}; |
||||
}, |
||||
|
||||
_init: function () { |
||||
BI.HtmlLabel.superclass._init.apply(this, arguments); |
||||
|
||||
if (this.options.textAlign === "center") { |
||||
this._createCenterEl(); |
||||
} else { |
||||
this._createNotCenterEl(); |
||||
} |
||||
}, |
||||
|
||||
_createCenterEl: function () { |
||||
var o = this.options; |
||||
var json = this._createJson(); |
||||
if (BI.isNumber(o.width) && o.width > 0) { |
||||
if (BI.isNumber(o.textWidth) && o.textWidth > 0) { |
||||
if (BI.isNumber(o.height) && o.height > 0) { |
||||
var gap = (o.width - o.textWidth) / 2; |
||||
BI.createWidget({ |
||||
type: "bi.adaptive", |
||||
height: o.height, |
||||
scrollable: o.whiteSpace === "normal", |
||||
element: this, |
||||
items: [ |
||||
{ |
||||
el: (this.text = BI.createWidget(json)), |
||||
left: gap + o.hgap + o.lgap, |
||||
right: gap + o.hgap + o.rgap, |
||||
top: o.vgap + o.tgap, |
||||
bottom: o.vgap + o.bgap |
||||
} |
||||
] |
||||
}); |
||||
this.element.css({"line-height": o.height + "px"}); |
||||
return; |
||||
} |
||||
json.width = o.textWidth; |
||||
BI.createWidget({ |
||||
type: "bi.center_adapt", |
||||
scrollable: o.whiteSpace === "normal", |
||||
element: this, |
||||
items: [ |
||||
{ |
||||
el: (this.text = BI.createWidget(json)) |
||||
} |
||||
] |
||||
}); |
||||
return; |
||||
} |
||||
if (o.whiteSpace == "normal") { |
||||
this.text = BI.createWidget(json); |
||||
BI.createWidget({ |
||||
type: "bi.center_adapt", |
||||
scrollable: o.whiteSpace === "normal", |
||||
hgap: o.hgap, |
||||
vgap: o.vgap, |
||||
lgap: o.lgap, |
||||
rgap: o.rgap, |
||||
tgap: o.tgap, |
||||
bgap: o.bgap, |
||||
element: this, |
||||
items: [this.text] |
||||
}); |
||||
return; |
||||
} |
||||
if (BI.isNumber(o.height) && o.height > 0) { |
||||
this.element.css({ |
||||
"line-height": o.height + "px" |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
scrollable: o.whiteSpace === "normal", |
||||
element: this, |
||||
items: [{ |
||||
el: (this.text = BI.createWidget(json)), |
||||
left: o.hgap + o.lgap, |
||||
right: o.hgap + o.rgap, |
||||
top: o.vgap + o.tgap, |
||||
bottom: o.vgap + o.bgap |
||||
}] |
||||
}); |
||||
return; |
||||
} |
||||
json.width = o.width - 2 * o.hgap; |
||||
BI.createWidget({ |
||||
type: "bi.center_adapt", |
||||
scrollable: o.whiteSpace === "normal", |
||||
element: this, |
||||
items: [{ |
||||
el: (this.text = BI.createWidget(json)) |
||||
}] |
||||
}); |
||||
return; |
||||
} |
||||
if (BI.isNumber(o.textWidth) && o.textWidth > 0) { |
||||
json.width = o.textWidth; |
||||
BI.createWidget({ |
||||
type: "bi.center_adapt", |
||||
scrollable: o.whiteSpace === "normal", |
||||
element: this, |
||||
items: [ |
||||
{ |
||||
el: (this.text = BI.createWidget(json)) |
||||
} |
||||
] |
||||
}); |
||||
return; |
||||
} |
||||
if (o.whiteSpace == "normal") { |
||||
this.text = BI.createWidget(json); |
||||
BI.createWidget({ |
||||
type: "bi.center_adapt", |
||||
hgap: o.hgap, |
||||
vgap: o.vgap, |
||||
lgap: o.lgap, |
||||
rgap: o.rgap, |
||||
tgap: o.tgap, |
||||
bgap: o.bgap, |
||||
scrollable: o.whiteSpace === "normal", |
||||
element: this, |
||||
items: [this.text] |
||||
}); |
||||
return; |
||||
} |
||||
if (BI.isNumber(o.height) && o.height > 0) { |
||||
if (BI.isNumber(o.textHeight) && o.textHeight > 0) { |
||||
this.element.css({ |
||||
"line-height": o.height + "px" |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.adaptive", |
||||
height: o.height, |
||||
scrollable: o.whiteSpace === "normal", |
||||
element: this, |
||||
items: [{ |
||||
el: (this.text = BI.createWidget(json)), |
||||
left: o.hgap + o.lgap, |
||||
right: o.hgap + o.rgap, |
||||
top: o.vgap + o.tgap, |
||||
bottom: o.vgap + o.bgap |
||||
}] |
||||
}); |
||||
return; |
||||
} |
||||
BI.extend(json, { |
||||
hgap: o.hgap, |
||||
vgap: o.vgap, |
||||
lgap: o.lgap, |
||||
rgap: o.rgap, |
||||
tgap: o.tgap, |
||||
bgap: o.bgap |
||||
}); |
||||
this.element.css({ |
||||
"line-height": o.height + "px" |
||||
}); |
||||
this.text = BI.createWidget(BI.extend(json, { |
||||
element: this |
||||
})); |
||||
BI.createWidget({ |
||||
type: "bi.layout", |
||||
element: this.text, |
||||
scrollable: o.whiteSpace === "normal" |
||||
}); |
||||
return; |
||||
} |
||||
BI.extend(json, { |
||||
hgap: o.hgap, |
||||
vgap: o.vgap, |
||||
lgap: o.lgap, |
||||
rgap: o.rgap, |
||||
tgap: o.tgap, |
||||
bgap: o.bgap |
||||
}); |
||||
if (o.forceCenter) { |
||||
this.text = BI.createWidget(json); |
||||
BI.createWidget({ |
||||
type: "bi.center_adapt", |
||||
element: this, |
||||
items: [this.text] |
||||
}); |
||||
return; |
||||
} |
||||
this.text = BI.createWidget(BI.extend(json, { |
||||
element: this |
||||
})); |
||||
BI.createWidget({ |
||||
type: "bi.layout", |
||||
element: this.text, |
||||
scrollable: o.whiteSpace === "normal" |
||||
}); |
||||
}, |
||||
|
||||
_createNotCenterEl: function () { |
||||
var o = this.options; |
||||
var json = this._createJson(); |
||||
if (BI.isNumber(o.width) && o.width > 0) { |
||||
if (BI.isNumber(o.textWidth) && o.textWidth > 0) { |
||||
json.width = o.textWidth; |
||||
if (BI.isNumber(o.height) && o.height > 0) { |
||||
BI.createWidget({ |
||||
type: "bi.adaptive", |
||||
height: o.height, |
||||
scrollable: o.whiteSpace === "normal", |
||||
element: this, |
||||
items: [ |
||||
{ |
||||
el: (this.text = BI.createWidget(json)), |
||||
left: o.hgap + o.lgap, |
||||
right: o.hgap + o.rgap, |
||||
top: o.vgap + o.tgap, |
||||
bottom: o.vgap + o.bgap |
||||
} |
||||
] |
||||
}); |
||||
this.element.css({"line-height": o.height + "px"}); |
||||
return; |
||||
} |
||||
BI.createWidget({ |
||||
type: "bi.vertical_adapt", |
||||
scrollable: o.whiteSpace === "normal", |
||||
hgap: o.hgap, |
||||
vgap: o.vgap, |
||||
lgap: o.lgap, |
||||
rgap: o.rgap, |
||||
tgap: o.tgap, |
||||
bgap: o.bgap, |
||||
element: this, |
||||
items: [ |
||||
{ |
||||
el: (this.text = BI.createWidget(json)) |
||||
} |
||||
] |
||||
}); |
||||
o.textHeight && this.element.css({"line-height": o.textHeight + "px"}); |
||||
return; |
||||
} |
||||
if (o.whiteSpace == "normal") { |
||||
this.text = BI.createWidget(json); |
||||
BI.createWidget({ |
||||
type: "bi.vertical_adapt", |
||||
scrollable: o.whiteSpace === "normal", |
||||
hgap: o.hgap, |
||||
vgap: o.vgap, |
||||
lgap: o.lgap, |
||||
rgap: o.rgap, |
||||
tgap: o.tgap, |
||||
bgap: o.bgap, |
||||
element: this, |
||||
items: [this.text] |
||||
}); |
||||
o.textHeight && this.element.css({"line-height": o.textHeight + "px"}); |
||||
return; |
||||
} |
||||
if (BI.isNumber(o.height) && o.height > 0) { |
||||
this.element.css({ |
||||
"line-height": o.height + "px" |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
scrollable: o.whiteSpace === "normal", |
||||
element: this, |
||||
items: [{ |
||||
el: (this.text = BI.createWidget(json)), |
||||
left: o.hgap + o.lgap, |
||||
right: o.hgap + o.rgap, |
||||
top: o.vgap + o.tgap, |
||||
bottom: o.vgap + o.bgap |
||||
}] |
||||
}); |
||||
return; |
||||
} |
||||
json.width = o.width - 2 * o.hgap - o.lgap - o.rgap; |
||||
BI.createWidget({ |
||||
type: "bi.vertical_adapt", |
||||
scrollable: o.whiteSpace === "normal", |
||||
hgap: o.hgap, |
||||
vgap: o.vgap, |
||||
lgap: o.lgap, |
||||
rgap: o.rgap, |
||||
tgap: o.tgap, |
||||
bgap: o.bgap, |
||||
element: this, |
||||
items: [{ |
||||
el: (this.text = BI.createWidget(json)) |
||||
}] |
||||
}); |
||||
o.textHeight && this.element.css({"line-height": o.textHeight + "px"}); |
||||
return; |
||||
} |
||||
if (BI.isNumber(o.textWidth) && o.textWidth > 0) { |
||||
json.width = o.textWidth; |
||||
BI.createWidget({ |
||||
type: "bi.vertical_adapt", |
||||
scrollable: o.whiteSpace === "normal", |
||||
hgap: o.hgap, |
||||
vgap: o.vgap, |
||||
lgap: o.lgap, |
||||
rgap: o.rgap, |
||||
tgap: o.tgap, |
||||
bgap: o.bgap, |
||||
element: this, |
||||
items: [ |
||||
{ |
||||
el: (this.text = BI.createWidget(json)) |
||||
} |
||||
] |
||||
}); |
||||
o.textHeight && this.element.css({"line-height": o.textHeight + "px"}); |
||||
return; |
||||
} |
||||
if (o.whiteSpace == "normal") { |
||||
this.text = BI.createWidget(json); |
||||
BI.createWidget({ |
||||
type: "bi.vertical_adapt", |
||||
scrollable: o.whiteSpace === "normal", |
||||
hgap: o.hgap, |
||||
vgap: o.vgap, |
||||
lgap: o.lgap, |
||||
rgap: o.rgap, |
||||
tgap: o.tgap, |
||||
bgap: o.bgap, |
||||
element: this, |
||||
items: [this.text] |
||||
}); |
||||
// 父亲有line-height,而当前label是inline-block，那么他的行高一定是父亲的lineHeight,就算text上设置了line-height
|
||||
o.textHeight && this.element.css({"line-height": o.textHeight + "px"}); |
||||
return; |
||||
} |
||||
if (BI.isNumber(o.height) && o.height > 0) { |
||||
if (BI.isNumber(o.textHeight) && o.textHeight > 0) { |
||||
this.element.css({ |
||||
"line-height": o.height + "px" |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.adaptive", |
||||
height: o.height, |
||||
scrollable: o.whiteSpace === "normal", |
||||
element: this, |
||||
items: [{ |
||||
el: (this.text = BI.createWidget(json)), |
||||
left: o.hgap + o.lgap, |
||||
right: o.hgap + o.rgap, |
||||
top: o.vgap + o.tgap, |
||||
bottom: o.vgap + o.bgap |
||||
}] |
||||
}); |
||||
return; |
||||
} |
||||
BI.extend(json, { |
||||
hgap: o.hgap, |
||||
vgap: o.vgap, |
||||
lgap: o.lgap, |
||||
rgap: o.rgap, |
||||
tgap: o.tgap, |
||||
bgap: o.bgap |
||||
}); |
||||
this.element.css({ |
||||
"line-height": o.height + "px" |
||||
}); |
||||
this.text = BI.createWidget(BI.extend(json, { |
||||
element: this |
||||
})); |
||||
BI.createWidget({ |
||||
type: "bi.layout", |
||||
element: this.text, |
||||
scrollable: o.whiteSpace === "normal" |
||||
}); |
||||
return; |
||||
} |
||||
BI.extend(json, { |
||||
hgap: o.hgap, |
||||
vgap: o.vgap, |
||||
lgap: o.lgap, |
||||
rgap: o.rgap, |
||||
tgap: o.tgap, |
||||
bgap: o.bgap |
||||
}); |
||||
if (o.forceCenter) { |
||||
this.text = BI.createWidget(json); |
||||
BI.createWidget({ |
||||
type: "bi.vertical_adapt", |
||||
element: this, |
||||
items: [this.text] |
||||
}); |
||||
o.textHeight && this.element.css({"line-height": o.textHeight + "px"}); |
||||
return; |
||||
} |
||||
this.text = BI.createWidget(BI.extend(json, { |
||||
element: this |
||||
})); |
||||
BI.createWidget({ |
||||
type: "bi.layout", |
||||
element: this.text, |
||||
scrollable: o.whiteSpace === "normal" |
||||
}); |
||||
}, |
||||
|
||||
_setEnable: function (enable) { |
||||
BI.HtmlLabel.superclass._setEnable.apply(this, arguments); |
||||
if (enable === true) { |
||||
this.element.removeClass("base-disabled disabled"); |
||||
} else if (enable === false) { |
||||
this.element.addClass("base-disabled disabled"); |
||||
} |
||||
}, |
||||
|
||||
doHighLight: function () { |
||||
this.text.doHighLight.apply(this.text, arguments); |
||||
}, |
||||
|
||||
unHighLight: function () { |
||||
this.text.unHighLight.apply(this.text, arguments); |
||||
}, |
||||
|
||||
setText: function (v) { |
||||
this.options.text = v; |
||||
this.text.setText(v); |
||||
}, |
||||
|
||||
getText: function () { |
||||
return this.options.text; |
||||
}, |
||||
|
||||
setStyle: function (css) { |
||||
this.text.setStyle(css); |
||||
}, |
||||
|
||||
setValue: function (v) { |
||||
BI.HtmlLabel.superclass.setValue.apply(this, arguments); |
||||
if (!this.isReadOnly()) { |
||||
this.text.setValue(v); |
||||
} |
||||
}, |
||||
|
||||
populate: function () { |
||||
BI.HtmlLabel.superclass.populate.apply(this, arguments); |
||||
} |
||||
}); |
||||
|
||||
BI.shortcut("bi.html_label", BI.HtmlLabel); |
||||
Loading…
Reference in new issue