jquery的blockUI使用

1.首先要准备好关于jquery的js文件
  包括jquery-1.2.3.js和jquery.blockUI.js
2.在前台JSP页面中调用Jquery
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<% 
String path = request.getContextPath(); 
String basePath = 
request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"
/"; 
%> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<base href="<%=basePath%>"> 

<title>My JSP 'JqueryShowBlock.jsp' starting page</title> 

<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="cache-control" content="no-cache"> 
<meta http-equiv="expires" content="0"> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="This is my page"> 
<!-- 
<link rel="stylesheet" type="text/css" href="styles.css"> 
--> 
<script language="JavaScript" type="text/javascript" 
src="<%=path %>/jquery/jquery-1.2.3.js"></script> 
<script type="text/javascript" src="<%=path %>/jquery/jquery.blockUI.js"></script> 
<script language="JavaScript"> 
function showBlock(){ 
jQuery.blockUI({ message: "处理中,请稍候...", css: {color:'#fff',border:'3px solid 
#aaa',backgroundColor:'#CC3300'},overlayCSS: { opacity:'0.0' }}); 
setTimeout('hideBlock()',2000);//2000毫秒后调用hideBlock() 
} 
function hideBlock(){ 
jQuery.unblockUI(); 
} 
</script> 

</head> 

<body> 
This is my JSP page. <br> 
ShowJqueryBlock Start:<input type="button" id="showBlock" value="ShowBlock" 
onclick="showBlock()"/><br/> 
</body> 
</html> 



关于jquery文件的目录结构如下:
---WebRoot
--------jquery
-----------jquery-1.2.3.js
-----------jquery.blockUI.js
3.页面执行结果如下:

jquery的blockUI使用

当点击"ShowBlock"按钮时会调用jquery的jQuery.blockUI方法,"处理中,请稍后..."的jquery的block信息会显示,并且将页面锁定;过2000毫秒后调用jQuery.unblockUI()将jquery的block信息取消。


此文章为转载: http://wl-ldy.iteye.com/blog/1038803

你可能感兴趣的:(html,jquery,jsp,blockUI)