easyui 표준 레이아웃 실현

본 고 는 easyUI 프레임 워 크 가 표준 페이지 레이아웃 을 어떻게 구축 하 는 지 기록 하고 자 합 니 다.여기 서 표준 레이아웃 은 흔히 볼 수 있 는 왼쪽 위 에 있 는 레이아웃 방식 입 니 다.윗부분 은 헤더 정보 등 을 보 여 주 는 데 사 용 됩 니 다.왼쪽 사례 로 메뉴 를 보 여 줍 니 다.중간 구역 은 왼쪽 메뉴 를 클릭 할 때 중간 구역 에 tab 페이지 를 새로 만들어 정 보 를 보 여 줍 니 다. OA

OA , springMVC+Spring+Mybaties+Activiti

$(function () { // $("#tree").tree({ url : "<%=basePath%>/system/menulist.do", lines : true, onBeforeExpand:function(node){ $('#tree').tree('options').url = "<%=basePath%>/system/menulist.do?pid=" + node.id; }, onClick : function (node) { if (node.attributes) { Open(node.text, "<%=basePath%>"+node.attributes.url); } } }); // center , tab function Open(text, url) { if ($("#tabs").tabs('exists', text)) { $('#tabs').tabs('select', text); } else { $('#tabs').tabs('add', { title : text, closable : true, content : createFrame(url) }); } } // tabs $("#tabs").tabs({ onContextMenu : function (e, title) { e.preventDefault(); $('#tabsMenu').menu('show', { left : e.pageX, top : e.pageY }).data("tabTitle", title); } }); // menu onClick $("#tabsMenu").menu({ onClick : function (item) { CloseTab(this, item.name); } }); // function CloseTab(menu, type) { var curTabTitle = $(menu).data("tabTitle"); var tabs = $("#tabs"); if (type === "close") { tabs.tabs("close", curTabTitle); return; } var allTabs = tabs.tabs("tabs"); var closeTabsTitle = []; $.each(allTabs, function () { var opt = $(this).panel("options"); if (opt.closable && opt.title != curTabTitle && type === "Other") { closeTabsTitle.push(opt.title); } else if (opt.closable && type === "All") { closeTabsTitle.push(opt.title); } }); for (var i = 0; i < closeTabsTitle.length; i++) { tabs.tabs("close", closeTabsTitle[i]); } } function createFrame(url) { var s = '<iframe name="mainFrame" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>'; return s; } });

 이 페이지 는 완전한 레이아웃 방식 입 니 다.

좋은 웹페이지 즐겨찾기