树型菜单
html代码:
<ul id="menuTree"></ul>
jsp实现代码:
<script type="text/javascript">
$(function() {
$('#menuTree').tree({
/* Path任何项目都要拼接绝对路径 */
//[] 就是一个数组
//{} 就是一个对象(节点)
//id 节点的id
//text 节点的名称(菜单选项名)
//children 孩子(子节点)
/* state:节点状态,'open' 或 'closed',默认:'open'。
如果为'closed'的时候,将不自动展开该节点。
attributes: 被添加到节点的自定义属性。 */
url : Path + '/static/data/tree_data.json',
//设置节点的点击事件
onClick : function(node) {//node 代表当前节点对象,根据node拿到指定的属性
//alert(node.text); // 在用户点击的时候提示
addSP(node);
}
});
</script>
新增选项卡功能:
html代码:
<div data-options="region:'center',title:'主题内容'"
style="padding: 5px; background: #eee;">
<!-- 面板panel -->
<div id="p" class="easyui-panel"
style="width: 500px; height: 150px; padding: 10px; background: #fafafa; margin: 0px; padding: 0px"
data-options="fit:true,iconCls:'icon-save',closable:true,collapsible:true,minimizable:true,maximizable:true">
<!-- 选项卡 -->
<div id="tt" class="easyui-tabs"style="width: 500px; height: 250px;"></div>
</div>
</div>
实现jsp代码:
<script type="text/javascript">
//点击选项时,新增一个选项卡
function addSP(node) {
//判断节点是否是主菜单。是就不生成选项卡
if (node.children!=null) {
return;
}
/* select:选中 esists:存在 */
//判断选项卡是否存在
let flag = $("#tt").tabs("exists", node.text);
if (flag) {
$("#tt").tabs("select", node.text);
return;
}
$("#tt").tabs("add", {
title : node.text,
content : "<h4>内容区域</h4>",
closable:true,//选项卡删除按钮
})
}
});
</srcipt>