Jqurey는 left 및 right_jquery의 너비를 변경할 수 있는 EasyUI와 유사한 페이지 레이아웃을 구현합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Jqurey는 left 및 right_jquery의 너비를 변경할 수 있는 EasyUI와 유사한 페이지 레이아웃을 구현합니다.

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:42 PM

easyui페이지 레이아웃

스크린샷은 다음과 같습니다. (가운데 파란색 막대를 이동하여 왼쪽과 오른쪽에 있는 div의 너비를 변경할 수 있습니다.)

구체적인 구현 코드는 다음과 같습니다.

<%@ 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>

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

如何在Vue项目中使用第三方UI库进行页面布局Oct 08, 2023 am 08:38 AM

如何在Vue项目中使用第三方UI库进行页面布局Vue是一种流行的JavaScript框架，被广泛用于构建用户界面。在Vue项目中，我们常常需要使用第三方UI库来帮助我们快速布局和美化页面。本文将详细介绍如何在Vue项目中使用第三方UI库进行页面布局，并提供具体的代码示例。步骤1：安装第三方UI库首先，我们需要从npm安装所需的第三方UI库。在本文中，我们以E

easyui是jquery插件吗Jul 05, 2022 pm 06:08 PM

easyui是jquery插件。easyui是基于JQuery的一个前台ui界面的插件，用于帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。easyui是个完美支持HTML5网页的框架，可以帮助开发者节省网页开发的时间和规模。

Vue开发经验总结：解决页面布局和排版问题的实践Nov 22, 2023 am 10:25 AM

Vue是一种流行的JavaScript框架，被广泛应用于前端开发中。在使用Vue进行开发的过程中，我们经常会遇到一些页面布局和排版的问题。本文将总结一些我们在Vue开发中遇到的问题，并分享一些解决这些问题的实践经验。一、响应式布局在开发Web应用时，我们往往需要实现一个响应式布局，让页面在不同的设备上都能够良好地显示。Vue提供了很多解决方案，如Vue的响应

Vue开发经验总结：解决页面布局和响应式设计的技巧Nov 23, 2023 am 09:53 AM

Vue是一款流行的JavaScript框架，它为开发者提供了许多有用的工具来创建动态的单页应用程序（SPA）。但是在开发Vue应用程序时，设计合适的页面布局和响应式设计是非常重要的，因为这对用户体验和应用程序的总体性能有着很大的影响。在本文中，我们将介绍一些解决Vue页面布局和响应式设计问题的技巧。使用Flexbox和CSSGrid来设计布局Flexbox

使用PHP和jQuery EasyUI开发一个高效的后台管理系统Jun 27, 2023 pm 01:21 PM

随着互联网的发展，越来越多的企业需要开发一个高效的后台管理系统来管理和处理数据，为企业的发展提供有力的支持。在这样的背景下，PHP和jQueryEasyUI成为了非常流行的开发技术。PHP是一种广泛应用的服务器端脚本语言，具有开源、跨平台、易学易用等优点，并且拥有丰富的函数库和大量的开源框架，可以快速地搭建一个高效的后台管理系统。而jQueryEasyU

PHP开发中如何优化布局与响应式设计Jun 30, 2023 pm 03:00 PM

在当今互联网高速发展的时代，网页设计的优化已经成为开发者必备的技能之一。而随着移动设备的普及，响应式设计也变得越来越重要。在PHP开发中，如何优化页面布局和响应式设计成为了开发者的关注焦点。首先，页面布局的优化是提高用户体验的重要手段。一个好的页面布局能够让用户更加方便地浏览网页内容，提高用户留存率。在PHP开发中，可以通过以下几个方面来优化页面布局。首先是

分析绝对定位技术对页面布局的影响与特点Jan 23, 2024 am 08:47 AM

绝对定位技术对于页面布局的影响与特点分析引言：在网页设计中，准确地控制元素的位置和布局是非常重要的。CSS提供了多种定位机制，其中之一就是绝对定位（absolutepositioning）。绝对定位可以让我们精确地指定元素在网页中的位置，同时它也具有一些特点和影响。一、绝对定位的特点绝对定位脱离了正常的文档流绝对定位不会对其他元素产生布局的影响，它会将元素

PHP如何处理HTML模板和页面布局？Jul 01, 2023 am 10:46 AM

PHP作为一种流行的服务器端脚本语言，被广泛用于开发网页和网站。在网页开发中，HTML模板和页面布局是重要的组成部分。本文将探讨PHP如何处理HTML模板和页面布局。首先，HTML模板是一个网页的骨架，包含了网页的结构、布局和静态内容。在PHP中处理HTML模板有多种方法，下面介绍两种常用的方法。第一种方法是使用PHP本身的原生语法，将HTML代码直接嵌入到

See all articles

핫 AI 도구

뜨거운 도구

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.