console
cola.defineWidget(cola.AbstractEditor, {
tagName: "c-number",
attributes: {
min: null, max: null
},
template: {
tagName: "div", class: "ui number",
content: [
{
tagName: "i", class: "prev icon angle left",
"c-onclick": "_change($dom)"
},
{
tagName: "span", "c-bind": "@bind", class: "number"
},
{
tagName: "i", class: "next icon angle right",
"c-onclick": "_change($dom,true)"
}
]
},
_refreshDom: function () {
var min = this._min, max = this._max,
value = this._value, dom = this._dom;
var pNum = value - 1, nNum = value + 1;
$(dom).find(".prev").toggleClass("disable", !!(min && pNum < min ));
$(dom).find(".next").toggleClass("disable", !!(max && nNum > max));
},
_change: function (dom, plus) {
if ($(dom).hasClass("disable")) {
return
}
var value = this._value;
this.set("value", plus ? ++value : --value);
}
});
cola(function (model) {
model.action({
vChange: function (self, arg) {
console.log(self.get("value"))
}
});
model.set({num: 5,min:1,max:10});
});
<c-number bind="num" max="{{max}}" min="{{min}}" change="vChange"></c-number>
.ui.number {
background-color: #e6e6e6;
line-height: 1.5em;
font-size: 80px;
display: inline-block;
}
.ui.number i, .ui.number span {
line-height: 1.5em;
}
.ui.number i {
margin: 0 !important;
}
.ui.number i.disable {
opacity: 0.2;
}