menu组件，菜单组件。

目录

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

一. 综述

menu是菜单组件。通过配合的图标与样式，使开发者能快速完成各种菜单的开发。

组件路径：$UI/system/components/justep/menu/

组件标识：UI2/system/components/justep/menu/menu

二. DOM结构

  • 典型dom结构
<ul component="$UI/system/components/justep/menu/menu"
    class="x-menu dropdown-menu"
    xid="addMenu" style="display:block;top:auto;left:200px;">
    <li class="x-menu-item" xid="item7">
      <a component="$UI/system/components/justep/button/button"
        class="btn" label="动态分类" xid="button8">
        <i xid="i8"/>
        <span xid="span8">动态分类</span>
      </a>
    </li>
    <li class="x-menu-divider divider" xid="divider1"/>
</ul>

三. 样式

  • x-menu、dropdown-menu

基础样式（必须）。

四. 属性

组件具有公共属性，请参考组件公共属性

  • xid

[string][xid]组件标示

五. 方法

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

  • addDivider

Object addDivider()
添加分割线

> 返回值

Object

>例：

  this.comp("menu1").addDivider();
  • addItem

Object addItem(Object config)
添加菜单项

> 参数

config：[Object] 配置，结构如下：
{
“label” : 显示名
“icon” : 图标，支持fontIcon和img两种模式，fontIcon格式：”icon-refresh”，
img格式：”img:xxx.png|xxx.png”(包含可以、不可用两个显示图片)
}

> 返回值

Object

>例：

var config= {
    "label" : "菜单项",
    "icon" : "icon-android-folder"
};
this.comp("menu1").addItem(config);

六. 事件

  • （无）

七. 操作

  • (无)

八. 案例

1、菜单列表
1
  • 增加menu组件
  • 点右键添加Item和分割线
  • menu组件的style样式设置为：display:block;top:auto;
  • 修改Item下的button的icon和label属性来配置菜单图标和名称

代码示例：

<ul component="$UI/system/components/justep/menu/menu"
    class="x-menu dropdown-menu"
    xid="menu1" style="display:block;top:auto;">
    <li class="x-menu-item" xid="item1">
      <a component="$UI/system/components/justep/button/button"
        class="btn btn-link" label="个人中心" xid="button1">
        <i xid="i1"/>
        <span xid="span1">个人中心</span>
      </a>
    </li>
    <li class="x-menu-divider divider" xid="divider1"/>
    <li class="x-menu-item active" xid="item2">
      <a component="$UI/system/components/justep/button/button"
        class="btn btn-link btn-icon-left"
        label="我的购物车" xid="button2" icon="icon-ios7-arrow-forward">
        <i xid="i2" class="icon-ios7-arrow-forward"/>
        <span xid="span2">我的购物车</span>
      </a>
    </li>
    <li class="x-menu-item" xid="item3">
      <a component="$UI/system/components/justep/button/button"
        class="btn btn-link btn-icon-left"
        label="交易记录" xid="button3" icon="icon-ios7-arrow-forward">
        <i xid="i3" class="icon-ios7-arrow-forward"/>
        <span xid="span3">交易记录</span>
      </a>
    </li>
    <li class="x-menu-item" xid="item4">
      <a component="$UI/system/components/justep/button/button"
        class="btn btn-link btn-icon-left"
        label="优惠卷" xid="button4" icon="icon-ios7-arrow-forward">
        <i xid="i4" class="icon-ios7-arrow-forward"/>
        <span xid="span4">优惠卷</span>
      </a>
    </li>
    <li class="x-menu-item" xid="item5">
      <a component="$UI/system/components/justep/button/button"
        class="btn btn-link btn-icon-left"
        label="我的收藏" xid="button5" icon="icon-ios7-arrow-forward">
        <i xid="i5" class="icon-ios7-arrow-forward"/>
        <span xid="span5">我的收藏</span>
      </a>
    </li>
    <li class="x-menu-item" xid="item6">
      <a component="$UI/system/components/justep/button/button"
        class="btn btn-link btn-icon-left"
        label="积分兑换" xid="button6" icon="icon-ios7-arrow-forward">
        <i xid="i6" class="icon-ios7-arrow-forward"/>
        <span xid="span6">积分兑换</span>
      </a>
    </li>
</ul>
2、动态添加菜单项
2
  • 增加menu组件和data组件
  • 预设置标题：点右键添加Item
  • menu组件的style样式设置为：display:block;top:auto;
  • 写js取出data数据，动态添加Item和分割线

代码示例：

<ul component="$UI/system/components/justep/menu/menu"
    class="x-menu dropdown-menu"
    xid="addMenu" style="display:block;top:auto;left:200px;">
    <li class="x-menu-item" xid="item7">
      <a component="$UI/system/components/justep/button/button"
        class="btn" label="动态分类" xid="button8">
        <i xid="i8"/>
        <span xid="span8">动态分类</span>
      </a>
    </li>
</ul>

var menuObj=this.comp("addMenu");
var data=this.comp("data");
menuObj.addDivider();
data.each(function(obj){
    var config= {
	"label" : obj.row.val("fType")
    };
    menuObj.addItem(config);
});

本文由WeX5君整理，WeX5一款开源免费的html5开发工具，H5 App开发就用WeX5!

阅读其他app 开发相关文章：http://doc.wex5.com/?p=3443