工具位置

• 左侧移动端app控件下

Image Removed

画面效果

Image RemovedImage Added

方法

• getValuepknavigation.setData(objectname,data)，返回当前的值，为0或者1，示例：pkmobileswitch，设置所有选项的json数据。
  • 示例：pknavigation.
  getValue
  • setData(
  "switch1")
• setValue（objectname,value)，设定当前的值，value为0或者1。示例：pkmobileswitch.setValue("switch1",1)
• toggle(objectname)，在开和关之间切换。示例：pkmobileswitch.toggle("switch1")

• setBgColor(objectname,color),设置背景色。仅支持blue和green，缺省为蓝色。示例：pkmobileswitch.setBgColor("switch1","green")

专有事件

• onChange事件。当状态发生改变时，触发onChange事件。参数：objectname,value。

Image Removed

专有动画关联

• 可配置一个data-status动画。当tag点值为0或1时，自动设置控件为开或者关

Image Removed

专有属性配置对话框

• 可以配置背景颜色，选择框，选择内容：blue或green

...

• • "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“代替
  • Image AddedImage Added

• 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时设定哪些就返回哪些

Image Added

专有动画关联

• 无

专有属性配置对话框