单复选框 / BoxGroup Star

复选框

普通复选框

checkbox
1
2
3
4
5
6
7
8
9
10
11
12
require(['moye/BoxGroup'], function (BoxGroup) {
    new BoxGroup({
    main: document.getElementById('checkbox1'),
    datasource: [
        {value: 0, name: '不限'},
        {value: 1, name: '中关村-上地'},
        {value: 2, name: '亚运村'},
        {value: 3, name: '北京南站商圈超长'}
    ],
    value: [1, 2]
    }).render();
});

普通单选框

radio
1
2
3
4
5
6
7
8
9
10
11
12
13
require(['moye/BoxGroup'], function (BoxGroup) {
    new BoxGroup({
    main: document.getElementById('radio1'),
    boxType: 'radio',
    datasource: [
        {value: 0, name: '不限'},
        {value: 1, name: '中关村-上地'},
        {value: 2, name: '亚运村'},
        {value: 3, name: '北京南站商圈超长'}
    ],
    value: [1]
    }).render();
});

木有图标的复选框

可以通过重写 getItemHTML 方法，改变每个选项的 HTML 结构

注意 我们约定每一个选项单元最外层的元素必须包含一个统一的 selector ， 默认是[data-role=boxgroup-item] ， 可以通过修改配置项 itemSelector 来修改。

checkbox
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
require(['jquery','moye/BoxGroup'], function ($, BoxGroup) {
    new BoxGroup({
        main: document.getElementById('checkbox2'),
        icons: false,
        activeClass: 'ui-boxgroup-item-checked',
        datasource: [
            {value: 0, name: '不限'},
            {value: 1, name: '中关村-上地'},
            {value: 2, name: '亚运村'},
            {value: 3, name: '北京南站商圈超长'}
        ],
        value: [1],
        getItemHTML: function (state, item) {

            var classNames = this.helper.getPartClasses('item');
            var index = $.inArray(item, this.datasource);

            if (state) {
                classNames.push(this.activeClass);
            }

            if (index === 0) {
                classNames.push('first');
            }
            else if (index === this.datasource.length - 1) {
                classNames.push('last');
            }

            return ''
                + '<label class="' + classNames.join(' ') + '" data-role="boxgroup-item">'
                +     '<input type="' + this.boxType + '" value="' + item.value + '">'
                +     item.name
                + '</label>';

        }
    })
    .render()
    .on('change', function(e) {
        $('#values').html(this.getValue().join('，'));
    });
});