jQuery Easyui implementiert links und rechts layout

jQuery Easyui implementiert links und rechts layout_jquery

WBOY

Freigeben： 2016-05-16 15:17:52

Original

2139 Leute haben es durchsucht

EasyUI-Einführung

easyui ist eine Sammlung von Benutzeroberflächen-Plug-ins basierend auf jQuery.

easyui bietet die notwendige Funktionalität zum Erstellen moderner, interaktiver JavaScript-Anwendungen.

Mit easyui müssen Sie nicht viel Code schreiben. Sie müssen nur einige einfache HTML-Tags schreiben, um die Benutzeroberfläche zu definieren.

easyui ist ein vollständiges Framework, das HTML5-Webseiten perfekt unterstützt.

easyui spart Zeit und Umfang bei Ihrer Webentwicklung.

easyui ist sehr einfach, aber leistungsstark.

Bei der Entwicklung von Backend-Managementsystemen sind die oberen und linken Layouts die gebräuchlichsten Seitenlayoutmethoden. Schauen wir uns nun an, wie man mit easyui, dem JQuery-Frontend-Framework, schnell ein verwendbares Seitenframework erstellt.

1. Fügen Sie die von easyui benötigten Dateien in die Seite ein

<%-- 加载easyui的样式文件，bootstrap风格 --%>
<link href="${ctx }/css/themes/bootstrap/easyui.css" rel="stylesheet">
<link href="${ctx }/css/themes/icon.css" rel="stylesheet">
<%-- 加载jquery和easyui的脚本文件 --%>
<script src="${ctx }/js/jquery-easyui-../jquery.min.js"></script>
<script src="${ctx }/js/jquery-easyui-../jquery.easyui.min.js"></script>
<script src="${ctx }/js/jquery-easyui-../locale/easyui-lang-zh_CN.js"></script>

Nach dem Login kopieren

2. Erstellen Sie die erforderliche HTML-Struktur im Hauptteil der Seite

<body>
<div id="home-layout">
<!-- 页面北部，页面标题 -->
<div data-options="region:'north'" style="height:50px;">
<!-- add your code -->
</div>
<!-- 页面西部，菜单 -->
<div data-options="region:'west',title:'菜单栏'" style="width:200px;">
<div class="home-west">
<ul id="home-west-tree"></ul>
</div>
</div>
<!-- 页面中部，主要内容 -->
<div data-options="region:'center'">
<div id="home-tabs">
<div title="首页">
<h2 style="text-align: center">欢迎登录</h2>
</div>
</div>
</div>
</div>
</body>

Nach dem Login kopieren

Eines ist hier zu beachten: Wenn easyui das Layout verwendet, müssen Nord und Süd die Höhe angeben, West und Ost müssen die Breite angeben und die Mitte passt sich automatisch an Höhe und Breite an.

3. Verwenden Sie js, um die easyui-Komponente zu initialisieren

Ich persönlich empfehle, zum Initialisieren von EasyUI-Komponenten JS-Code zu verwenden, anstatt das Attribut data-options im EasyUI-Tag zu verwenden. Denn für Backend-Entwickler ist das Schreiben von JS-Code möglicherweise vertrauter als das Schreiben von HTML-Tags, was den HTML-Code prägnanter macht.

<script>
$(function(){
/*
* 初始化layout
*/
$("#home-layout").layout({
//使layout自适应容器
fit: true
});
/*
* 获取左侧菜单树，并为其节点指定单击事件
*/
$("#home-west-tree").tree({
　　　　//加载菜单的数据，必需
url: "${ctx }/pages/home-west-tree.json",
method: "get",
　　　　//是否有层次线
lines: true,
　　　　//菜单打开与关闭是否有动画效果
animate: true,
　　　　//菜单点击事件
onClick: function(node){
if(node.attributes && node.attributes.url){
　　　　　　　　　//打开内容区的tab，代码在其后
addTab({
url: "${ctx }/" + node.attributes.url,
title: node.text
});
}
}
});
　　/*
* 初始化内容区的tabs
*/
$("#home-tabs").tabs({
fit : true,
　　　　//tab页是否有边框
border : false
});})
</script>
<script>
/*
* 在内容区添加一个tab
*/
function addTab(params){
var t = $("#home-tabs");
var url = params.url;
var opts = {
title: params.title,
closable: true,
href: url,
fit: true,
border: false
};
//如果被选中的节点对应的tab已经存在，则选中该tab并刷新内容
//否则打开一个新的tab
if(t.tabs("exists", opts.title)){
var tab = t.tabs("select", opts.title).tabs("getSelected");
t.tabs("update", {
tab: tab,
options: opts
});
}else{
t.tabs("add", opts);
}
}
</script>

Nach dem Login kopieren

4.json-Format für die Easyui-Tree-Komponente erforderlich

Das von easyui verwendete Übertragungsformat ist JSON, für das strenge Einschränkungen hinsichtlich des Formats von JSON-Inhalten gelten. Achten Sie daher bitte darauf, die API zu überprüfen

[{
"text":"区域管理",
"attributes":{
"url":"pages/consume/area/areaList.jsp"
}
},{
"text":"预约信息管理",
"children":[{
"text":"商户预约信息查询",
"attributes":{
"url":"/pages/consume/reservation/merchantReservation/merchantReservationList.jsp"
}
}]
},{
"text":"准入申请管理",
"children":[{
"text":"商户准入申请",
"state":"closed",
"children":[{
"text":"商户待处理申请",
"attributes":{
"url":"waterAply.do&#63;method=toList&channelType=1&handleFlag=aply_wait"
}
},{
"text":"商户审批中申请",
"attributes":{
"url":"waterAply.do&#63;method=toList&channelType=1&handleFlag=aply_current"
}
},{
"text":"商户审批通过申请",
"attributes":{
"url":"waterAply.do&#63;method=toList&channelType=1&handleFlag=aply_pass"
}
},{
"text":"商户被拒绝申请",
"attributes":{
"url":"waterAply.do&#63;method=toList&channelType=1&handleFlag=aply_refuse"
}
}]
}]
},{
"text":"准入审批管理",
"children":[{
"text":"商户审批管理",
"state":"closed",
"children":[{
"text":"当前任务",
"children":[{
"text":"商户当前初审任务",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalTrial.jsp"
}
},{
"text":"商户当前复审任务",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalRetrial.jsp"
}
}]
},{
"text":"商户已完成任务",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalDone.jsp"
}
},{
"text":"商户不通过任务",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalRefuse.jsp"
}
}]
}]
}]

Nach dem Login kopieren

Auf diese Weise haben wir easyui verwendet, um ein einfaches Links-Rechts-Layout zu erstellen.

Das Obige ist der vom Herausgeber geteilte Inhalt im Zusammenhang mit der jQuery Easyui-Implementierung. Ich hoffe, dass er für alle hilfreich ist.