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 ...
随机推荐
- python对solr进行查询、插入操作(GET\POST)
循环查询一个列表中词的个数: #coding=utf-8 import requests ls = [u'我', u'是', u'一个', u'天才', u'你', u'也是'] for item i ...
- 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-TwinCAT自带的找原点功能块MC_Home怎么用
对于相对编码器类型轴(包括虚拟轴),可以使用贝福提供的找原点功能块MC_Home. HomingMode是指机器在往前跑的时候(30单位/s的默认速度),当碰到阻挡,则会有一个布尔值从FALSE改 ...
- [转载]Android开发者必须深入学习的10个应用开源项目
[转载]Android开发者必须深入学习的10个应用开源项目 原文地址:Android开发者必须深入学习的10个应用开源项目(http://blog.sina.com.cn/s/blog_7b8a63 ...
- Android RecyclerView 使用解析
RecyclerView出现已经有一段时间了,相信大家肯定不陌生了,大家能够通过导入support-v7对其进行使用. 据官方的介绍,该控件用于在有限的窗体中展示大量数据集.事实上这样功能的控件我们 ...
- libevent2源码分析之五：关键的调用链
用一个调用链来表示函数调用的流程,看起来更直观.根据上面的分析,总结了一些重要的调用链. 初始化 event_base_new event_base_new_with_config min_heap_ ...
- 初学spring（一）
1.spring 在ssh 中所处的位置 struts 是web框架(jsp,action,actionform) hibernate 是orm框架,处于数据持久层 spring 是容器框架,配置be ...
- 请求大神，C#如何截取字符串中指定字符之间的部分 按指定字符串分割 一分为二 c# 去除字符串中的某个已知字符
string stra = "abcdefghijk";string strtempa = "c";string strtempb = "j" ...
- Mac和Windows上Android Studio经常使用的快捷键
小编整理了一些Mac和Windows上超有用的Android Studio经常使用的快捷键. Ctrl(Command)+Y 删除行 Ctrl(Command)+Z 倒退 Ctrl(Command)+ ...
- Spark学习(一) 基本操作
先来一个简单的spark小程序,这是官网上的小样例,目的就是统计spark以下的README文档中包括字母a和字母b的个数,然后 打印,代码例如以下: object BasicStandaloneAp ...
- SQl查询数据库表名、表的列名、数据类型、主键
1.获取所有数据库名: 2.Select Name FROM Master..SysDatabases order by Name 3. 4.2.获取所有表名: 5. (1) ...