以下为webx中用vm实现左侧菜单选中功能的示例。
步骤:
- 用$control.setTemplate()方式引用菜单模板
- 用setParameter()方法将参数传递给被引用的菜单模板
- 在被引用的菜单模板中,用#if判断传递过来的参数值进行active的设置
(以下为vm示例代码,css部分请自行捣鼓,附件的css示例仅供参考)
leftMenu.vm示例代码:
<div id="left-menu">
<ul id="sys-manage-menu-ul">
<li class="top-menu #if($page == "leftMenu_01")active#end"><a href="/manager/page_01"><i class="fa fa-tasks"></i>菜单_01</a></li>
<li class="top-menu #if($page == "leftMenu_02")active#end"><a href="/manager/page_02"><i class="fa fa-th"></i>菜单_02</a></li>
</ul>
</div>
page_01.vm示例代码:
#set ($title='菜单_01页面')
#set ($css=[
'example/page/menu'
])
#if($vip == 0)
<script>
_tb_token = '$!csrfToken.longLiveToken';
</script>
<div class="newContent">
<div id="sys-manage-header">
<h1>菜单选中示例-Page_01</h1>
</div>
<div id="sys-manage-body">
$control.setTemplate('sysManageMenu').setParameter("page", "leftMenu_01")
<div id="main-content">
<span>page_01页面内容</span>
</div>
</div>
</div>
#else
<div>
<span>Permission Denied !</span>
</div>
#end