画面效果

方法

• pknavigation.setData(objectname,data)，设置所有选项的json数据。
  • 示例：pknavigation.setData("panel1",
    [{
    "name": "目录1",
    "grade":"1",
    "id":"1",
    "icon":"fa\tfa-fire"
    }, {
    "name": "目录2",
    "grade":"1",
    "id":"2",
    "icon":"fa\tfa-list-ul",
    "children": [{
    "name": "二级目录A",
    "grade":"2",
    "id":"4"
    },
    {
    "name": "二级目录B",
    "grade":"2",
    "id":"5",
    "children": [{
    "name": "三级目录A",
    "grade":"3",
    "id":"6"
    },
    {
    "name": "三级目录B",
    "grade":"3",
    "id":"7"
    },
    {
    "name": "三级目录C",
    "grade":"3",
    "id":"8"
    },
    {
    "name": "三级目录D",
    "grade":"3",
    "id":"9"
    },
    ]
    }
    ]
    }, {
    "name": "目录3",
    "grade":"1",
    "id":"3",
    "icon":"fa\tfa-bolt"
    }])
  • 一级菜单可以配置左侧icon图标，需要配置icon字段，value具体参考awesome文档http://www.fontawesome.com.cn/icons-ui/，空格请用”\t“代替
  • 

• pknavigation.setStyle(objectname,data)  设置控件样式
  • 示例：pknavigation.setStyle('panel1',{
    main:{
    bgColor:'#0e144f',
    color:'#FFF',
    iconColor:'#FFF',
    textAlign:'center',
    height:'50px'
    },
    firstClassMenu:{
    bgColor:'#1d1056',
    bgActiveColor:'#1d1056',
    hoverColor:'#1d1056',
    fontSize:"14px"
    },
    twoLevelMenu:{
    bgColor:'#1d1056;',
    bgActiveColor:'#1d1056',
    hoverColor:'#1d1056',
    fontSize:"12px"
    },
    threeLevelMenu:{
    bgColor:'#000235',
    bgActiveColor:'#1d1056',
    hoverColor:'#1d1056',
    fontSize:"12px"
    }
    })
  • main  主体区域
    • bgColor  背景色
    • color  文字颜色
    • iconColor  图标颜色
    • textAlign  文字对齐方式
    • height  行高
  • firstClassMenu  一级菜单
    • bgColor  背景色  
    • bgActiveColor  选中状态背景色
    • hoverColor  鼠标移入状态背景色
    • fontSize  文字大小
  • twoLevelMenu  二级菜单
    • bgColor  背景色 
    • bgActiveColor  选中状态背景色
    • hoverColor  鼠标移入状态背景色
    • fontSize  文字大小
  • threeLevelMenu  三级菜单
    • bgColor  背景色 
    • bgActiveColor  选中状态背景色
    • hoverColor  鼠标移入状态背景色
    • fontSize  文字大小

专有事件

• onClick事件。当状态发生改变时，触发onClick事件。参数：objectname,value。示例：value:{ "name": "目录3","grade":"1","id":"3"}  其他属性根据setData时设定哪些就返回哪些
• 其中value：返回的是选中节点的信息数组，至少包括id和name，其他属性根据setData时设定哪些就返回哪些

专有动画关联

• 无

专有属性配置对话框