南沙做网站要多少钱,wordpress文章多个分类显示,网站商城系统建设,成都品牌logo设计公司前言
一个项目的功能较齐全#xff0c;而齐全就预示着功能菜单比较长#xff0c;但是现实中在不同的甲方使用中往往只需要摘取其中几项功能#xff0c;所以就想到用配置菜单以满足其需求#xff0c;且无需变更原始代码#xff0c;查找一些资料总是似是而非或是誊抄别的什…前言
一个项目的功能较齐全而齐全就预示着功能菜单比较长但是现实中在不同的甲方使用中往往只需要摘取其中几项功能所以就想到用配置菜单以满足其需求且无需变更原始代码查找一些资料总是似是而非或是誊抄别的什么不知所云。最后自己总结了下给需要的人或是下次自己再次用到的时候以参考。
首先看一个基础的侧边栏案例
!DOCTYPE html
htmlheadmeta charsetutf-8title侧边栏/titlelink relstylesheet typetext/css hrefhttps://www.jeasyui.com/easyui/themes/default/easyui.csslink relstylesheet typetext/css hrefhttps://www.jeasyui.com/easyui/themes/icon.csslink relstylesheet typetext/css hrefhttps://www.jeasyui.com/easyui/themes/color.csslink relstylesheet typetext/css hrefhttps://www.jeasyui.com/easyui/demo/demo.cssscript typetext/javascript srchttps://code.jquery.com/jquery-1.9.1.min.js/scriptscript typetext/javascript srchttps://www.jeasyui.com/easyui/jquery.easyui.min.js/script/headbody!-- 侧边菜单 --h2Basic SideMenu/h2pCollapse the side menu to display the main icon./pdiv stylemargin:20px 0;a hrefjavascript:; classeasyui-linkbutton onclicktoggle()Toggle/a/divdiv idsm classeasyui-sidemenu data-optionsdata:data, onSelect: onSideMenuSelect/divscript typetext/javascriptvar data [{text: Item1,iconCls: icon-sum,state: open,children: [{text: Option1url: 关联网页路径},{text: Option2},{text: Option3,children: [{text: Option31url: 关联网页路径},{text: Option32url: 关联网页路径}]}]},{text: Item2,iconCls: icon-more,children: [{text: Option4,url:关联网页路径},{text: Option5,url:关联网页路径},{text: Option6,url:关联网页路径}]}];function toggle(){var opts $(#sm).sidemenu(options);$(#sm).sidemenu(opts.collapsed ? expand : collapse);opts $(#sm).sidemenu(options);$(#sm).sidemenu(resize, {width: opts.collapsed ? 60 : 200})}function onSideMenuSelect(item){}/script/body
/html
这是一个固定的菜单栏菜单已完全展示点击加载相对应的url内容。
观察属性有text名称iconCls图标url路径state状态折叠展开children子节点-属性与父节点一致这是最常用的其余的属性暂不启用不一一叙述。
那么首先要有一个菜单对象包含这些属性
public class SidemenuModel{public string text { set; get; } //titlepublic string iconCls { set; get; } //图标public string url { set; get; } //路径public string state { set; get; } //状态 open 展开折叠public ListSidemenuModel children null;}
然后设置配置文件其中配置文件类型太多XML,JSON.DEF......根据自己擅长方向来最终能正确获取到想要的数据即可
?xml version1.0 encodingGBK standaloneyes?
SIDEMENU_LISTSIDEMENU textFname iconClsicon-mp url stateopen show1CHILDREN textCname iconClsicon-search url../**/*** show1//SIDEMENU。。。
/SIDEMENU_LIST
这是一个xml配置打个样加了一个show属性区分哪些是需要的菜单
剩下的就是读取与缓存了。。这一步根据自己擅长来。
最终HTML
!DOCTYPE html
htmlheadmeta charsetutf-8title侧边栏/titlelink relstylesheet typetext/css hrefhttps://www.jeasyui.com/easyui/themes/default/easyui.csslink relstylesheet typetext/css hrefhttps://www.jeasyui.com/easyui/themes/icon.csslink relstylesheet typetext/css hrefhttps://www.jeasyui.com/easyui/themes/color.csslink relstylesheet typetext/css hrefhttps://www.jeasyui.com/easyui/demo/demo.cssscript typetext/javascript srchttps://code.jquery.com/jquery-1.9.1.min.js/scriptscript typetext/javascript srchttps://www.jeasyui.com/easyui/jquery.easyui.min.js/script/headbody!-- 侧边菜单 --h2Basic SideMenu/h2pCollapse the side menu to display the main icon./pdiv stylemargin:20px 0;a hrefjavascript:; classeasyui-linkbutton onclicktoggle()Toggle/a/divdiv idsm classeasyui-sidemenu /divscript typetext/javascript$(function () {InitTree();})function InitTree() {$.ajax({url: /BasicMain/GetSidemenuList,type: post,async: false,success: function (data) {$(#sm).sidemenu({data: data,onSelect: onSideMenuSelect,border: false});}});}function toggle(){var opts $(#sm).sidemenu(options);$(#sm).sidemenu(opts.collapsed ? expand : collapse);opts $(#sm).sidemenu(options);$(#sm).sidemenu(resize, {width: opts.collapsed ? 60 : 200})}function onSideMenuSelect(item){//业务处}/script/body
/html
按照上述步骤基本上就搞定了加载配置菜单。全是硬货一目了然。散花。
