jquery ui对话框插件的使用

java 专栏收录该内容
13 篇文章 1 订阅

开发环境:  struts2.3    jquery UI1.10.4    jdk1.7    

1  jQuery插件

1.1  什么是插件

插件是一种遵循一定应用程序接口规范编写出来的程序,是原有系统平台或应用软件平台功能的一种扩展和补充。但其只能在程序规定的系统平台下运行,而不能脱离指定平台单独运行。

本文中的JQuery插件是指基于JQuery脚本库开发出来的扩充函数库。目前基于JQuery脚本库开发出来的插件类别繁多,数量已达上万个,其中,JQuery的官方插件叫作JQuery UI。UI插件使用情况如表1.1所示。

1-1UI插件使用情况

使用情况

接应用类型

按企业规模

用户较少的内部管理系统

中小型IT开发企业

用户较多的开放式Web网站

大型IT开发企业

1.2  查找插件和帮助

前面介绍了JQuery插件功能强大且数量非常丰富,下顽便提供几个获取JQuery插件的资源地址。

(1)http://jqueryui.com:JQuery UI官方网站,收录了所有官方提供的插件。可以在线演示插件效果和查看源码,并提供了所有示例和插件库的打包下载地址。

(2) http://plugins.jquery.com: jQuery官方网站的插件库。除了官方提供的插件外,还收录了很多其他个人或第三方提供的插件下载地址。

(3)  http://api.jqueryui.com: JQuery U[官方网站提供的API文档。如果想对某个插件的具体用法进行详细了解,可以访问该网址。当然,如果遇到解决不了的问题,可以充分利用网络资源,在一些开源社区活跃着很多业内专业人员,他们或许能够帮你解决更多问题。

1.3  如何使用jQuery插件

要想使用JQuery插件进行开发,需要以下几个准备步骤。

(1)获取JQuery插件。

(2)将需要的JQuery插件及样式文件加入工程。

(3)在页面引入JQuery插件及样式文件。

二 对话框插件(dialog)的使用案例

       对话框在网页中的使用频率非常高,所以JQuery UI提供了dialog插件。常用的对话框展现形式分为普通对话框和form对话框。其中,筒单对话框用于信息提示,form对话框用于构建提交表单。下面以一个无刷新登录为例来讲解对话框插件

工程目录如下:

页面代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<c:set var="scheme" value="${pageContext.request.scheme}"></c:set>
<c:set var="serverName" value="${pageContext.request.serverName}"></c:set>
<c:set var="serverPort" value="${pageContext.request.serverPort}"></c:set>
<c:set var="basePath" value="${scheme}://${serverName }:${serverPort }${path }/">
</c:set>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="${bathPath }">
<title>jquery 常用插件</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
<!-- jQuery UI样式文件 -->	
<link rel="stylesheet" type="text/css" href="jqueryUI/jquery-ui-1.10.4.custom.css">
<!--jQuery基础脚本库-->
<script src="jqueryUI/jquery-1.10.2.js"></script>
<!--jquery ui插件脚本库 -->
<script src="jqueryUI/jquery-ui-1.10.4.custom.js"></script>	
<script type="text/javascript">
$(document).ready(function(e){
	$("#showDialog").dialog({
		width:350,     //宽度
		//height:500,    //高度
		position:"center",  //居中
		autoOpen:false,    //最开始不显示
		modal:true,      //表示模式对话框
		title:'用户登录',    //标题
		buttons:{
			"登录":function(){  //默认触发点击事件
				//可以在这里发送ajax请求
				var userStr=$("[name=userName]").val();
				var passStr=$("[name=passWord]").val();
				var data="userName="+userStr+"&passWord="+passStr;
				$.post("Login.do",data,function(result){
					if(result=='ok'){
						$("#show").html("欢迎您:"+userStr
							+"&nbsp;<a id='quit' href='javascript:void(0);'>退出</a>");
						$("#showDialog").dialog("close");   //登录成功了关闭对话框
					}else{
						window.alert("登录失败");
					}
				});
			},
			"关闭":function(){  //默认触发点击事件
				$(this).dialog("close");
			}
		}
	});
	
	/*
          对于动态添加的节点无法处理事件问题的解决方案
          用它的父标签使用on方法绑定事件
    */
	$("body").on("click","#login",function(e){
		$("#showDialog").dialog("open");  //打开对话框
	});
	
	$("body").on("click","#quit",function(e){
		$.post("Quit.do","",function(result){
			if(result=='ok'){
				$("#show").html("<a id='login' href='javascript:void(0);'>请登录</a>");
			}
		});
	});
	
});
</script>
</head>
  
<body>
<p id="show">
<c:choose>
	<c:when test="${ not empty userName}">
		欢迎您:${sessionScope.userName} &nbsp;
		<a id="quit" href="javascript:void(0);">退出</a>
	</c:when>
	<c:otherwise>
		<a id="login" href="javascript:void(0);">请登录</a>
	</c:otherwise>
</c:choose>
</p>
<div id="showDialog">
 <table>
	<tr><td>请输入用户名:</td><td><input type="text" name="userName"/></td></tr>
	<tr><td>请输入密码:</td><td><input type="password" name="passWord"/></td></tr>
  </table>
</div>
<p><img src="images/aa.png"/></p>
</body>
</html>

登录的action代码

package com.accp.actions;

import java.io.ByteArrayInputStream;
import java.io.InputStream;
import java.util.Map;
import com.accp.dao.IUserDao;
import com.accp.dao.UserDaoImpl;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;

public class LoginAction extends ActionSupport{
	private String userName;
	private String passWord;
	private InputStream bis;
	public InputStream getBis() {
		return bis;
	}
	public String execute() throws Exception {
		ActionContext ac=ActionContext.getContext();
		Map session=ac.getSession();
		String result="err";
		IUserDao userDao=new UserDaoImpl();
		if(userDao.isLoginSuccess(userName, passWord)){
			session.put("userName", userName);
			result="ok";
		}
		bis=new ByteArrayInputStream(result.getBytes());
		System.out.println("action结果==>"+result);
		return this.SUCCESS;
	}
	public String getUserName() {
		return userName;
	}
	public void setUserName(String userName) {
		this.userName = userName;
	}
	public String getPassWord() {
		return passWord;
	}
	public void setPassWord(String passWord) {
		this.passWord = passWord;
	}
	
}

退出的action代码

package com.accp.actions;

import java.io.ByteArrayInputStream;
import java.io.InputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;

public class QuitAction extends ActionSupport{
	private InputStream bis;
	
	public InputStream getBis() {
		return bis;
	}
	
	public String execute() throws Exception {
		HttpServletRequest request=ServletActionContext.getRequest();
		HttpSession session=request.getSession(false);
		if(session!=null){
			System.out.println("真的退出了");
			session.invalidate();
		}
		bis=new ByteArrayInputStream("ok".getBytes());
		return this.SUCCESS;
	}
	
}

struts配置文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
	"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
	"struts-2.3.dtd">
<struts>
	<constant name="struts.action.extension" value="action,do,php"></constant>
	<package name="user" extends="struts-default">
		<action name="Login" class="com.accp.actions.LoginAction">
			<result type="stream">
				<param name="contentType">text/html</param>
				<param name="inputName">bis</param>
			</result>
		</action>
		<action name="Quit" class="com.accp.actions.QuitAction">
			<result type="stream">
				<param name="contentType">text/html</param>
				<param name="inputName">bis</param>
			</result>
		</action>
	</package>
</struts>

运行结果如下:

发送ajax请求登录

  • 1
    点赞
  • 1
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值