如何定义一个组件

在FineUI开发指南中已经介绍过了怎么创建一个FineUI组件,获取组件实例,监听和发送事件.这里我们针对插件开发进行更灵活的定义. 这里我们以一个简单的日期选择控件为例,引用了jquerui控件库.

创建一个日期选择框

首先在组件的render方法中将一段文本和一个输入框插入组件中,然后在组件挂载到dom上之后调用jqueryui的.datepicker方法使之成为一个日期选择框.

    // 用Jquery创建一个日期选择框
    var Datepicker = BI.inherit(BI.Widget, {
        props: {
            baseCls: "plugin-date-picker",
            text: ""  // 提供一个text参数来自定义日期选择框前的文字
        },

        mounted: function () {
            $("#datepicker").datepicker();
        },

        render: function () {
            var datePicker = $("<p>" + this.options.text + "：<input type=\"text\" id=\"datepicker\"></p>");
            this.element.append(datePicker);
        }
    });
    BI.shortcut("dec.plugin.datepicker", Datepicker);

定义并触发事件

根据jqueryui的api,在日期选择框的onClese回调中向外发送名为"EVENT_SELECT"的事件.携带参数为选择值

 // 用Jquery创建一个日期选择框
    var Datepicker = BI.inherit(BI.Widget, {
        props: {
            baseCls: "plugin-date-picker",
            text: ""
        },

        mounted: function () {
            var self = this;
            $("#datepicker").datepicker({
                onClose: function (selectedDate) {
                    self.fireEvent(Datepicker.EVENT_SELECT, selectedDate);
                }
            });
        },

        render: function () {
            var datePicker = $("<p>" + this.options.text + "：<input type=\"text\" id=\"datepicker\"></p>");
            this.element.append(datePicker);
        }
    });

    Datepicker.EVENT_SELECT = "EVENT_SELECT";
    BI.shortcut("dec.plugin.datepicker", Datepicker);

好了,组件可以拿去用了

这里使用了bi.vertical布局容纳了我们自定义日期选择框和FineUI中基础控件bi.label.通过监听日期选择框的事件动态的为label赋值.

    var DatepickerDemo = BI.inherit(BI.Widget, {

        render: function () {
            var self = this;
            return {
                type: "bi.vertical",  // 使用垂直方向布局
                items: [
                    {
                        type: "dec.plugin.datepicker", // 日期选择控件
                        text: "选择日期",
                        listeners: [
                            {
                                eventName: "EVENT_SELECT",  // 监听事件,并将选择的日期设置到label上
                                action: function (selectedDate) {
                                    self.label.setValue(selectedDate);
                                }
                            }
                        ]
                    }, {
                        type: "bi.label",  // 一个label组件,以ref的方式获取组件实例.
                        ref: function (_ref) {
                            self.label = _ref;
                        },
                        text: "日期将在这里显示",
                        height: 24
                    }
                ]
            };
        }
    });
    BI.shortcut("dec.plugin.datepicker_demo", DatepickerDemo);

3.5 KiB Raw Permalink Blame History

如何定义一个组件

创建一个日期选择框

定义并触发事件

好了,组件可以拿去用了

最终效果预览

3.5 KiB

Raw Permalink Blame History