企业官网建设流程全解析

中国铁道工程建设协会查证网站,钓鱼网站制作教程视频,wordpress同步微博内容,长春好的做网站公司下面直接给你最实用、最常见的使用标记#xff08;HTML标记#xff09;创建树形菜单方法#xff0c;jQuery EasyUI 的 tree 组件支持超级简单的 ulli 标记方式构建树#xff0c;复制粘贴就能做出左侧导航菜单、部门组织架构、分类目录等#xff0c;领导最…下面直接给你最实用、最常见的使用标记HTML标记创建树形菜单方法jQuery EasyUI 的tree组件支持超级简单的ulli标记方式构建树复制粘贴就能做出左侧导航菜单、部门组织架构、分类目录等领导最爱的“静态树形菜单”全都有方法1最简单最常用 - 纯HTML标记创建树形菜单推荐现在就用这个3秒出效果!DOCTYPEhtmlhtmlheadmetacharsetUTF-8titleEasyUI 树形菜单 - 使用标记创建/titlelinkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/default/easyui.csslinkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/icon.cssscripttypetext/javascriptsrchttps://code.jquery.com/jquery-1.12.4.min.js/scriptscripttypetext/javascriptsrchttps://www.jeasyui.com/easyui/jquery.easyui.min.js/script/headbodydivstylewidth:250px;margin:20px auto;!-- 使用 ul classeasyui-tree 标记方式创建树 --ulclasseasyui-treelispan系统管理/spanullidata-optionsiconCls:icon-userspan用户管理/span/lilidata-optionsiconCls:icon-rolespan角色管理/span/lilidata-optionsiconCls:icon-deptspan部门管理/span/lilispan权限设置/spanullidata-optionsiconCls:icon-menuspan菜单权限/span/lilidata-optionsiconCls:icon-btnspan按钮权限/span/li/ul/li/ul/lilidata-optionsstate:closed,iconCls:icon-orderspan订单管理/spanullispan订单列表/span/lilispan订单统计/span/lilispan退款处理/span/li/ul/lilidata-optionsiconCls:icon-productspan商品管理/spanullispan商品列表/span/lilispan商品分类/span/lilispan库存管理/span/li/ul/lilidata-optionsiconCls:icon-reportspan报表统计/span/lilidata-optionsiconCls:icon-settingspan系统设置/span/li/ul/divscript// 初始化后绑定点击事件点击节点显示信息或加载页面$(function(){$(.easyui-tree).tree({onClick:function(node){if(node.text){$.messager.show({title:你点击了,msg:节点文本node.text,timeout:2000});// 实际项目中可以这样// addTab(node.text, content.php?menu node.id);}}});});/script/body/html效果亮点完全用ulli标准HTML标记构建无需写JS数据支持无限级嵌套state:closed表示默认折叠iconCls指定节点图标EasyUI内置大量icon自动渲染成专业树形菜单支持展开/折叠、选中高亮方法2标记 数据属性混合更灵活控制节点ulclasseasyui-treedata-optionslines:true,animate:truelidata-optionsid:1,state:closed,iconCls:icon-homespan首页/spanullidata-optionsid:11,attributes:{url:dashboard.php}span控制台/span/lilidata-optionsid:12span个人信息/span/li/ul/lilidata-optionsid:2,iconCls:icon-chartspan数据统计/span/lilidata-optionsid:3,iconCls:icon-logout,attributes:{url:logout.php}span退出系统/span/li/ul方法3结合左侧布局 主内容区域经典后台框架结构divclasseasyui-layoutdata-optionsfit:true!-- 左侧树形菜单 --divdata-optionsregion:west,title:导航菜单,iconCls:icon-tree,split:truestylewidth:220px;ulclasseasyui-treedata-optionslines:true!-- 同上面的树结构 --/ul/div!-- 右侧主内容可放tabs或iframe --divdata-optionsregion:centerdividmainTabsclasseasyui-tabsdata-optionsfit:true,border:falsedivtitle欢迎页stylepadding:20px;欢迎使用EasyUI后台系统/div/div/div/divscript// 点击树节点打开或切换tabfunctionaddTab(title,url){if($(#mainTabs).tabs(exists,title)){$(#mainTabs).tabs(select,title);}else{$(#mainTabs).tabs(add,{title:title,content:iframe srcurl stylewidth:100%;height:100%;border:0;/iframe,closable:true});}}// 绑定树点击事件$(.easyui-tree).tree({onClick:function(node){if(node.attributesnode.attributes.url){addTab(node.text,node.attributes.url);}}});/script你现在直接复制方法1的完整代码保存为HTML文件运行就能看到一个超级专业的树形菜单了这是最简单、最稳定的方式特别适合静态菜单或菜单数据不经常变化的场景。想要我给你一个更完整的后台框架示例左侧标记树菜单 右侧tabs内容区 节点带url自动打开页面或者你告诉我你的菜单结构比如几级、哪些需要图标、哪些默认展开我2分钟帮你写好完整标记代码复制就能跑快说说你的具体需求我手把手帮你搞定5分钟内看到完美树形菜单效果