工具位置

• 左侧移动端app控件下

画面效果

方法

• 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:'#000080'
    },
    firstClassMenu:{
    bgActiveColor:'#00cc00',
    hoverColor:'#00cc00'
    },
    twoLevelMenu:{
    bgColor:'#ffb3ff',
    bgActiveColor:'#ffff00',
    hoverColor:'#ffff00'
    },
    threeLevelMenu:{
    bgColor:'#ff4da6',
    bgActiveColor:'#33001a',
    hoverColor:'#33001a'
    }
    })
  • main  主体区域
    • bgColor  背景色
  • firstClassMenu  一级菜单
    • bgActiveColor  选中状态背景色
    • hoverColor  鼠标移入状态背景色
  • twoLevelMenu  二级菜单
    • bgColor  背景色 
    • bgActiveColor  选中状态背景色
    • hoverColor  鼠标移入状态背景色
  • threeLevelMenu  三级菜单
    • bgColor  背景色 
    • bgActiveColor  选中状态背景色
    • hoverColor  鼠标移入状态背景色

专有事件

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

专有动画关联

• 无

专有属性配置对话框