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.daimajiayuan.com/download/201304/file/16570-test.rar

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

更多PHP教程请访问JS代码

posted @ 2013-05-03 14:09  似水星辰  阅读(347)  评论(0编辑  收藏  举报