使用artDialog做确认取消操作,本教程以删除操作为例,点击按钮,弹出确认取消对话框,点击确认按钮,执行删除操作,点击取消按钮则取消本次操作。
要实现这个操作有2种方法,使用artDialog的iframe扩展来做和不使用iframe扩展。如果使用iframe,则要在页面中载入
- <script src="artDialog/plugins/iframeTools.source.js"></script>
index.html中的代码:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>artDialog对话框在PHP下的简单应用-artDialog确认取消对话框的制作代码</title>
- <style>
- body {
- font-size: 12px;
- }
- </style>
- <script src="jiaocheng.js"></script>
- <script src="artDialog/artDialog.source.js?skin=default"></script>
- <script src="artDialog/plugins/iframeTools.source.js"></script>
- </head>
- <body>
- <a href="#" onclick="DelSel()">弹出确认对话框1</a><br/>
- <a href="#" onclick="DelSel2()">弹出确认对话框2</a>
- </body>
- </html>
index.php代码:
- <?php
- $text=$_GET['text'];
- if ($text=='test')
- {
- echo 'chenggong';
- }
- else
- {
- echo 'shibai';
- }
- ?>
jiaocheng.js中的代码:
- //使用iframe扩展
- function DelSel(){
- art.dialog.confirm('你确定要删除这些文件吗?', function () {
- this.close();
- $.ajax({
- type: 'get',
- url: 'index.php?text=test',
- contentType: 'text/html;charset=utf-8',
- success: function(data, status) {
- switch (data) {
- case 'chenggong':
- art.dialog.tips('成功删除');
- break;
- default:
- art.dialog.tips('删除失败');
- }
- return false;
- }
- });
- return false;
- }, function () {
- art.dialog.tips('你取消了操作');
- });
- }
- //不使用iframe扩展方法
- function DelSel2(){
- art.dialog({
- id:'del',
- content: '你确定要删除这些文件吗?',
- ok: function () {
- $.ajax({
- type: 'get',
- url: 'index.php?text=test',
- contentType: 'text/html;charset=utf-8',
- success: function(data, status) {
- switch (data) {
- case 'chenggong':
- parent.art.dialog.list['del'].close();
- art.dialog({
- id: 'testID1',
- content: '删除成功'
- });
- art.dialog({id: 'testID1'}).time(1);
- break;
- default:
- parent.art.dialog.list['del'].close();
- art.dialog({
- id: 'testID1',
- content: '删除失败'
- });
- art.dialog({id: 'testID1'}).time(1);
- }
- return false;
- }
- });
- return false;
- },
- cancelVal: '取消',
- cancel: true //为true等价于function(){}
- });
- }
具体可以下载附件中的例子来学习。
附件下载:http://www.sitejs.cn/download/201304/file/16574.rar
artDialog4.1.7下载地址:http://www.sitejs.cn/sitejs-16571-1.html
本文原地址:http://www.sitejs.cn/sitejs-16574-1.html
转载于:https://blog.51cto.com/3285518/1192755