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

各位站长为了页面的美观和用户体验不免会想到使用弹出层用户登录,本篇教程就来教会各位站长怎么使用artDialog对话框组件来实现在PHP页面里的弹出层登录以及验证的方法。本篇为初级教程,高手请绕道。这些也都是本站站长摸索出来的,如有不完善的地方敬请指教。

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 { 
  8.     font-size: 12px; 
  9. </style> 
  10. <script src="jiaocheng.js"></script>  
  11. <script src="artDialog/artDialog.source.js?skin=default"></script>  
  12. <script src="artDialog/plugins/iframeTools.source.js"></script> 
  13. </head> 
  14.  
  15. <body> 
  16. <a href="#" onclick="d()">登录</a><br/> 
  17. </body> 
  18. </html> 

由于用到iframe所以必须载入artdialog的iframe插件。

index.php代码:

  1. <?php  
  2. //验证代码,如果用户名和密码符合,则输出‘su’ 表示成功。否则为失败。  
  3. echo 'su';  
  4. ?>  

这个验证代码需要自己去写哦,比如用到dedecms中的话就不用写了。直接把showmsg注释,然后echo ‘su’就OK啦。cms系统用户验证代码肯定是有的了。所以站长偷懒,直接省略了。

login_iframe.html代码:

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  5. <style> 
  6. body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; } 
  7. fieldset, img { border: 0; } 
  8. img { display:inline-block; } 
  9. :focus { outline: 0; } 
  10. address, caption, cite, code, dfn, em, strong, th, var, optgroup { font-style: normal; font-weight: normal; } 
  11. h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } 
  12. abbr, acronym { border: 0; font-variant: normal; } 
  13. input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; } 
  14. code, kbd, samp, tt { font-size:100%; } 
  15. input, button, textarea, select { *font-size: 100%; 
  16. ol, ul { list-style: none outside none; } 
  17. table { border-collapse: collapse; border-spacing: 0; } 
  18. caption, th { text-align: left; } 
  19. sup, sub { font-size: 100%; vertical-align: baseline; } 
  20. :link, :visited, ins { text-decoration: none; } 
  21. blockquote, q { quotes: none; } 
  22. blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } 
  23. /**/ 
  24. html, body { border:none 0; } 
  25. body { font-size:75%; color:#666; font-family:'Microsoft Yahei', Tahoma, Arial!important; font-family:'宋体', Tahoma, Arial; text-align:center; } 
  26. a { color:#214FA3; } 
  27. a:hover { text-decoration:underline; } 
  28. #login-form { padding-top:30px; } 
  29. #login-form p { padding:5px;  } 
  30. #login-form input { width:15em; padding:4px; border:1px solid #CCC; } 
  31. #login-form input:focus { border-color:#426DC9; } 
  32. #login-form .login-form-error { background:#FFFBFC; border-color:#F00 !important; } 
  33. </style> 
  34. </head> 
  35.  
  36. <body> 
  37. <form id="login-form" action="index.php" method="post" target="_top"> 
  38. <p><label>帐号:<input id="login-form-username" name="username" type="text"></label></p> 
  39. <p><label>密码:<input id="login-form-password" name="password" type="password"></label></p> 
  40. </form> 
  41. </body> 
  42. </html> 

这个页面是载入的登录层,各位可以自定义编写,但是如果input的id有变化的话,需要和下面JS中的相对应才行,否则将会验证失败。

jiaocheng.js代码:

  1. function d(){ 
  2.  art.dialog.open('login_iframe.html', { 
  3.     id: 'ajax-login'
  4.     width: '30em'
  5.     title: '用户登录'
  6.     okVal:'登录'
  7.     ok: function () { 
  8.         var iframe = this.iframe.contentWindow; 
  9.         if (!iframe.document.body) { 
  10.             art.dialog({ 
  11.                 width: '15em'
  12.                 time: 2, 
  13.                 content: '页面还没加载完毕呢' 
  14.                 }); 
  15.             return false
  16.         }; 
  17.         var form = iframe.document.getElementById('login-form'), 
  18.             username = iframe.document.getElementById('login-form-username'), 
  19.             password = iframe.document.getElementById('login-form-password'); 
  20.         if (check(username) && check(password))  
  21.         { 
  22.             var fmdo = 'login'
  23.             var dopost = 'login'
  24.             var userid = iframe.document.getElementById('login-form-username').value; 
  25.             var pwd = iframe.document.getElementById('login-form-password').value; 
  26.     $.ajax({ 
  27.         type:'post'
  28.         url:'index.php'
  29.         data:{ 
  30.             fmdo:fmdo, 
  31.             myset:'ajax'
  32.             dopost:dopost, 
  33.             userid:userid, 
  34.             pwd:pwd 
  35.         }, 
  36.         success:function(data,status){ 
  37.             if(data=='su'){ 
  38.                 parent.art.dialog.list['ajax-login'].close(); 
  39.                 art.dialog({ 
  40.                 width: '15em'
  41.                 time: 2, 
  42.                 content: '成功登录!' 
  43.                 }); 
  44.             }else
  45.                 art.dialog({ 
  46.                 width: '15em'
  47.                 time: 2, 
  48.                 content: '登录失败!' 
  49.                 }); 
  50.             } 
  51.             return false
  52.         } 
  53.     }); 
  54.     return false
  55.         } 
  56.  
  57.         return false
  58.     }, 
  59.     cancel: true 
  60. }); 
  61.  
  62. var check = function (input) { 
  63.     if (input.value === '') { 
  64.         inputError(input); 
  65.         input.focus(); 
  66.         return false
  67.     } else { 
  68.         return true
  69.     }; 
  70. }; 
  71.  
  72. var inputError = function (input) { 
  73.     clearTimeout(inputError.timer); 
  74.     var num = 0; 
  75.     var fn = function () { 
  76.         inputError.timer = setTimeout(function () { 
  77.             input.className = input.className === '' ? 'login-form-error' : ''
  78.             if (num === 5) { 
  79.                 input.className === ''
  80.             } else { 
  81.                 fn(num ++); 
  82.             }; 
  83.         }, 150); 
  84.     }; 
  85.     fn(); 
  86. }; 

这个JS中的内容是相当重要的,修改的时候要小心细致一点。希望各位站长修改成功哦。

具体可以下载附件中的例子来学习。

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

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