jQueryEasyUi实战教程之布局篇资源-CSDN文库

114 浏览量 2020-11-23 05:35:05 上传评论收藏 86KB PDF 举报

资源推荐

资源详情

资源评论

jQuery EasyUi实战教程之布局篇实战教程之布局篇

jQuery EasyUI Layout是一种基于jQuery的布局框架，今天初次使用Jquery EasyUi，简单的做了个布局页面感觉还不错，给大家分享一下，就是不知道Jquery

EasyUi浏览器兼容性怎么样。

最后效果图如下：

使用Jquery EasyUi开发之前首先要引用Jquery EasyUi的Js和Css文件，引用如下：

<script src="../jquery.min.js" type="text/javascript"></script>

<script src="../jquery.easyui.min.js" type="text/javascript"></script>

<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />

<link href="../themes/icon.css" rel="stylesheet" type="text/css" />

OK，下面就开始我们的布局。

一、使用布局面板进行整体布局，直接贴代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>LayOut</title>

<script src="../jquery.min.js" type="text/javascript"></script>

<script src="../jquery.easyui.min.js" type="text/javascript"></script>

<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />

<link href="../themes/icon.css" rel="stylesheet" type="text/css" />

<script language="JavaScript">

$(document).ready(function () {

});

</script>

<style>

.footer {

width: 100%;

text-align: center;

line-height: 35px;

}

.top-bg {

background-color: #d8e4fe;

height: 80px;

}

</style>

</head>

<body class="easyui-layout">

<div region="north" border="true" split="true" style="overflow: hidden; height: 80px;">

<div class="top-bg"></div>

</div>

<div region="south" border="true" split="true" style="overflow: hidden; height: 40px;">

<div class="footer">版权所有：<a href="http://www.kwstu.com">酷网工作室</a></div>

</div>

<div region="west" split="true" title="导航菜单" style="width: 200px;">

</div>

<div id="mainPanle" region="center" style="overflow: hidden;">

</div>

</body>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38665449

粉丝: 8
资源: 963

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip