wb1991wb
- 浏览: 157126 次
- 来自: 上海
-
文章分类
最新评论
-
wahahachuang5：
web实时推送技术使用越来越广泛，但是自己开发又太麻烦了，我觉 ...
使用 HTML5 WebSocket 构建实时 Web 应用 -
wb1991wb：
zjarcher 写道你这种方法，Dog是否还是Animate ...
JS继承机制的实现 -
zjarcher：
你这种方法，Dog是否还是Animate？如何判断？
JS继承机制的实现 -
liuxin0577：
rest已经写好了，用正常的项目也可以访问到返回值，但是放到这 ...
【叨、校长】PhoneGap+jQuery Mobile+Rest 访问远程数据 -
urboat29：
怎么没了下不了，求发邮箱1419335455@qq.com
【叨、校长】TetrisGrid：基于ExtJs Grid实现的一个俄罗斯方块
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<link rel="stylesheet" type="text/css"
href="ext3.4/resources/css/ext-all.css" />
<script type="text/javascript" src="ext3.4/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext3.4/ext-all.js"></script>
<style type="text/css">
#mydiv1{
background:"#00ffff";
}
</style>
<script type="text/javascript">
Ext.onReady(function(){
document.getElementById("mydiv1").innerHTML="";
var p1=createP("mydiv1");
document.getElementById("mydiv2").innerHTML="";
createP("mydiv2");
document.getElementById("mydiv3").innerHTML="";
createP("mydiv3");
document.getElementById("mydiv4").innerHTML="";
createP("mydiv4");
document.getElementById("mydiv5").innerHTML="";
createP("mydiv5");
document.getElementById("mydiv6").innerHTML="";
createP("mydiv6");
function createP(div){
var p=new Ext.Panel({
renderTo:div,
title:"测试"+div,
tools:[{
id:"minimize",
handler:function(a,b,c){
c.setWidth(document.body.clientWidth/3);
c.setHeight(document.body.clientHeight/2);
document.getElementById("mydiv1").style.display="";
document.getElementById("mydiv2").style.display="";
document.getElementById("mydiv3").style.display="";
document.getElementById("mydiv4").style.display="";
document.getElementById("mydiv5").style.display="";
document.getElementById("mydiv6").style.display="";
}
},{
id:"maximize",
handler:function(a,b,c){
c.setWidth(document.body.clientWidth);
c.setHeight(document.body.clientHeight);
if(div=="mydiv2"){
document.getElementById("mydiv1").style.display="none";
}else if(div=="mydiv3"){
document.getElementById("mydiv1").style.display="none";
document.getElementById("mydiv2").style.display="none";
}else if(div=="mydiv4"){
document.getElementById("mydiv1").style.display="none";
document.getElementById("mydiv2").style.display="none";
document.getElementById("mydiv3").style.display="none";
}else if(div=="mydiv5"){
document.getElementById("mydiv1").style.display="none";
document.getElementById("mydiv2").style.display="none";
document.getElementById("mydiv3").style.display="none";
document.getElementById("mydiv4").style.display="none";
}else if(div=="mydiv6"){
document.getElementById("mydiv1").style.display="none";
document.getElementById("mydiv2").style.display="none";
document.getElementById("mydiv3").style.display="none";
document.getElementById("mydiv4").style.display="none";
document.getElementById("mydiv5").style.display="none";
}
}
}],
width:document.body.clientWidth/3,
height:document.body.clientHeight/2,
html:"我是panel"
})
return p;
}
})
</script>
</head>
<body style="overflow:hidden;">
<div id="max_div" style="position:absolute;z-index:0;">
<table cellspacing="0">
<tr>
<td id="mydiv1" vertical-align="middle" align="center" >
<img src="images/loadmask.gif">
</td>
<td id="mydiv2" vertical-align="middle" align="center" >
<img src="images/loadmask.gif">
</td>
<td id="mydiv3" vertical-align="middle" align="center" >
<img src="images/loadmask.gif">
</td>
</tr>
<tr>
<td id="mydiv4" vertical-align="middle" align="center" >
<img src="images/loadmask.gif">
</td>
<td id="mydiv5" vertical-align="middle" align="center" >
<img src="images/loadmask.gif">
</td>
<td id="mydiv6" vertical-align="middle" align="center" >
<img src="images/loadmask.gif">
</td>
</tr>
</table>
</div>
<div id="max_div_up" style="position:absolute;z-index:0;border:1px solid red"></div>
<script type="text/javascript">
var mydiv1=document.getElementById("mydiv1");
var mydiv2=document.getElementById("mydiv2");
var mydiv3=document.getElementById("mydiv3");
var mydiv4=document.getElementById("mydiv4");
var mydiv5=document.getElementById("mydiv5");
var mydiv6=document.getElementById("mydiv6");
var mydiv_resize=function(){
mydiv1.style.width=document.body.clientWidth/3;
mydiv1.style.height=document.body.clientHeight/2;
mydiv2.style.width=document.body.clientWidth/3;
mydiv2.style.height=document.body.clientHeight/2;
mydiv3.style.width=document.body.clientWidth/3;
mydiv3.style.height=document.body.clientHeight/2;
mydiv4.style.width=document.body.clientWidth/3;
mydiv4.style.height=document.body.clientHeight/2;
mydiv5.style.width=document.body.clientWidth/3;
mydiv5.style.height=document.body.clientHeight/2;
mydiv6.style.width=document.body.clientWidth/3;
mydiv6.style.height=document.body.clientHeight/2;
}
mydiv_resize();
window.onresize=mydiv_resize;
function change(){
mydiv1.style.width=document.body.clientWidth;
mydiv1.style.height=document.body.clientHeight;
;
}
</script>
</body>
</html>
3
顶
顶
0
踩
踩
分享到：
发表评论
-
JS常用排序算法
2015-07-21 16:56 448笔试面试经常涉及各种 ... -
JAVASCRIPT 原型
2015-07-17 15:09 693理解JavaScript的原型链和继承 Table of ... -
JS继承机制的实现
2015-02-05 14:04 1237+function(exports){ // ... -
Mootools系列教程
2014-03-06 17:29 727一周学会Mootools 1.4中文教程:序论一周学会Moot ... -
前端性能优化的14个规则
2013-12-06 13:13 875作为一个半前端工程师，而且只会写点HTML5和CSS3的“假 ... -
CMD 模块定义规范
2013-08-02 14:33 826在 Sea.js 中，所有 JavaScript 模块都遵循 ... -
【叨、校长】TetrisGrid：基于ExtJs Grid实现的一个俄罗斯方块
2013-01-12 00:25 2903TetrisGrid--Master、Dao 在线演 ... -
【转】JS去空格
2013-01-06 17:25 1084我遇到一个问题，就是需要去除一个字符串的所有空格，换行等，只 ... -
【叨、校长】CopyGrid v1.1，基于ExtJs的可复制Excel数据的GridPanel
2012-12-29 21:53 1379CopyGrid v1.1; 基于Extjs 3.x版 ... -
【叨、校长】ITEye首发CopyGrid，基于ExtJs的可复制Excel数据的GridPanel
2012-12-23 22:58 1352基于Extjs 3.x版本编写的一个可直接复制、粘贴Excel ... -
【叨、校长】ExtJS Portal插件，基于Cookie添加保存位置状态功能
2012-12-23 14:52 1403该插件基于ExtJs 3.X版本的第三方UX Portal插件 ... -
【转】javascript原型设计模式
2012-12-04 17:31 990在JavaScript中创建对象，对于JavaScript开发 ... -
【叨、校长】一个基于Extjs、Pushlet美轮美奂的Web聊天室
2012-11-08 21:47 2925本实例基于pushlet官方实例。通俗易懂、老少皆宜! --叨 ... -
【叨、校长】Extjs 动态表头GridPanel
2012-11-06 09:59 1232var columnArray=["2012-01& ... -
【转】高性能javascript
2012-10-29 17:26 1072高性能JavaScript 一下内容是转载的，内容 ... -
【叨、校长】Ext 下拉树插件_ComboTree_xz
2012-08-10 21:42 1751本插件继承于ComboBox！通俗易懂、老少皆宜、不论男女！- ... -
【叨、校长】Ext Window显示在最外层的方法
2012-08-08 16:01 1178方法：new top.Ext.Window({}); 就 ... -
【转】JS 时间类型详解
2012-08-02 14:13 1276Date (对象) Date 对象能够使你获得相对于国 ... -
【叨、校长】Extjs 双表头Grid
2012-07-26 19:53 2239本教程改自官方实例！通俗易懂、老少皆宜！---叨、校长 直接 ... -
【叨、校长】Extjs通过Ajax请求后台Struts2返回一个json对象
2012-06-17 10:40 2462首先：新建一个java web项目，添加struts2的支持， ...
相关推荐
要实现改变大小，需要使用JavaScript来计算DIV层的大小和位置，并更新DIV层的样式。 在JavaScript中，可以使用onmousedown、onmousemove和onmouseup事件来捕捉鼠标事件。在onmousedown事件中，需要记录当前鼠标的...
标题中的“DIV可移动 可实现任意拖动放大缩小”是指一种使用JavaScript技术来实现的交互功能，允许用户在网页上自由地拖动、缩放HTML中的div元素。这一功能通常用于创建用户界面元素，如窗口、面板或者任何需要动态...
【DIV模态窗口实现】是一种常见的前端网页设计技术，它允许在不离开当前页面的情况下，弹出一个窗口显示额外的信息或功能。模态窗口通常用于登录、注册、提示信息、表单提交等场景，能够提供良好的用户体验，因为它...
要实现JavaScript改变地图`<div>`大小，你需要以下步骤： 1. **创建地图Div**：在HTML中，创建一个`<div>`元素，并为其分配一个唯一的ID，以便于JavaScript访问。例如： ```html <div id="mapDiv" style="width: ...
在网页开发中，"拖拽+拖拽改变div大小"是一种常见的交互设计，它允许用户通过鼠标拖动来调整div元素的尺寸。这种功能在创建可定制的布局、图形编辑工具或者任何需要用户自定义区域大小的应用中非常有用。本文将深入...
"Flash等控件随窗口大小而自动变化"这一主题涉及到Windows应用程序或Web应用程序中的动态布局和响应式设计概念。当用户调整应用程序窗口的大小时，控件能够自适应地改变尺寸，以保持界面的整洁和用户体验的流畅性。...
标题“Ext div拖动demo”指的是一个使用Ext JS框架实现的JavaScript示例，该示例展示了如何让HTML的<div>元素支持上下拖动功能。在Web开发中，动态交互是提高用户体验的重要一环，而拖放（Drag and Drop）功能正是...
可拖动div边框改变大小的方法,jquery拖拽改变div大小效果，。。。。。。。。。。。。。。。。。。。。。。。。。
总之，通过利用jQuery UI库中的Resizable和Draggable插件，我们可以轻松地实现在Web页面上拖动div的四个角来改变其大小的功能，同时也能方便地拖动div在限制范围内移动，极大地增强了用户的交互体验。
本主题探讨的是如何利用CSS和div实现网页内容的自适应窗口宽度，确保无论用户浏览器窗口大小如何，页面都能保持良好的显示效果。 首先，我们要理解`min-width`属性。在示例代码中，`.divGlobal`, `.DivTop`, `....
本文主要介绍如何使用JavaScript实现根据浏览器窗口大小动态调整网页文字大小的功能。该技术在实现网页响应式设计中具有重要意义，允许网页内容在不同尺寸的屏幕设备上都能保持良好的可读性和布局适应性。 首先，...
在这个“Div可拖动窗口，弹出提示消息窗口”的项目中，我们主要关注的是如何利用JavaScript来实现两个关键功能：一是使Div元素具备拖动和大小调整的能力，二是创建一个弹出的提示消息窗口，其效果类似于QQ的屏幕右下...
标题中的“8个点改变div大小js”是指利用JavaScript（可能结合JQuery库）来实现一个功能，允许用户通过拖动八个预定义的控制点来动态调整div元素的大小。这种技术在网页设计中非常实用，尤其是在创建可交互、自定义...
本资源“漂亮的div弹出窗口样式”提供了一种美观的弹出窗口设计，适用于网页中的各种提示、警告或者信息展示。通过解压文件并双击html页面，我们可以直接预览这个弹出窗口的效果。 首先，我们来详细了解一下div弹出...
Div放大效果的javascript源码
在模态窗口的实现中，`<div>`将作为弹出窗口的主要结构。 实现模态窗口的基本步骤如下： 1. 创建`<div>`：首先，我们需要在HTML文档中定义一个`<div>`，并为其添加一个唯一的ID，以便后续通过JavaScript选中它。...
在网页设计和开发中，`div`（Division）模式窗口是一种常见的布局技术，它通过HTML中的`<div>`标签来实现。`div`元素本质上是一个可样式的块级元素，可以容纳其他HTML元素，用于组织页面结构，实现复杂的网页布局。...
js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟...
在实现DIV层的自适应高度和宽度后，我们还需要监听窗口的resize事件，以便在窗口大小变化时更新DIV层的高度和宽度。我们可以使用以下代码来监听窗口的resize事件： ``` window.onresize = autoHeight; window....
"基于EXT的div拖动"是指利用EXTJS这一强大的JavaScript框架来实现这种功能。EXTJS是一个用于构建富客户端Web应用的前端框架，它提供了丰富的组件库、数据绑定机制以及强大的布局管理，使得开发者可以方便地创建出...