Jq-模拟最大化最小化关闭
2010-05-27 11:14
148 查看
这个没什么技术含量,slideup,and slidedown的用法,其它是力图最简洁的css排版
代码
*{margin:0;padding:0;font-size:12px;}
input{width:120px;height:30px;cursor:pointer;}
#note{position:absolute;width:400px;margin-top:20px;background:#eee;border:1px solid #ccc;left:40%;z-index:9999;display:none;}
#note h1{height:30px;line-height:30px;text-indent:1em;background:#EFF7FF;border-bottom:1px solid #96C2F1;}
#note h1 span{float:right;}
#note h1 span a{margin-right:5px;}
#content{padding:20px;background:#FAFCFD;}
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>豪情</title>
<style>
*{margin:0;padding:0;font-size:12px;}
input{width:120px;height:30px;cursor:pointer;}
#note{position:absolute;width:400px;margin-top:20px;background:#eee;border:1px solid #ccc;left:40%;z-index:9999;display:none;}
#note h1{height:30px;line-height:30px;text-indent:1em;background:#EFF7FF;border-bottom:1px solid #96C2F1;}
#note h1 span{float:right;}
#note h1 span a{margin-right:5px;}
#content{padding:20px;background:#FAFCFD;}
</style>
$(function(){
$('input').click(function(){
$('#note').show();
})
$('#min').click(function(){
$('#content').slideUp();
});
$('#max').click(function(){
$('#content').slideDown();
});
$('#closed').click(function(){
$('#note').hide();
});
});
</head>
<body>
<div id="note">
<h1><span><a href="javascript:///" id="min">最小化</a><a href="javascript:///" id="max">最大化</a><a href="javascript:///" id="closed">关闭</a></span>sdf</h1>
<div id="content">
<a href="http://jikey.cnblogs.com" target="_blank">豪情</a>
</div>
</div>
<input type="button" value="点我" />
</body>
</html>
运行代码
代码
*{margin:0;padding:0;font-size:12px;}
input{width:120px;height:30px;cursor:pointer;}
#note{position:absolute;width:400px;margin-top:20px;background:#eee;border:1px solid #ccc;left:40%;z-index:9999;display:none;}
#note h1{height:30px;line-height:30px;text-indent:1em;background:#EFF7FF;border-bottom:1px solid #96C2F1;}
#note h1 span{float:right;}
#note h1 span a{margin-right:5px;}
#content{padding:20px;background:#FAFCFD;}
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>豪情</title>
<style>
*{margin:0;padding:0;font-size:12px;}
input{width:120px;height:30px;cursor:pointer;}
#note{position:absolute;width:400px;margin-top:20px;background:#eee;border:1px solid #ccc;left:40%;z-index:9999;display:none;}
#note h1{height:30px;line-height:30px;text-indent:1em;background:#EFF7FF;border-bottom:1px solid #96C2F1;}
#note h1 span{float:right;}
#note h1 span a{margin-right:5px;}
#content{padding:20px;background:#FAFCFD;}
</style>
$(function(){
$('input').click(function(){
$('#note').show();
})
$('#min').click(function(){
$('#content').slideUp();
});
$('#max').click(function(){
$('#content').slideDown();
});
$('#closed').click(function(){
$('#note').hide();
});
});
</head>
<body>
<div id="note">
<h1><span><a href="javascript:///" id="min">最小化</a><a href="javascript:///" id="max">最大化</a><a href="javascript:///" id="closed">关闭</a></span>sdf</h1>
<div id="content">
<a href="http://jikey.cnblogs.com" target="_blank">豪情</a>
</div>
</div>
<input type="button" value="点我" />
</body>
</html>
运行代码
相关文章推荐
- 将ubuntu的最小化,最大化,关闭按钮改回右边的步骤
- form隐藏最大化,显示最小化、关闭+程序界面不能调整大小
- Java-如何去掉JFrame上的最大化最小化和关闭按钮(转)
- 在mfc中,设置一个隐藏菜单栏,工具栏,状态栏,最大化、最小化、关闭按钮的窗体
- 最大化/最小化/关闭窗口代码集锦
- ubuntu有时可能会出现窗口突然没有了“关闭”“最小化”“最大化“按钮
- C# WinForm开发系列之自定义无边框窗体(最大化,最小化,关闭,拉伸和移动的相关知识)
- C# WinForm 最大化、最小化、关闭按钮事件的拦截
- 修改Ubuntu窗口最小化,最大化,关闭按钮的位置
- QDialog 添加最大化、最小化按钮和关闭按钮,并且要正常显示
- winform 窗体关闭按钮禁用、不显示最大化、最小化、关闭按钮 分类: WinForm 2014-12-22 16:09 82人阅读 评论(0) 收藏
- 最小化,最大化,关闭
- 使C# 窗体的关闭按钮、最小化、最大化按钮不可用
- 最大化、最小化和关闭按钮
- C# Winform实现捕获窗体最小化、最大化、关闭按钮事件的方法,可通过重写WndProc来实现
- (转)WPF中让窗体不显示最大化,最小化,关闭按钮
- QT实现无边框窗体的最小化,最大化/还原,关闭,拖动和双击最大化等功能
- VC中如何让子对话框响应最大化、最小化、关闭等系统消息
- 关于右键菜单实现子窗口最大化,最小化,还原和关闭的小感想
- 窗口右下角弹出信息(二)最大化、最小化、关闭