AJAX学习笔记03

学习内容

相关文件

使用JQuery来动态显示和隐藏窗口

jquery-window.jsp

jquery.js

jquery-window.js

jquery-window.css

思考：如何表示页面中的一个弹出窗口？

使用一个DIV标签来表示

<script type="text/javascript" src="jslib/jquery.js"></script>

<script type="text/javascript" src="jslib/jquery-window.js"></script>

<link type="text/css" rel="stylesheet" href="css/jquery-window.css"></link>

@CHARSET "gb18030";

#win {

/*让窗口有边框*/

border: 1px red solid;

/*设置窗口的高度和宽度*/

height: 300px;

width: 200px;

/*绝对定位*/

position: absolute;

/*设置窗口的位置*/

left: 400px;

top: 200px; 

/*设置窗口初始不可见*/

display: none;

}

#title {

/*控制标题栏的背景色*/

background-color: blue;

/*控制标题栏的文本颜色*/

color: white;

/*控制标题栏的左内边距*/

padding-left: 3px;

/*控制标题栏的顶内边距*/

padding-top: 3px;

}

#content{

/*控制内容区域的样式*/

padding-left : 3px;

padding-top : 5px;

}

#close {

/*设置外边距的样式*/

margin-left : 110px;

/*设置鼠标形状，鼠标移动到该标签上显示鼠标的形状*/

cursor: pointer;

color: lime;

}

#message {

color: green;

}

/*思考：如何表示页面中的一个弹出窗口？*/

/*使用一个DIV标签来表示*/

function showWindow(){

//alert("单击");调试代码

var winNode = $("#win");

//方法一：修改节点的CSS值，让窗口显示出来

//winNode.css( "display" , "block" );

//方法二：利用JQuery的show方法可以是DIV动态显示出来

/* show(speed,[callback])

以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。

可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。

speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

callback (Function) : (Optional) 在动画完成时执行的函数，每个元素执行一次。

*/

//winNode.show( "slow" ); 

//方法三：淡入

/*

hide(speed,[callback])

以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数。

可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。

speed (String,Number) :三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) 

callback (FunctionFunction) : (Optional) 在动画完成时执行的函数，每个元素执行一次。

*/

winNode.fadeIn("slow");

}

function hide(){

//alert("d");调试代码

var winNode = $("#win");

//方法一：

//winNode.css( "display" , "none");

//方法二：

//winNode.hide( "slow" );

//方法三：

winNode.fadeOut( "slow" );

}

注：在代码量还是不多的时候对所写代码的正确性进行验证

IDEA不支持直接拖拽文件

添加一个连接用于显示浮动窗口

<a οnclick="showwin()" href ="#">显示浮动窗口</a>

思考：如何表示页面中的一个弹出窗口？

使用一个DIV标签来表示

<div id="win">这将是一个弹出窗口</div>需要使用CSS样式来改变这个DIV的样式

引入CSS文件

<link type="text/css" rel="stylesheet" href="css/win.css"></link>

使用ID选择器

#win{

/*让窗口有边框*/

border: 1px red solid; /*宽度1像素，红色，实线*/

/*设置窗口的高度和宽度*/

width: 300px;

height: 200px;

/*设置窗口的位置*/

position: absolute; /*绝对定位*/

top : 100px;

left : 200px;

/*设置窗口初始不可见*/

display : none;

}

使用JS代码显示DIV窗口

1.找到窗口对应的DIV节点

var winNode = $.("#win");

2.设置显示DIV对应的窗口

方法1.修改节点的CSS值，让窗口显示出来

winNode.css( "display" , "block" );

方法2.利用JQuery的show方法可以是DIV动态显示出来

winNode.show("slow");//里面有三个可取值"show","normal","fast"

方法3：淡入

winNode.fadeIn("slow");//淡入

标题栏是一个DIV 内容栏也是一个DIV

#title{

/*控制标题栏的背景色*/

background-color : blue;

/*控制标题栏的文本颜色*/

color : yellow;

/*控制标题栏的左内边距*/

padding-left : 3px;

}

#content{

/*控制内容区域的样式*/

padding-left : 3px;

padding-top : 5px;

}

设置关闭按钮 

<span id="close" οnclick="hide" >X</span>

#close {

/*设置外边距的样式*/

margin-left : 80;

/*设置鼠标形状，鼠标移动到该标签上显示鼠标的形状*/

cursor : hand;/*pointer*/

}

//隐藏窗口的方法

function hide(){

1.找到窗口对应的DIV节点

var winNode = $.("#win");

2.隐藏起来

方法1.修改CSS

winNode.css( "display" , "block" );

方法2.利用JQuery的show方法可以是DIV动态隐藏出来

winNode.hide("slow");

方法3.利用JQuery的fadeOut方法

winNode.fadeOut("slow");//淡出

}