Chinaunix首页 | 论坛 | 博客

Nathing

首页　| 　博文目录　| 　关于我

mingwjj

  • 博客访问： 488279
  • 博文数量： 111
  • 博客积分： 3146
  • 博客等级： 中校
  • 技术积分： 939
  • 用 户 组： 普通用户
  • 注册时间： 2009-07-07 11:23
个人简介

Nathing

文章分类

全部博文（111）

文章存档

2016年（2）

2015年（1）

2014年（31）

2012年（2）

2011年（9）

2010年（36）

2009年（30）

我的朋友
最近访客
推荐博文
隐藏显示窗体

分类：

2010-11-14 22:11:24

隐藏显示窗体

function showwin()
{
    //找到窗口对应的div节点
    var winNode = $("#win");
    //让div显示出来
    //方法1:用jQuery修改css的值
    //winNode.css("display","block");
    //方法2:利用jQuery的show方法
    //winNode.show("slow");
    //方法3:利用jQuery的fadeIn
    winNode.fadeIn("slow");
}

function hide()
{
    //找到窗口对应的div节点
    var winNode = $("#win");
    //隐藏
    //方法1:
    //winNode.css("display","none");
    //方法2:利用jQuery的hide方法
    //winNode.hide("slow");
    //方法3:利用jQuery的fadeOut
    winNode.fadeOut("slow");
}


css:

/*id选择器*/
#win
{
    /*窗口有边框*/
    border: 1px red solid;
    /*希望窗口宽度和高度固定*/
    width: 300px;
    height: 200px;
    /*定位*/
    position: absolute;    
    top: 100px;
    left: 500px;
    /*窗口可见性*/
    display: none;
}

#title
{
    background-color: blue;
    color: yellow;
    /*控制标题栏的左内边距*/
    pading-left: 3px;
}

#content
{
    padding-left: 3px;
    padding-top: 5px;
}

#close
{
    /*外边距*/
    margin-left: 240px;
    /*鼠标进入显示小手,告知用户可以点击操作*/
    cursor: pointer;
}


html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ajax.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    
    <link type="text/css" rel="stylesheet" href="css/win.css">
    <script type="text/javascript" src="jslib/jQuery-1.4.2.js"></script>
    <script type="text/javascript" src="jslib/jQueryWin.js"></script>
  </head>
  
  <body>
    <a onclick="showwin()" href="#">显示浮动窗口</a>
    <div id="win">
    <div id="title">title
        <span id="close" onclick="hide()">X</span>
    </div>
    <div id="content">我是一个小窗口!</div>
    </div>
  </body>
</html>


阅读(982) | 评论(1) | 转发(0) |
0

上一篇：点击主菜单,对应的子菜单可以显示和影藏

下一篇：彻底删除微软拼音输入法2003

给主人留下些什么吧！~~

chinaunix网友2010-11-15 15:19:02

很好的, 收藏了 推荐一个博客，提供很多免费软件编程电子书下载： http://free-ebooks.appspot.com

回复 | 举报
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6