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

随机推荐

How Tomcat Works 读书笔记八加载器上
Java的类加载器具体资料见 http://blog.csdn.net/dlf123321/article/details/39957175 http://blog.csdn.net/dlf1233 ...
mysql 5.7.13 安装配置方法(linux)-后期部分运维
mysql 5.7.13 安装配置方法图文教程(linux) 学习了:https://www.cnblogs.com/zhao1949/p/5947938.html /usr/local/mysql是 ...
云计算之路-阿里云上-十字路口：阿里云SLB故障
2013年7月24日,18:20~18:50左右,处于阿里云云服务最前沿的SLB(负载均衡)出现故障,造成了网站不能正常访问(由于是最前沿,这次连502也看不到了). 在大家对昨日RDS故障带来的麻烦 ...
java动态载入指定的类或者jar包反射调用其方法
序言有时候.项目中会用到java动态载入指定的类或者jar包反射调用其方法来达到模块的分离,使各个功能之间耦合性大大减少,更加的模块化.代码利用率更高.模式中的代理模式就用到java的这一机制. 下 ...
怎样用Google APIs和Google的应用系统进行集成(4)----获得Access Token以通过一些Google APIs的OAuth2认证
在上篇文章中: "怎样用Google APIs和Google的应用系统进行集成(3)----调用发现Google APIs的RESTful的服务"一文中,我们直接用jdk的java ...
HTTP——请求和响应格式
HTTP请求格式:<request-line><headers><blank line>[<request-body>]说明:第一行必须是一个请求行(r ...
lodash kebabCase
_.kebabCase([string='']) 转换字符串为 kebab case. _.kebabCase('Foo Bar'); // => 'foo-bar' _.kebabCase(' ...
Python基础--人们一些最爱的标准库(random time)
Python继续! random 包括返回随机数的函数. 这里跟C++一样,产生的是伪随机数,并非全然随机数. random中一些重要的函数: random() 返回0<n<=1的随机数n ...
C语言-gdb调试工具详解
回车重复上一次命令产生可调试的可执行文件:gcc -g main.c -o main, 必须加上-g选线, 表示在可执行文件中加入源文件信息, 但并不是将源文件嵌入可执行文件, 所以在调试时必须保 ...
angularJS学习笔记（二）
前言首先,了解一下ng的一些概念: module 代码的组织单元,其它东西都是定义在具体的模块中的. app 应用业务,需要多个模块的配合完成. service 仅在数据层面实现特定业务功能的代码 ...

Jqurey实现相似EasyUI的页面布局

Jqurey实现相似EasyUI的页面布局的更多相关文章

随机推荐

热门专题