artDialog对话框在PHP下的简单应用-artDialog弹出层篇

本教程使用的是artDialog 4.1.7版本,由于需要iframe的支持,所以选择这个版本,artDialog 5.0.3不支持iframe。

本教程是基于本站站长在网页设计写代码过程中与PHP页面交互的应用,部分表单类功能基于artDialog iframe来完成的。也许这些功能有更好的实现方法,也许站长的水平太低下,所以有不当的地方还请指教。

1、index.php文件内容:

<?php  
$text=$_GET['text'];  
if ($text=='test')  
{  
echo 'chenggong';  
}  
else  
{  
echo 'shibai';  
}  
?> 
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>  
</head>  
<body>  
<a href="#" onclick="tc()">弹出层示例</a>  
</body>  
</html>  
2、index.html文件主要是让鼠标点击“弹出成示例”,然后交由index.php进行处理,返回结果,AJAX处理判断然后输出弹出层结果。

3、下载artDialog4.1.7.rar,解压后,放置到先在index.html页面中引入

<script src="jiaocheng.js"></script>   
<script src="artDialog/artDialog.source.js?skin=default"></script>   

4、添加jiaocheng.js文件内容:

function tc() {  
  $.ajax({  
    type: 'get',  
    url: 'index.php?text=test',  
    contentType: 'text/html;charset=utf-8',  
    success: function(data, status) {  
      switch (data) {   
      case 'chenggong':  
        art.dialog({  
          width:'15em',  
          title: '友情提示!',  
          time: 2,  
          content: '成功!'  
        });  
        CheckLogin();  
        break;  
      default:  
        art.dialog({  
          width:'15em',  
          title: '友情提示!',  
          time: 2,  
          content: '失败!'  
        });  
      }  
      return false;  
    }  
  });  
  return false;  
} 
 

然后赶快试试吧。

注意,本教程需在PHP环境中调试。也可下载下边的本教程演示。

演示文件下载:http://www.sitejs.cn/download/201304/file/16570-test.rar

artDialog4.1.7下载地址:http://www.sitejs.cn/sitejs-16571-1.html

更多PHP教程请访问JS代码站

你可能感兴趣的:(artdialog,artDialog弹出层)