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

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

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

1、页面配置如下图:

2、index.php文件内容:

  1. <?php 
  2. $text=$_GET['text']; 
  3. if ($text=='test'
  4. echo 'chenggong'
  5. else 
  6. echo 'shibai'
  7. ?> 

index.html内容:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>artDialog对话框在PHP下的简单应用-artDialog弹出层篇</title> 
  6. <style> 
  7. body {font-size: 12px;} 
  8. </style> 
  9. </head> 
  10. <body> 
  11. <a href="#" onclick="tc()">弹出层示例</a> 
  12. </body> 
  13. </html> 

3、index.html文件主要是让鼠标点击“弹出成示例”,然后交由index.php进行处理,返回结果,AJAX处理判断然后输出弹出层结果。

效果图如下:

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

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

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

  1. function tc() { 
  2.   $.ajax({ 
  3.     type: 'get'
  4.     url: 'index.php?text=test'
  5.     contentType: 'text/html;charset=utf-8'
  6.     success: function(data, status) { 
  7.       switch (data) {  
  8.       case 'chenggong'
  9.         art.dialog({ 
  10.           width:'15em'
  11.           title: '友情提示!'
  12.           time: 2, 
  13.           content: '成功!' 
  14.         }); 
  15.         CheckLogin(); 
  16.         break
  17.       default
  18.         art.dialog({ 
  19.           width:'15em'
  20.           title: '友情提示!'
  21.           time: 2, 
  22.           content: '失败!' 
  23.         }); 
  24.       } 
  25.       return false
  26.     } 
  27.   }); 
  28.   return false

然后赶快试试吧。

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

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

附件为artDialog 4.1.7插件包。

转载请注明:代码家园 » artDialog对话框在PHP下的简单应用-artDialog弹出层篇

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)