tree前端实现(1)

本期内容需要完成以下图片的样式：

那让我们继续上一篇内容操作！！！

二、演示

---

1、将静态数据导入WebContent包中

2、在界面对应的地方写入tree控件代码，也就是此项目的菜单管理

树控件也可以定义在一个空

• 元素中并使用Javascript加载数据。

也就是↓：

3、在js文件中建立File文件(index.js)，用于加载数据，界面jsp引入数据js

js文件：

$(function(){

/**

* 1、tree方法时通过$.extends()扩展出来的

* 2、tree方法做的事情

*  $(‘#tt’).append();

*/

$(‘#tt’).tree({

url:‘tree_data1.json’

});

})

jsp需要将js引入进来：

也就形成了↓界面：

4、点击左侧显示右侧Tab

(1、给菜单添加点击事件

(2、新建对应的打开页面

（3、调用tabs选项卡打开对应的页面

①、在数据文件中添加跳转页面

②、将tabs控件代码放入主界面对应位置，如下，放到内容区域

③、添加新的选项卡面板，也就是点击左侧菜单内容出现面板

$(‘#stuMenu’).tree({

url:‘tree_data1.json’,

onClick: function(node){

// alert(node.text);  // 在用户点击的时候提示

// add a new tab panel

$(‘#s’).tabs(‘add’,{

title:node.text,

content:node.text+‘Tab Body’,

closable:true,

tools:[{

iconCls:‘icon-mini-refresh’,

handler:function(){

alert(‘refresh’);

最后

好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。

做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。