@beisen/tita-sidebar

    1.1.9 • Public • Published

    左侧导航组件

    简介

    iTalent通用侧边栏
    

    2. 使用

    初始化

    model = {
    	"id":124                       // Number、required、unique
    	,"title":"快速入口"              // String、required
    	,"href":"?iTalentNavId=157"	   // String、required
    	,"iconName":"sys-icon-star"    // String、required
    	,"type":"hash"                 // String、required
    	,"orderId":2                   // Number、required、unique
    	,"code":'home'                 // String
    	,"appId":1                     // Number、required
    	,"status":0					   // Number
    	,isQuickEntry: true            // Boolean、required
    	,"children":[]                 // Array
    }
    this.pageJson = {
    	menuArry:[
    				{
    					"id":567890
    					,"title":"快速入口"
    					,"href":"?iTalentNavId=157"
    					,"iconName":"sys-icon-star"
    					,"type":"hash"
    					,"orderId":2
    					,"code":'tita-home'
    					,"appId":1
    					,"status":0
    					,isQuickEntry: true
    					,"children":[model, model...]
    				},
    				{
    					"id":567890
    					,"title":"快速入口"
    					,"href":"?iTalentNavId=157"
    					,"iconName":"sys-icon-star"
    					,"type":"hash"
    					,"orderId":2
    					,"code":"tita-activity"
    					,"appId":1
    					,"status":0
    					,isQuickEntry: false
    					,"children":[]
    				}
    
    			]
    }
    
    this.sidebar = new SideBar(this.pageJson);
    

    sidebar className

    	报表:sys-icon-baobiao
    	动态:sys-icon-dongtai
    	工作:sys-icon-gongzuo
    	工作台:sys-icon-gongzuotai
    	计划:sys-icon-jihua
    	绩效:sys-icon-jixiao
    	考核:sys-icon-kaohe
    	目标:sys-icon-mubiao
    	ocean:sys-icon-ocean
    	日报:sys-icon-ribao
    	首页:sys-icon-souye
    	同事:sys-icon-tongshi
    	文件:sys-icon-wenjian
    	项目:sys-icon-xiangmu
    	仪表盘:sys-icon-yibiao
    	应用:sys-icon-yingyong
    	招聘:sys-icon-zaopin
    	职业:sys-icon-zhiye
    
    	// 另外在fonts目录下添加了preview目录,方便查看目前左侧导航可用的所有图标
    
    
    • 监听事件
    //监听导航切换宽窄条事件
    this.listenTo(this.sidebar,"layoutChanged",function(resp){
    	//console.log(resp)
    });
    
    //监听点击导航事件
    this.listenTo(this.sidebar,"hashChanged",,function(resp){
    	//console.log(resp)
    });
    
    
    • 获得导航的宽度
    	var menuWidth = this.sidebar.getWidth()
    
    • 提示功能与初始高亮功能
    var countData = [
    	"#home"
    	,"#test"
    	,"#test1"
    ];
    
        //导航提示,根据hash来判断哪个导航处于提示状态
    
    this.sidebar.updateNewCount(countData);
    
    //导航高亮,含有二级数据的一级导航高亮无效
    
    - 页面首次加载,定制高亮导航
    	// id 和 code 必须有一个非空,且高亮优先级code > id
    	this.sidebar.highLightSet({"id":150,"code":null});
    
    - 页面首次加载,不定制高亮
    	this.sidebar.highLightSet({"id":'',code:''})
    
    
    • 刷新指定的导航 (可用与更新红点提示)
    	var menuItem = {
    		"id":124
    		,"title":"快速入口"
    		,"href":"?iTalentNavId=157"
    		,"iconName":"sys-icon-star"
    		,"type":"hash"
    		,"orderId":2
    		,"code":'home'
    		,"appId":1
    		,"status":0
    		,isQuickEntry: true
    		,"children":[]
    	}
       this.sidebar.menuItemReload(menuItem)
    

    1.版本

    v0.3.2

    • 解决快速入口中配置一级导航时,点击高亮错误的bug

    v0.3.1

    • 添加底部阴影

    v0.3.0

    • 添加【快速入口】功能
    • 导航高度调整
      • 一级导航高度有50px调整为44px
      • 二级导航高度有40px调整为34px
    • 更新组件的iconfont
      • 添加新图标
      • 在font/v*目录下添加preview目录,方便预览所有导航支持的图标

    v0.2.24

    • 2017年2月之前线上版本

    Keywords

    none

    Install

    npm i @beisen/tita-sidebar

    DownloadsWeekly Downloads

    59

    Version

    1.1.9

    License

    ISC

    Unpacked Size

    11.4 MB

    Total Files

    376

    Last publish

    Collaborators

    • albert-zhang
    • liugenpeng
    • beisencorp
    • lgm
    • neozw