`

artDialog使用

 
阅读更多

1,下载artDialog

2,在JSP里面引入。

3,使用。

 

相关JSP代码如下:

这里是通过使用artDialog来弹出一个登陆框,在通过AJAX来与后台交互。

 

 

<%@ 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>artDialog登陆测试</title>
    
	<script type="text/javascript" src="<%=basePath%>artDialog/artDialog.js?skin=blue"></script>
	<script type="text/javascript" src="<%=basePath%>artDialog/artDialog.js"></script>
	<script type="text/javascript">
		function test(){
		
			
		art.dialog({
    
    title: '登录',//标题
    content: '帐号:<input id="login-na" type="text" value="guest" />'
        + '<br />密码:<input id="login-pw" type="text" value="333" />',
    initialize: function () {
        document.getElementById('login-na').focus();
        
    },
    lock: true,//锁屏
    
    fixed: true,//可以拖动
    ok: function () {
        var pwd = document.getElementById('login-pw').value;
        var name = document.getElementById('login-na').value;
       
        
       	//执行登录的ajax
       	$.ajax({
		    url: 'AjaxTest.action?name='+name+'&pwd='+pwd,
		    success: function (data) {
		    
		    	if(data==1){
		    	//如果登录错误
		    			art.dialog({
						    content: '用户名或密码错误',
						    time:2
						});
						
		    	} else {
					window.location.reload();//登录成功,重新刷新页面 或者 window.location.href="xx.action";		    	
		    	}
		    },
		    
		});
       	
       	
       	
        return false;//保持登录款不消失
    },
    okValue: '登录',//登录按钮的名称
    cancel: function () {
    	alert('取消登录')
    }
});
		
		}
	</script>
  </head>
  
  <body>
    <a onclick="test();" href="javascript:;">登录</a>
  </body>
</html>

 

 

 

 

分享到:
评论

相关推荐

    artdialog

    **标题:“artdialog”** **概述** `artdialog` 是一款功能强大的JavaScript对话框插件,广泛应用于网页交互设计中,提供丰富的自定义选项和灵活的API接口,以实现各种弹窗效果。它旨在替代传统的浏览器原生对话框...

    artdialog的使用实例

    **artdialog使用实例详解** `artdialog` 是一个强大的JavaScript弹出层插件,它以其优秀的用户体验、丰富的自定义选项和良好的跨浏览器兼容性而受到开发者们的青睐。在这个实例中,我们将深入探讨如何使用`...

    artDialog.js的demo

    这个"artDialog.js的demo"包含了4.15版本的资源,旨在帮助开发者了解和使用artDialog的各种功能。 在提供的文件列表中,我们可以看到以下几个关键文件: 1. **index.html** - 这是示例页面,展示了artDialog的不同...

    artDialog,demo,iframe

    artDialog 是一个JavaScript弹出对话框插件,而 "demo" 指示这是一些示例代码,用于展示如何使用 artDialog。"iframe" 提及的是在这些示例中可能使用到的技术,即在对话框内嵌入页面框架。 **描述分析:** 描述中...

    artDialog对话框插件 4.0版

    6. **_doc**:文档文件夹,包含了详细的使用手册和API说明,对于理解和使用artDialog至关重要。 三、使用指南 1. **引入库文件**:在HTML文件中引入artDialog的相关JS和CSS文件,确保正确引用jQuery(如果使用...

    artDialog插件和API详解

    4. **文档完善**:`_doc`目录下的文档详细解释了如何使用`artDialog`,方便开发者查阅和学习。 ### 使用方法 基本使用通常包括以下几个步骤: 1. **引入资源**:在HTML页面中引入`artDialog`的JS文件,如`...

    ArtDialog弹窗与API

    在项目中使用ArtDialog,首先需要下载并引入相应的JavaScript和CSS文件。通常,这可以通过CDN链接或者将压缩包中的文件放在项目目录下实现。例如: ```html &lt;link rel="stylesheet" href="path/to/artDialog.css"&gt; ...

    artDialog4.1.7.zip 和自己写的Demo

    要使用artDialog,首先需要在页面中引入相关的CSS和JavaScript文件,然后可以通过调用artDialog函数来创建对话框。例如: ```javascript art.dialog({ title: '对话框标题', content: '这里是对话框的内容', ...

    artDialog经典优雅的网页对话框控件

    - **提示信息**:当需要向用户显示警告、错误或成功消息时,可以使用artDialog快速创建一个简单的提示框。 - **确认操作**:在执行可能改变数据的操作前,可以使用对话框询问用户是否确认。 - **表单提交**:在...

    javascript artdialog 4.1.0

    使用ArtDialog时,开发者可以自定义对话框的大小、位置、内容、按钮等元素,还可以设置回调函数来处理用户交互事件。通过结合iframe工具,可以实现复杂的对话框场景,比如加载外部页面或表单。 总结起来,ArtDialog...

    artDialog的js,css与事例

    本文将详细介绍ArtDialog的JS和CSS部分,以及如何通过实例来理解和使用它。 首先,让我们了解ArtDialog的核心特性。ArtDialog是一个JavaScript库,它提供了一种优雅的方式来创建模态或非模态对话框。它不仅包含了...

    javascript ArtDialog

    5. `license.txt`:包含了ArtDialog的许可协议,规定了使用该组件的法律条款。 6. `skins` 文件夹:包含了各种皮肤资源,如CSS样式和图片,用于改变对话框的外观。 7. `basic` 文件夹:可能是基础皮肤或者默认皮肤的...

    artDialog4.0.5

    使用artDialog4.0.5时,开发者首先需要在网页中引入相关的JS和CSS文件,然后通过JavaScript调用artDialog API创建和管理对话框。结合实际项目需求,可以进一步优化和扩展其功能,实现更为复杂和个性化的交互体验。总...

    artDialog4.1.7

    **artDialog4.1.7** 是一个JavaScript编写的对话框组件,专为网页开发者提供了一个强大且易于使用的工具,用于创建美观的弹出对话框。这个组件以其精致的界面和用户友好的接口而受到赞誉,是提升网页交互体验的理想...

    jquery 弹出框插件artDialog

    在实际应用中,ArtDialog的使用步骤通常包括以下几个部分: 1. **引入依赖**:首先需要在页面中引入jQuery库和ArtDialog的JavaScript及CSS文件。 2. **初始化插件**:通过JavaScript代码调用`$.dialog()`方法创建...

    artdialog4.1.5

    artdialog与jQuery等库兼容,可以方便地与现有的前端框架结合使用。例如,你可以利用jQuery选择器获取元素并创建对话框。 6. **示例链接**: 提供的链接...

    artDialog5 强大的消息对话框

    - `myDemo.html`:这个文件可能是展示`artDialog5`使用示例的HTML页面,包括如何引入插件、配置参数和触发对话框的JavaScript代码。 - `artDialog5`:这可能是一个包含`artDialog5`插件核心文件的目录,可能包括...

    artDialog源码

    3. `demo/`:示例代码,展示了artDialog的各种用法和配置,帮助用户快速理解和使用。 4. `docs/`:文档目录,包含了API介绍和使用指南。 5. `test/`:测试目录,用于验证和确保artDialog的功能正确无误。 **三、...

    artDialog4.1.5.rar

    1. **易用性**:artDialog的API设计简洁明了,使得开发者能够快速理解和使用,无论是简单的提示信息还是复杂的表单交互,都能轻松实现。 2. **灵活性**:支持自定义样式和内容,可以嵌入HTML、图片、视频等多种元素...

    artDialog4.1.6

    **artDialog4.1.6** 是一个专为Web应用设计的轻量级对话框组件。这个组件以其小巧的体积(只有十多KB)和独立于其他框架的特点而受到青睐,这意味着它可以在各种不同的Web环境中轻松集成,而无需依赖如jQuery等常见...

Global site tag (gtag.js) - Google Analytics