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