jquery的blockUI使用

最新推荐文章于 2018-07-06 11:32:32 发布

wushimin110

最新推荐文章于 2018-07-06 11:32:32 发布

阅读量211

点赞数

分类专栏： jquey 文章标签： jQuery jsp html blockUI

本文链接：https://blog.csdn.net/wushimin110/article/details/84341409

版权

jquey 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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.页面执行结果如下：

[img]http://dl.iteye.com/upload/attachment/478483/5068317d-5dea-3f3d-bb15-f2bc0b744647.png[/img]

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

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

wushimin110

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery的blockUI使用

1.首先要准备好关于jquery的js文件包括jquery-1.2.3.js和jquery.blockUI.js 2.在前台JSP页面中调用Jquery[code="java"] My JSP 'JqueryShowBlock.jsp' starting page func...
复制链接

扫一扫