A Javascript web UI framework, beautiful, extensible and easy to use.
To see on-line document please visit web site: https://tui-thorqin.rhcloud.com (Chinese simplified)
A Javascript web UI framework, beautiful, extensible and easy to use.
License: MIT License
A Javascript web UI framework, beautiful, extensible and easy to use.
To see on-line document please visit web site: https://tui-thorqin.rhcloud.com (Chinese simplified)
页签控件的active事件,由于代码中的写法,会造成切换tab时,事件触发多次。
tui.ctrl.tab.ts中第35行中的部分代码:
private checkPage(button: any) {
var tabId = button.attr("data-tab");
tabId = "#" + tabId;
if (button.checked()) {
$(tabId).removeClass("tui-hidden");
tui.ctrl.initCtrls($(tabId)[0]);
} else {
$(tabId).addClass("tui-hidden");
}
this.fire("active", {index: this._buttons.indexOf(button), text: button.text()});
}
按我的理解,active事件的触发是不是应该改成下面的样子:
private checkPage(button: any) {
var tabId = button.attr("data-tab");
tabId = "#" + tabId;
if (button.checked()) {
$(tabId).removeClass("tui-hidden");
tui.ctrl.initCtrls($(tabId)[0]);
this.fire("active", {index: this._buttons.indexOf(button), text: button.text()});
} else {
$(tabId).addClass("tui-hidden");
}
}
只有被选中的那个tab页才激活事件,否则所有的tab页都会触发此事件。
如果是我的理解有误,请问我该如何正确使用active事件呢?谢谢。
tui.ctrl.checkbox.ts中的如下代码:
value(): any;
value(val?: any): Checkbox;
value(val?: any): any {
if (typeof val !== tui.undef) {
this.attr("data-value", JSON.stringify(val));
return this;
} else {
val = this.attr("data-value");
if (val === null) {
return null;
} else {
try {
return eval("(" + val + ")");
} catch (err) {
return null;
}
}
}
}
为什么不直接返回val变量,而是要返回“eval("(" + val + ")")”呢?这种情况下我没有办法正常取得设定好的data-value。
目前我有两个grid,想通过scrollbar实现两个grid联动(上下排列,共用同一个header),所以使用动了scrollbar.scroll事件,一个scrollbar变更了,则设置另一个scrollbar.value。但由于value方法中没有fire scroll事件,所以另一个grid并没有一同移动。
我目前的变通方法是在value方法中fire scroll事件。请帮忙看看是不是有问题,或者提供下其它实现方式,谢谢。
tui.ctrl.scrollbar.ts 现有代码:
value(val?: number): any {
if (typeof val === "number") {
val = Math.round(val);
if (val < 0)
val = 0;
if (val > this.total())
val = this.total();
this.attr("data-value", val);
this.refresh();
return this;
} else {
var val = parseInt(this.attr("data-value"), 10);
if (val === null || isNaN(val))
return 0;
else
return val;
}
}
修改后的代码:
value(val?: number): any {
if (typeof val === "number") {
val = Math.round(val);
if (val < 0)
val = 0;
if (val > this.total())
val = this.total();
var needFireScroll = false;
if (val != this.attr("data-value")) {
needFireScroll = true;
}
this.attr("data-value", val);
this.refresh();
if (needFireScroll) {
this.fire("scroll", { value: val, type: "valueChange" });
}
return this;
} else {
var val = parseInt(this.attr("data-value"), 10);
if (val === null || isNaN(val))
return 0;
else
return val;
}
}
两个Grid联动的代码:
var scrollbar1 = tui.ctrl.scrollbar($("#grid1 .tui-scrollbar[data-direction='horizontal']")[0]);
var scrollbar2 = tui.ctrl.scrollbar($("#grid2 .tui-scrollbar[data-direction='horizontal']")[0]);
scrollbar1.on("scroll", function(args) {
scrollbar2.value(args.value);
});
scrollbar2.on("scroll", function(args) {
scrollbar1.value(args.value);
});
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.