jQuery Easyui melaksanakan layout_jquery kiri dan kanan-tutorial js-php.cn

jQuery Easyui melaksanakan layout_jquery kiri dan kanan

WBOY

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

asal

2128 orang telah melayarinya

Pengenalan EasyUI

easyui ialah koleksi pemalam antara muka pengguna berdasarkan jQuery.

easyui menyediakan fungsi yang diperlukan untuk mencipta aplikasi JavaScript yang moden, interaktif.

Menggunakan easyui, anda tidak perlu menulis banyak kod Anda hanya perlu menulis beberapa teg HTML mudah untuk menentukan antara muka pengguna.

easyui ialah rangka kerja lengkap yang menyokong halaman web HTML5 dengan sempurna.

easyui menjimatkan masa dan skala pembangunan web anda.

easyui sangat ringkas tetapi berkuasa.

Dalam proses pembangunan sistem pengurusan bahagian belakang, reka letak atas dan kiri ialah kaedah reka letak halaman yang paling biasa Sekarang mari kita lihat cara cepat membina rangka kerja halaman yang boleh digunakan menggunakan easyui, rangka kerja bahagian hadapan jquery.

1. Perkenalkan fail yang diperlukan oleh easyui ke dalam halaman

<%-- 加载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>

Salin selepas log masuk

2. Bina struktur html yang diperlukan dalam bahagian badan halaman

<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>

Salin selepas log masuk

Satu perkara yang perlu diperhatikan di sini: apabila easyui menggunakan reka letak, utara dan selatan perlu menentukan ketinggian, barat dan timur perlu menentukan lebar, dan tengah akan menyesuaikan diri secara automatik dengan ketinggian dan lebar.

3. Gunakan js untuk memulakan komponen easyui

Saya secara peribadi mengesyorkan menggunakan kod js untuk memulakan komponen easyui dan bukannya menggunakan atribut pilihan data dalam teg easyui. Kerana untuk pembangun bahagian belakang, menulis kod js mungkin lebih biasa daripada menulis teg html, dan ini menjadikan kod html lebih ringkas.

<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>

Salin selepas log masuk

Format 4.json diperlukan oleh komponen easyui-tree

Format penghantaran yang digunakan oleh easyui ialah json, yang mempunyai sekatan ketat pada format kandungan json, jadi sila beri perhatian untuk menyemak api

[{
"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"
}
}]
}]
}]

Salin selepas log masuk

Dengan cara ini, kami menggunakan easyui untuk melengkapkan reka letak kiri dan kanan yang ringkas.

Di atas adalah kandungan yang berkaitan dengan pelaksanaan jQuery Easyui bagi reka letak kiri dan kanan yang dikongsi oleh editor saya harap ia akan membantu semua orang.