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

随机推荐

基于Maven的SpringBoot项目实现热部署的两种方式
转载:http://blog.csdn.net/tengxing007/article/details/72675168 前言 JRebel是JavaEE中比较流行的热部署插件,可快速实现热部署,节省 ...
模板：什么是Traits
Traits不是一种语法特性,而是一种模板编程技巧.Traits在C++标准库,尤其是STL中,有着不可替代的作用. 如何在编译期间区分类型下面我们看一个实例,有四个类,Farm.Worke ...
UIScreenAdaptive
using UnityEngine; namespace Com.Xyz.UI { [ExecuteInEditMode] [RequireComponent(typeof(UIRoot))] pub ...
时间见证着—eternal life
上帝并不是这么公平的爱每个人,祂会多爱那些在困难.痛苦.悔恨中的人一点点.因为在那个当下,他们比一般人更需要知道上帝对他们的爱. 开通空间:http://imgcache.qq.com/qzone ...
Linux经常使用命令(十五) - which
我们常常在linux要查找某个文件,但不知道放在哪里了.能够使用以下的一些命令来搜索: which 查看可运行文件的位置. whereis 查看文件的位置. locate 配合数据库查看文件位置 ...
最小生成树之Kruskal算法和Prim算法
依据图的深度优先遍历和广度优先遍历,能够用最少的边连接全部的顶点,并且不会形成回路. 这样的连接全部顶点并且路径唯一的树型结构称为生成树或扩展树.实际中.希望产生的生成树的全部边的权值和最小,称之为最 ...
红茶一杯话Binder （传输机制篇_下）
红茶一杯话Binder (传输机制篇_下) 侯亮 1 事务的传递和处理从IPCThreadState的角度看,它的transact()函数是通过向binder驱动发出BC_TRANSACTION语 ...
for zip
private void zip(ZipOutputStream out, File file, String base) { try { if (file.isDirectory()) { File ...
217. Contains Duplicate【easy】
217. Contains Duplicate[easy] Given an array of integers, find if the array contains any duplicates. ...
微信小程序的目录结构解剖
在微信小程序当中,我们看到有: .js后缀文件,.json后缀文件,.wxss后缀文件,.wxml后缀文件 .js后缀文件就是我们写的普通的js文件 .json后缀文件就是小程序的配置文件,比如:wi ...

Jqurey实现相似EasyUI的页面布局

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

随机推荐

热门专题