前端CSS框架 前端CSS框架 上机6-tree+menu.docxVIP

实验6 实验题目：easyui 基础工具类组件 实验原理：tree、menu工具、方法、事件 实验目的要求：掌握tree、menu工具、方法、事件 实验内容： 1、tree（树） 练习1：tree简单显示 ul class=easyui-tree li span江苏省/span ul li span南京市/span!--规定用span将父亲包起来-- ul li鼓楼区/li li玄武区/li /ul /li li span苏州市/span ul li金阊区/li li沧浪区/li /ul /li li无锡市/li li常州市/li /ul /li li span浙江省/span ul li span杭州市/span ul li上城区/li li西湖区/li /ul /li li span宁波市/span ul li海曙区/li li江东区/li /ul /li /ul /li li广东省/li li山东省/li li福建省/li /ul 节点的属性有： id：节点 ID，对加载远程数据很重要。 text：显示节点文本。(必选) state：节点状态，open 或 closed，默认：open。如果为closed的时候，将不自动展开该节点。 checked：表示该节点是否被选中。 attributes: 被添加到节点的自定义属性。 children: 一个节点数组声明了若干节点 iconCls:：图标 （1）、属性： 在js中用date属性设置树节点对象 div id=tt/div 在js中用url属性获取json文件内容，设置树节点对象 2、menu（菜单） 练习2：右键显示菜单 !--菜单被创建时，默认隐藏的-- div id=box class=easyui-menu style=width:120px; div新建/div div span打开/span!--添加下级菜单-- div style=width:150px; divWord/div divExcel/div divPowerPoint/div /div /div div data-options=iconCls:icon-save保存/div!--添加iconCls、disabled属性-- div data-options=iconCls:icon-print,disabled:true打印/div div class=menu-sep/div!--分割线-- div退出/div /div 练习3：修改、追加菜单：将word项改为修改，并加上图标 请复制： div id=mm class=easyui-menu div data-options=href: onclick=alert(这是新建菜单项！)新建/div div打开 div div id=csWord/div divExcel/div divAccess/div divPowerPoint/div /div /div div data-options=iconCls:icon-save保存/div div data-options=iconCls:icon-print,disabled:true打印/div div class=menu-sep/div div退出/div /div 追加“新菜单项” 3、linkbutton a id=l1 class=easyui-linkbutton c1按钮1/a a id=l2按钮2/a a id=l3按钮3/a a id=l4按钮4/a 4.menubutton div class=easyui-panel style=padding:5px;width:300px a class=easyui-linkbutton data-options=plain:true主菜单/a a class=easyui-menubutton data-options=menu:#mm1,iconCls:icon-edit编辑/a a class=easyui-menubutton data-op