以下为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