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

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

猜你喜欢

转载自lhq1013.iteye.com/blog/2395014
今日推荐