wb1991wb
- 浏览: 151751 次
- 来自: 上海
-
文章分类
最新评论
-
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 399笔试面试经常涉及各种 ... -
JAVASCRIPT 原型
2015-07-17 15:09 652理解JavaScript的原型链和继承 Table of ... -
JS继承机制的实现
2015-02-05 14:04 1176+function(exports){ // ... -
Mootools系列教程
2014-03-06 17:29 680一周学会Mootools 1.4中文教程:序论一周学会Moot ... -
前端性能优化的14个规则
2013-12-06 13:13 821作为一个半前端工程师，而且只会写点HTML5和CSS3的“假 ... -
CMD 模块定义规范
2013-08-02 14:33 789在 Sea.js 中，所有 JavaScript 模块都遵循 ... -
【叨、校长】TetrisGrid：基于ExtJs Grid实现的一个俄罗斯方块
2013-01-12 00:25 2811TetrisGrid--Master、Dao 在线演 ... -
【转】JS去空格
2013-01-06 17:25 1039我遇到一个问题，就是需要去除一个字符串的所有空格，换行等，只 ... -
【叨、校长】CopyGrid v1.1，基于ExtJs的可复制Excel数据的GridPanel
2012-12-29 21:53 1319CopyGrid v1.1; 基于Extjs 3.x版 ... -
【叨、校长】ITEye首发CopyGrid，基于ExtJs的可复制Excel数据的GridPanel
2012-12-23 22:58 1280基于Extjs 3.x版本编写的一个可直接复制、粘贴Excel ... -
【叨、校长】ExtJS Portal插件，基于Cookie添加保存位置状态功能
2012-12-23 14:52 1338该插件基于ExtJs 3.X版本的第三方UX Portal插件 ... -
【转】javascript原型设计模式
2012-12-04 17:31 939在JavaScript中创建对象，对于JavaScript开发 ... -
【叨、校长】一个基于Extjs、Pushlet美轮美奂的Web聊天室
2012-11-08 21:47 2851本实例基于pushlet官方实例。通俗易懂、老少皆宜! --叨 ... -
【叨、校长】Extjs 动态表头GridPanel
2012-11-06 09:59 1193var columnArray=["2012-01& ... -
【转】高性能javascript
2012-10-29 17:26 1018高性能JavaScript 一下内容是转载的，内容 ... -
【叨、校长】Ext 下拉树插件_ComboTree_xz
2012-08-10 21:42 1693本插件继承于ComboBox！通俗易懂、老少皆宜、不论男女！- ... -
【叨、校长】Ext Window显示在最外层的方法
2012-08-08 16:01 1104方法：new top.Ext.Window({}); 就 ... -
【转】JS 时间类型详解
2012-08-02 14:13 1195Date (对象) Date 对象能够使你获得相对于国 ... -
【叨、校长】Extjs 双表头Grid
2012-07-26 19:53 2186本教程改自官方实例！通俗易懂、老少皆宜！---叨、校长 直接 ... -
【叨、校长】Extjs通过Ajax请求后台Struts2返回一个json对象
2012-06-17 10:40 2416首先：新建一个java web项目，添加struts2的支持， ...
相关推荐
自己制作的DIV模态窗口，点击弹出DIV窗口，后层页面屏蔽，实现模态窗口。需要用vs2010打开
范例使用SuperMap iClient 7C for JavaScript开发模式，实现改变地图DIV大小。
可拖动div边框改变大小的方法,jquery拖拽改变div大小效果，。。。。。。。。。。。。。。。。。。。。。。。。。
vue终极解决多个页面Echart随页面窗口大小而改变图形大小
一个很好用的javaScript写的小程序，可实现div的拖动、变形。解压后直接拷到程序中就可运行
Div放大效果的javascript源码
js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟...
拖拽并同时拖拽改变div大小暂无兼容性问题
手动拖动div改变窗口宽度大小 左中右三列拖拽
js实现 1.两列的左右拖动改变div大小 2.三列的左右拖动改变div大小 3.两行的上下拖动改变div大小 可用于各种框架 vue React Angular
DIV层拖动的实现，可改变大小.DIV层拖动的实现，可改变大小.
一个使用div来实现的模态窗口实例！打破windows的传统模态窗口！
选中复选框（可移动、可调整大小）后，打开的DIV具有移动/调整大小的功能(此时移动/调整大小快捷键可使用); 反之，不可移动/调整大小(此时移动/调整大小快捷键无效) 单选框默认居中打开选中，无论有无保存DIV位置和...
html5 div图片放大插件手机端图片放大预览效果 html5 div图片放大插件手机端图片放大预览效果 html5 div图片放大插件手机端图片放大预览效果 html5 div图片放大插件手机端图片放大预览效果
js加div 窗口拖动实现、js加div 窗口拖动实现、Ajax后台保存窗口属性值
普通控件、flash控件等随着窗体的大小变化大小而自动变化.rar
div模式窗口div模式窗口div模式窗口
lhgdialog DIV弹出窗口框架，基于JavaScript，它与Alert弹出窗口有着本质的区别，lhgdialog DIV弹出窗口是JS+CSS结合打造的产物，界面非常漂亮，无刷新弹出窗口。
手动拖动div改变窗口宽高大小
css+div自适应窗口宽度css+div自适应窗口宽度css+div自适应窗口宽度css+div自适应窗口宽度css+div自适应窗口宽度