Jqurey实现相似EasyUI的页面布局
截图例如以下：（可通过移动中间蓝色的条。来改变左右两边div的宽度）
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWFuZ21pbmd4aW5nOTgw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
详细实现代码例如以下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default10.aspx.cs" Inherits="Default10" %> <!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 id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="jQuery 2.0.3.js"></script> <style type="text/css">
.highlightTextSearch
{
background-color: Red;
}
a:hover
{
color: Red;
}
.style2
{
width: 1000px;
}
.div
{
scrollbar-face-color: #DCDCDC; /* 游标的颜色 */
scrollbar-shadow-color: #99BBE8; /*游标边框的颜色*/
scrollbar-highlight-color: #FF3300; /*游标高亮*/
scrollbar-3dlight-color: #9EBFE8;
scrollbar-darkshadow-color: #9EBFE8;
scrollbar-track-color: #DFE8F6; /*滑动条背景颜色*/
scrollbar-arrow-color: #6699FF; /*箭头颜色*/
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width: 1000px; height: auto" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 1000px; height: auto" align="center">
<table style="width: 1000px; height: auto">
<tr>
<td style="width: 1000px; height: 670px; overflow: auto" align="left" valign="top">
<div style="overflow: auto; width: 325px; height: 500px; float: left; background-color: Yellow"
id="movemodule" class="div">
</div>
<div id="arrowborder" style="float: left; width: 5px; height: 500px; background-color: Blue;
cursor: w-resize;">
</div>
<div id="rightframe" style="width: 660px; height: 500px; float: left; overflow: auto;
background-color: Aqua" class="div">
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width: 1000px; height: 70px; background-image: url('Images/OAbottom.bmp')"
align="center">
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var isDown = false;
var minwidth = 160;
var maxwidth = 800;
$("#arrowborder").mousedown(function ()
{
this.setCapture();
isDown = true;
$("body").css("cursor", "e-resize");
});
$("body").mouseup(function ()
{
this.releaseCapture();
isDown = false;
$("body").css("cursor", "default");
});
$("body").mousemove(function (event)
{
if (isDown) {
var _mx = event.clientX;
//var _my = event.clientY;
var _poin = $("#arrowborder").offset();
var _w = _mx - _poin.left;
var _lw = $("#movemodule").width();
var _rw = $("#rightframe").width();
if ((_lw + _w > minwidth && _w < 0) || (_lw + _w < maxwidth && _w > 0)) {
$("#movemodule").width(_lw + _w);
$("#rightframe").width(_rw - _w);
}
else {
if (_w > 0) {
$("#movemodule").width(maxwidth);
$("#rightframe").width(_rw - (maxwidth - _lw));
}
else {
$("#movemodule").width(minwidth);
$("#rightframe").width(_rw + (_lw - minwidth));
}
}
}
});
</script>
</form>
</body>
</html>
Jqurey实现相似EasyUI的页面布局的更多相关文章
- 前端框架 EasyUI （2）页面布局 Layout
在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...
- jquery-easyui实现页面布局和增删改查操作（SSH2框架支持）转载
http://blessht.iteye.com/blog/1069749/ 已注册:ooip 关联的csdn 前几天心血来潮用jquery-easyui+spring.struts2.hiberna ...
- EasyUI之Layout布局和Tabs页签的使用
1.JQuery EasyUI之LayOut布局 EasyUI是一款基于JQuery开发的前端框架,它集成很多漂亮的样式和相应的功能,大大方便了我们对前端开发的难度.对于web项目而言,主页面的一定是 ...
- 第二百零二节，jQuery EasyUI，Layout(布局)组件
jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个 ...
- Xamarin+Prism开发详解五：页面布局基础知识
说实在的研究Xamarin到现在,自己就没设计出一款好的UI,基本都在研究后台逻辑之类的!作为Xamarin爱好者,一些简单的页面布局知识还是必备的. 布局常见标签: StackLayout Abso ...
- CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- CSS3与页面布局学习总结（七）——前端预处理技术（Less、Sass、CoffeeScript、TypeScript）
CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...
- CSS3与页面布局学习总结（四）——页面布局大全
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- 【Android】纯代码创建页面布局（含异步加载图片）
开发环境:macOS 10.12 + Android Studio 2.2,MinSDK Android 5.1 先看看总体效果 本示例是基于Fragment进行的,直接上代码: [界面结构] 在 F ...
随机推荐
- ElasticSearch 获取分词的Token
用ES建好索引,有时候需要获取索引中的Token.ES提供了两个接口,链接如下: https://www.elastic.co/guide/en/elasticsearch/reference/1.6 ...
- vue总结介绍
转自(https://zhuanlan.zhihu.com/p/23078117) 模板语法 Vue 提供了一堆数据绑定语法. {{ text }} 文本插值 <div v-html=" ...
- Activemq消息确认机制 --转载
转自:http://blog.csdn.net/czp11210/article/details/47022639 ActiveMQ消息传送机制以及ACK机制详解 AcitveMQ是作为一种消息存 ...
- eclipse中egit插件使用(转)
1.eclipse和egit版本 eclipse使用的是kepler的SR1版,egit就是自带的那个版本,要详细的话,我就也只能把文件名贴出来了:eclipse-jee-kepler-SR1-win ...
- LInux——安装Apache
在安装Apache的httpd的时候经常会遇到: configure: error: APR not found . Please read the documentation. configure ...
- eval（data）和eval("("+data+")")的区别
如果data是字符串,使用eval("("+data+")")可以将其转换为json对象,和JSON.parse的功能一样.如果data是json对象,使用ev ...
- Pattern Recognition and Machine Learning 模式识别与机器学习
模式识别(PR)领域: 关注的是利⽤计算机算法⾃动发现数据中的规律,以及使⽤这些规律采取将数据分类等⾏动. 聚类:目标是发现数据中相似样本的分组. 反馈学习:是在给定的条件下,找到合适的动作, ...
- 常用Sql 标量值函数
1.汉字拼音首字母 /****** Object: UserDefinedFunction [dbo].[fnGetHzPY] Script Date: 08/16/2018 09:04:47 Des ...
- 配置Redmine的邮件通知功能
依据<Windows下安装Redmine 2.5.2不全然指南 >一文,我们搭建主要的 Redmine 平台.如今是时候做进一步的配置了. 作为一个项目管理平台,必须能够通知项目成员有关项 ...
- Android Studio 使用笔记：给包重命名~~有点水
很简单,选择需要重命名的包,按下 Shift + F6 这时候出现提示,选择 Rename package 输入新的包名,Refactor按钮会变亮,点击就可以了. 注意:这个是重命名一个包名,想做 ...