1.0.18 • Published 4 years ago

tita-sidebar v1.0.18

Weekly downloads
3
License
ISC
Repository
gitlab
Last release
4 years ago

左侧导航组件

简介

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月之前线上版本