all files / dui/src/widget/ TabNavigator.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 
 
 
 
 
 
 
 
 
 
1×
1×
 
 
1×
 
1×
1×
 
 
 
 
 
 
 
 
 
1×
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1×
 
 
 
 
 
 
1×
 
 
 
 
 
 
 
 
 
 
 
 
1×
 
 
 
 
 
 
1×
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1×
 
 
 
 
 
 
 
 
 
 
 
/**
 * TabNavigator控件
 *
 * @file TabNavigator控件
 * @author Brian Li (lbxxlht@163.com)
 *
 * fire的事件：
 *      change
 *      clickItem
 */
var define = typeof define === 'function' && define.amd ? define : function (factory) {
    typeof module === 'object' ? (module.exports = factory(require)) : '';
};
 
define(function (require) {
 
    var Controller = require('../core/controller');
    var util = require('../core/util');
 
    // public /////////////////////////////////////////////////////////////////
 
    /**
     * TabNavigator构造函数
     *
     * @param {Object} param 初始化参数
     * @return {TabNavigator} TabNavigator实例
     */
    function TabNavigator(param) {
        if (!(this instanceof TabNavigator)) {
            return new TabNavigator(param);
        }
        // 数据预处理
        param = param || {};
        param.datasource = param.datasource || [];
        param.datasource.active = (isNaN(param.active) || param.active < 0 || param.active >= param.datasource.length)
            ? 0 : parseInt(param.active);
        param.tpl = require('../tpls/tabnavigator-tpl');
        // 内部事件
        util.appendHandler(param, 'click', mouseHandler);
        // 调用父类初始化
        Controller.call(this, param);
 
        this.activeItem = param.active;
    }
 
    util.inherit(TabNavigator, Controller);
 
    /**
     * 激活某个tab
     *
     * @param {number} i tab索引号，从0开始
     */
    TabNavigator.prototype.setActive = function (i) {
        if (isNaN(i) || i < 0 || i >= this.initialParameter.datasource.length || i === this.activeItem) {
            return;
        }
        $(this.container).find('[data-ui-cmd="tabitem"]').removeClass('active')
            .filter('[data-ui-item="' + i + '"]').addClass('active');
        this.activeItem = i;
        this.fire('change', {
            activeItem: i,
            item: this.initialParameter.datasource[i]
        });
    };
 
    return TabNavigator;
 
    /**
     * 鼠标事件
     *
     * @param {Object} e 鼠标事件对象
     */
    function mouseHandler(e) {
        var index = getActionItem(e);
        this.fire('clickItem', {
            index: index,
            item: this.initialParameter.datasource[index]
        });
        this.setActive(index);
    }
 
    /**
     * 获取当前操作DOM的单元格索引
     *
     * @param {Object} e 鼠标事件对象
     * @return {number} 单元格索引，从0开始，-1标识未找到
     */
    function getActionItem(e) {
        var dom = e.target;
        var dataset = util.getDataset(dom);
        while (dataset.uiCmd !== 'tabitem' && dom.tagName !== 'BODY') {
            dom = dom.parentNode;
            dataset = util.getDataset(dom);
        }
        return isNaN(dataset.uiItem) ? -1 : parseInt(dataset.uiItem, 10);
    }
 
});