使用快站UI交互组件

快站UI交互组件是对快站中通用UI交互元素的封装。

设计思想

• 每个交互组件都有一个唯一的命名，比如select，slider，tab等;

• 每个交互组件以单独require JS AMD模块实现;

• 所有交互组件都统一附到ui命名空间下，使用全称ui.<模块名>调用，例如ui.select, ui.tab等；

• 每个交互组件都至少有两个接口：create 和 init。create接口用于动态创建交互组件的HTML代码；init接口 用于绑定交互组件的事件；

• 输入类型的交互组件应该对应一个或多个input以保存输入的值，并且在输入值变化时，促发change事件以通知关心该值的监听者；

• 对于一个表单（form）或者一个对话框下所有的交互组件，事件应该集中由这个表单或者对话框代理。

如何使用

以下实例代码演示了ui.text, ui.select两个交互组件的使用：

//声明依赖于ui模块
define(['jquery', 'ui'], function($, ui) {
    var form = $("#form"), fieldset = form.find("fieldset");

    //first row
    fieldset.append(ui.createRow({
        title: "标题",
        tip: "可由中文、英文或者数字组成，最长12个字符",
        content: ui.text.create({
            name: "name",
            value: "init value",
            placeholder: "请输入页面名称"
        })
    }));

    //second row
    fieldset.append(ui.createRow({
        title: "栏目",
        _last_: true,
        content: ui.select.create({
            "name": "category_id",
            "options": [{
                    "name": "全站",
                    "value": "0",
                    "cur": true
                },
                {
                    "name": "栏目A",
                    "value": "1"
                }
            ]
        })
    }));

    //add init events
    ui.text.init(form);
    ui.select.init(form);

    //listen value change
    form
        .on("change", "input[name='name']", function(e) {
            var t = $(this);
            console.log(t.val());
        })
        .on("change", "input[name='category_id']", function(e) {
            var t = $(this);
            console.log(t.val());
        })
});