wing组件

wing组件，用于打开侧边页

目录

一、综述
二、DOM结构
三、样式
四、属性
五、方法
六、事件
七、操作
八、案例

一. 综述

wing组件，布局组件，一般用于带侧边栏可隐藏的页面

组件路径 : /UI2/system/components/justep/wing

组件标识 : $UI/system/components/justep/wing/wing

二. DOM结构

• 典型dom结构

<div component="$UI/system/components/justep/wing/wing" c
    lass="x-wing" xid="wing1">
  <div class="x-wing-left" xid="left1"/>
  <div class="x-wing-content" xid="content1">
    <div class="x-wing-backdrop" xid="div1"/>
  </div>
  <div class="x-wing-right" xid="right1"/>
</div>

三. 样式

• x-wing

组件标识class 基础样式

• x-wing-xs

尺寸样式

四. 属性

• animate

[boolean]是否使用滑动动画，默认true

• display

[string]边栏展示方式，默认值为overlay，可选参数overlay（覆盖）、push（推拉）、reveal（门侧）、compress（按键）

• routable

[boolean]是否启动路由，默认值为false,路由相关知识参考路由模块

• xid

[string] [设计时属性] 组件id

五. 方法

组件具有公共方法，请参考组件公共方法

• 构造方法

new Wing(cfg)
动态创建wing组件

> 参数

cfg:[object]，构造wing的初始参数参考组件属性

> 返回值

wing组件

//在当前页面的根节点下创建wing组件,并在左侧边栏显示一个按钮
var wing = new Wing({
    xid : "wing12",
    parentNode : this.getRootNode(),
    left : {
        size : "300"
    },
    right : {
        size : "300"
    },
});
//动态创建一个按钮到左侧边栏
var button = new Button({
    xid : "btn1",
    label : '新按钮',
    parentNode : wing.$left[0],
    'class' : "btn btn-default"
});

• set

void set({name:val})
设置组件的非只读属性。

> 参数

name:[string] 组件的非只读属性
val:[object] 属性值

> 返回值

void

//设置使用滑动动画，并设置侧边区域显示方式
this.comp("wing1").set({
    "animate":true,
    "display":"overlay"
})

• get

object get(name)
获取组件的属性值

> 参数

name:[string] 组件的属性名，参考组件属性

> 返回值

object

//获取animate属性值
var animateVal = this.comp("wing").get("animate");

• setSize

void setSize(name,val)
设置侧边栏宽度

> 参数

name:[string] 设置的左右侧边栏，取值范围：”left”、”right”
val:[object] 宽度值，支持css中所有的长度单位

> 返回值

void

//设置左侧边栏的宽度
this.comp("wing1").setSize("left",200);

• getSize

void getSize(name)
获取侧边栏的宽度

> 参数

name:[string] 获取侧边栏的类型

> 返回值

void

//获取左侧边栏的宽度
this.comp("wing1").getSize("left");

• showLeft

void showLeft(fn)
显示左侧边栏

> 参数

fn:[function] 显示后执行回调方法

> 返回值

void

//显示做侧边栏,弹出对话框
this.comp("wing1").showLeft(function(){
alert("显示左侧边栏");
});

• hideLeft

void hideLeft(fn)
隐藏左侧边栏

> 参数

fn:[function] 隐藏后执行回调方法

> 返回值

void

//隐藏左侧边栏
this.comp("wing1").hideLeft();

• toggleLeft

void toggleLeft()
切换左侧边栏显示或隐藏

> 参数

无

> 返回值

void

this.comp("wing1").toggleLeft();

• showRight

void showRight(fn)
显示右侧边栏

> 参数

fn:[function] 显示后执行回调方法

> 返回值

void

this.comp("wing1").showRight();

• hideRight

void hideRight(fn)
隐藏右侧边栏

> 参数

fn:[function] 隐藏后执行回调方法

> 返回值

void

this.comp("wing1").hideRight();

• toggleRight

void toggleRight()
切换右侧边栏显示或隐藏

> 参数

无

> 返回值

void

this.comp("wing1").toggleRight();

• show

void show(name)
显示区域

> 参数

name:[string] 要显示的区域，取值范围:”content”、”left”、”right”

> 返回值

void

this.comp("wing1").show("left");

• hide

void hide(name)
隐藏区域

> 参数

name:[string] 要隐藏的区域，取值范围:”content”、”left”、”right”

> 返回值

void

this.comp("wing1").hide("left");

六. 事件

• （无）

七. 操作

• toggleLeft()

切换左侧边栏显示或隐藏

• toggleRight()

切换右侧边栏显示或隐藏

八. 案例

1、门户首页

• 在w页面放一个wing组件
• right侧边栏去掉，左侧边栏作为菜单部分
• content做为内容显示的主体
• 通过contents动态加载功能页
• 在model的onLoad事件中分别加载相应功能。

<div component="$UI/system/components/justep/wing/wing" class="x-wing x-wing-xs"
  xid="wing" routable="false" display="push">
  <div class="x-wing-left" xid="left"/>
  <div class="x-wing-content" xid="conter">
  <div class="x-wing-backdrop" xid="div1"/>
  <div component="$UI/system/components/justep/contents/contents"
    class="x-contents x-full"
    active="0" xid="pages" swipe="false" slidable="true"/>
  </div>
</div>

//加载主页面和菜单
 Model.prototype.modelLoad = function(event) {
     this.shellImpl.isSinglePage = true;
     this.shellImpl.showPage("main");
     this.shellImpl.loadPage("left");
 };