demo.html 6.54 KB
<div id="ntimeline" class="page out" data-title="时间轴插件">
    <div id="ntimeline-header"></div>
    <div id="ntimeline-a"></div>
</div>
<script>
require(['NavHeader', 'NTimeline'], function(NavHeader, NTimeline) {
    var _u = require('mUtil');
    var hasClsPicker = typeof clsPicker !== 'undefined';

    if(!hasClsPicker) {
        new NavHeader({
            el: 'ntimeline-header',
            option: {
                title:'时间轴插件',
                smallTitle:'ntimeline'
            }
        }).render();
    }

    new NTimeline({
        el: 'ntimeline-a',
        option: {
            dataSource: {
                type: 'mock',//数据来源类型:cube/mock/url/api
                searchid: -999,
                mockData: [
                    { 'id': '1', 'name': '杨文元', 'age': '43', 'birthday': '1976-02-20'},
                    { 'id': '2', 'name': '刘长庚', 'age': '45', 'birthday': '1978-03-26'},
                    { 'id': '3', 'name': '付蕾', 'age': '34', 'birthday': '1985-08-09'}
                ],
                urlConfig: {
                    path: '/mobilemode/mobile/demo/plugin/NTimeline/data.jsp',
                    formats: {
                        DATAS: 'datas',
                        TOTAL_SIZE: 'totalSize',
                        STATUS_CODE: {
                            key: '',
                            value: ''
                        },
                        ERROR_MSG: ''
                    }
                },
                apiConfig: {
                    api: {
                        id: '4ff3c2114b484c9b888c32554c38cc7b',
                        name: '文档列表'
                    },
                    request: {
                        params: {
                            query: [
                                {name: 'categoryid', value: ''},
                                {name: 'searchKey', value: ''},
                                {name: 'pageNo', value: '{page_no}'},
                                {name: 'pageSize', value: '{page_size}'}
                            ],
                            body: {}
                        },
                        path: '/X-WEV-DocList',
                        type: 'GET'
                    },
                    response: {
                        type: 'HTML',
                        formats: {
                            DATAS: 'datas',
                            TOTAL_SIZE: 'totalSize',
                            STATUS_CODE: {
                                key: 'status',
                                value: 1
                            },
                            ERROR_MSG: 'errMsg'
                        }
                    }
                }
            },
            pageStart: 1,
            pageSize: !hasClsPicker ? 10: 1,
            showSet: {
                common: {//通用,但是建模查询不适用,可单独为每种类型指定view,类型详见dataSource的type字段
                    timefield: '{birthday}',
                    titlefield: '{name}',
                    otherfields: [
                        '年龄:{age}',
                        '生日:{birthday}'
                    ]
                },
                cube: {
                    timefield: {fieldid: 6537, fielddesc: '日期浏览框'},
                    titlefield: {fieldid: 6528, fielddesc: '单行文本框'},
                    otherfields: [
                        [{fieldid: 6534, fielddesc: '人力资源浏览框'}, {fieldid: -1, fielddesc: ',人员id:{rlzyllk}'}],
                        [{fieldid: 6544, fielddesc: '图片上传'}]
                    ]
                },
                url: {
                    timefield: '{date}',
                    titlefield: '{title}',
                    otherfields: [
                        '内容:{content}',
                        '分类:{cat}',
                        '日期:{date}'
                    ]
                },
                api: {
                    timefield: '{createtime}',
                    titlefield: '{subject}',
                    otherfields: [
                        '{owner}, {createtime}'
                    ]
                }
            },
            options: {
                readonly: false//是否数据只读
            },
            callback: {
                click : function(data){
                    $u('/mobilemode/mobile/demo/plugin/NTimeline/detail.html?billid='+data.id, true);
                }
            },
            onload: function() {
                if (!hasClsPicker) return;

                _u.vetically('#ntimeline-a');

                clsPicker.golalSetting({
                    container: '.wev-comp-NTimeline',
                    type: 'NTimeline'
                });

                new clsPicker({
                    selector: '.wev-pull-left',
                    lineYSkew: 80,
                    skew: ['', -0.6],
                    position: 'top right'
                });
                new clsPicker({
                    selector: '.wev-media-inner',
                    lineYSkew: 52,
                    skew: [20, -2.5],
                    position: 'top right'
                });
                new clsPicker({
                    selector: '.wev-media-title',
                    lineYSkew: 35,
                    skew: [10, -0.5],
                    position: 'top right'
                });
                new clsPicker({
                    selector: '.wev-img',
                    lineYSkew: -10,
                    skew: ['', -1],
                    position: 'top right'
                });
                new clsPicker({
                    selector: '.wev-ellipsis',
                    lineYSkew: -20,
                    skew: [5, -0.5],
                    position: 'top right'
                });

                new clsPicker({
                    selector: '.wev-table-view-cell:last-child .wev-media-body',
                    text: '.wev-media-body',
                    lineYSkew: 75,
                    skew: [1.2, 2.5],
                    positon: 'bottom right',
                    height: 100
                });
                new clsPicker({
                    selector: '.wev-comp-NTimeline',
                    lineYSkew: 80,
                    skew: [10, ''],
                    height: 100
                });
                new clsPicker({
                    selector: '.wev-more-btn',
                    lineYSkew: 100,
                    skew: [5, 1],
                    height: 100
                });
            }
        }
    }).render();
});
</script>