Giter Club home page Giter Club logo

tui's Introduction

tui.js

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)

tui's People

Contributors

thorqin avatar

Stargazers

夏洪英 avatar

Watchers

夏洪英 avatar  avatar

Forkers

xhy008

tui's Issues

页签控件的active事件

页签控件的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("id").value()的疑问

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。

关于tui.ctrl.input[type=file]控件的一些疑问

下面是我写的上传方法。其中有文件类型、文件大小错误的检查:
2015-11-13_182316

问题一:当在IE9下,以下代码发生异常,而firefox下正常。推测其它IE版本可能也有同样的问题;
2015-11-13_154750

问题二:后台检查失败后,我想显示自己返回的异常消息,但目前file控件中只显示自己的消息。
2015-11-13_182218

以上两个问题,希望可以给些建议,谢谢。

两个Grid中的scrollbar联动问题

目前我有两个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);
    });

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.