首先,是“可动的动画效果”,这个上来说easyUI并没有直接提同导航栏的控件或者样式,但是两种easyui提供的样式可以提供参考和辅助,一个是eaysui-menu类(参考Easyui官方帮助文档9页-创建简单菜单),另一个是panel面板(参考Easyui官方帮助文档15页-创建折叠面板)。具体要求可以追问
如果说动态的改变导航栏的结构和内容,那么多数请款下“动态”一次就不是指的js范畴了,这一般来讲是动态后台语言(如,asp,jsp,php等)的工作内容。当然js本身也可以达到类似的效果,但是只能是效仿。提供一个种简单的思路吧,有不明白可以追问。将所有可能的导航栏选项,都以静态形式上传到本地,然后在用户进行会改变导航栏的 *** 作的时候,由js从新生成页面内节点。当然如果需要刷新的页面的话,就在本地创建cookie,存储一些参数,然后再页面加载的过程中,根据cookie的参数,生成页面。
//添加新的手风琴风格菜单function addMenu(data, sysName) {
var menuList = ""
//回圈全部模组菜单讯息
$.each(data, function (i, objOne) {
menuList = "<ul class='easyui-datalist' style='height:100%' >"
//回圈某个模组下所有菜单讯息
$.each(objOne.MenuInfo, function (j, objTwo) {
if (objTwo.PackageUrl != "") {
menuList += " <li><a href='#' onclick=\"addTab('" + objTwo.MenuName + "','" + objTwo.PackageUrl + "')\">" + objTwo.MenuName + "</a></li>"
}
else {
menuList += " <li>" + objTwo.MenuName + "</li>"
}
})
menuList += " </ul>"
$('#divMenuDetail').accordion('add', {
title: <a href='#' onclick=\"addTab('" + objOne.MenuModelName + "','" + objOne.PackageUrl + "')\">" + objOne.MenuModelName + "</a>", //菜单模组名称
content: menuList, //本模组菜单清单
selected: false
})
})
var pp = $('#divMenuDetail').accordion('panels')
var t = pp[0].panel('options').title
$('#divMenuDetail').accordion('select', t)
}
这是我自己用的easyUI动态生成两层菜单前台JS方法
你需要用ajax去后台抓出两层菜单传到前台,objOne是第一层,objTwo是第二层,参考一下
做好下拉框的样式以及基本的属性,调用loadData()方法,往里面写值就行了啊。$('#cc').combobox({
valueField:'id',
textField:'text'
})
var data = "[{id:'1', value:'1'},{id:'2', value:'2'}]"
// 1和2用逗号分隔
$('#cc').combobox("loadData", data)
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)