@beisen/tita-sidebar

iTalent sidebar

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@beisen/tita-sidebar
1.1.93 years ago4 years agoMinified + gzip package size for @beisen/tita-sidebar in KB

Readme

左侧导航组件

简介

iTalent通用侧边栏

  1. 使用

初始化

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