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` 是一款功能强大的JavaScript对话框插件,广泛应用于网页交互设计中,提供丰富的自定义选项和灵活的API接口,以实现各种弹窗效果。它旨在替代传统的浏览器原生对话框...
**artdialog使用实例详解** `artdialog` 是一个强大的JavaScript弹出层插件,它以其优秀的用户体验、丰富的自定义选项和良好的跨浏览器兼容性而受到开发者们的青睐。在这个实例中,我们将深入探讨如何使用`...
这个"artDialog.js的demo"包含了4.15版本的资源,旨在帮助开发者了解和使用artDialog的各种功能。 在提供的文件列表中,我们可以看到以下几个关键文件: 1. **index.html** - 这是示例页面,展示了artDialog的不同...
artDialog 是一个JavaScript弹出对话框插件,而 "demo" 指示这是一些示例代码,用于展示如何使用 artDialog。"iframe" 提及的是在这些示例中可能使用到的技术,即在对话框内嵌入页面框架。 **描述分析:** 描述中...
6. **_doc**:文档文件夹,包含了详细的使用手册和API说明,对于理解和使用artDialog至关重要。 三、使用指南 1. **引入库文件**:在HTML文件中引入artDialog的相关JS和CSS文件,确保正确引用jQuery(如果使用...
4. **文档完善**:`_doc`目录下的文档详细解释了如何使用`artDialog`,方便开发者查阅和学习。 ### 使用方法 基本使用通常包括以下几个步骤: 1. **引入资源**:在HTML页面中引入`artDialog`的JS文件,如`...
在项目中使用ArtDialog,首先需要下载并引入相应的JavaScript和CSS文件。通常,这可以通过CDN链接或者将压缩包中的文件放在项目目录下实现。例如: ```html <link rel="stylesheet" href="path/to/artDialog.css"> ...
要使用artDialog,首先需要在页面中引入相关的CSS和JavaScript文件,然后可以通过调用artDialog函数来创建对话框。例如: ```javascript art.dialog({ title: '对话框标题', content: '这里是对话框的内容', ...
- **提示信息**:当需要向用户显示警告、错误或成功消息时,可以使用artDialog快速创建一个简单的提示框。 - **确认操作**:在执行可能改变数据的操作前,可以使用对话框询问用户是否确认。 - **表单提交**:在...
使用ArtDialog时,开发者可以自定义对话框的大小、位置、内容、按钮等元素,还可以设置回调函数来处理用户交互事件。通过结合iframe工具,可以实现复杂的对话框场景,比如加载外部页面或表单。 总结起来,ArtDialog...
本文将详细介绍ArtDialog的JS和CSS部分,以及如何通过实例来理解和使用它。 首先,让我们了解ArtDialog的核心特性。ArtDialog是一个JavaScript库,它提供了一种优雅的方式来创建模态或非模态对话框。它不仅包含了...
5. `license.txt`:包含了ArtDialog的许可协议,规定了使用该组件的法律条款。 6. `skins` 文件夹:包含了各种皮肤资源,如CSS样式和图片,用于改变对话框的外观。 7. `basic` 文件夹:可能是基础皮肤或者默认皮肤的...
使用artDialog4.0.5时,开发者首先需要在网页中引入相关的JS和CSS文件,然后通过JavaScript调用artDialog API创建和管理对话框。结合实际项目需求,可以进一步优化和扩展其功能,实现更为复杂和个性化的交互体验。总...
**artDialog4.1.7** 是一个JavaScript编写的对话框组件,专为网页开发者提供了一个强大且易于使用的工具,用于创建美观的弹出对话框。这个组件以其精致的界面和用户友好的接口而受到赞誉,是提升网页交互体验的理想...
在实际应用中,ArtDialog的使用步骤通常包括以下几个部分: 1. **引入依赖**:首先需要在页面中引入jQuery库和ArtDialog的JavaScript及CSS文件。 2. **初始化插件**:通过JavaScript代码调用`$.dialog()`方法创建...
artdialog与jQuery等库兼容,可以方便地与现有的前端框架结合使用。例如,你可以利用jQuery选择器获取元素并创建对话框。 6. **示例链接**: 提供的链接...
- `myDemo.html`:这个文件可能是展示`artDialog5`使用示例的HTML页面,包括如何引入插件、配置参数和触发对话框的JavaScript代码。 - `artDialog5`:这可能是一个包含`artDialog5`插件核心文件的目录,可能包括...
3. `demo/`:示例代码,展示了artDialog的各种用法和配置,帮助用户快速理解和使用。 4. `docs/`:文档目录,包含了API介绍和使用指南。 5. `test/`:测试目录,用于验证和确保artDialog的功能正确无误。 **三、...
1. **易用性**:artDialog的API设计简洁明了,使得开发者能够快速理解和使用,无论是简单的提示信息还是复杂的表单交互,都能轻松实现。 2. **灵活性**:支持自定义样式和内容,可以嵌入HTML、图片、视频等多种元素...
**artDialog4.1.6** 是一个专为Web应用设计的轻量级对话框组件。这个组件以其小巧的体积(只有十多KB)和独立于其他框架的特点而受到青睐,这意味着它可以在各种不同的Web环境中轻松集成,而无需依赖如jQuery等常见...