如何实现菜单被选中的功能

以下为webx中用vm实现左侧菜单选中功能的示例。

 

步骤：

1.     用$control.setTemplate()方式引用菜单模板
2.     用setParameter()方法将参数传递给被引用的菜单模板
3.     在被引用的菜单模板中，用#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