纯代码实现的,这就不用说了,发现有的网站也有前台自定义登录功能,但是不是ajax的,就是登录页面的代码是事先加载好了,然后通过js控制使它显示隐藏,为了一个小小的功能,完全不必要事先加载这么多代码,所以自己写了一个ajax登录、注册页面,只有点击了登录/注册才会加载登录注册的代码,并在前台暗箱显示出来,达到异步加载的目的,为了异步加载的速度,把登录和注册分开来加载,所以切换这两个功能也是异步的。
说是wordpress的功能,但是理论上适合任何网站的功能,只需要修改一下表单提交网址就行了。效果请看本站右上角的登录、注册。
首先新建两个php文件,把编码格式为设置成你网站的编码格式(如UTF-8),一个命名为login.php,另一个命名为register.php。
把以下代码扔到login.php中并保存上传到主题目录下:
function openLogin(){
document.getElementById("win").style.display="";
document.getElementById("back").style.display="";}
function closeLogin(){
document.getElementById("win").style.display="none";
document.getElementById("back").style.display="none";}
$('#zuce').click(function(){$('#back').load('/wp-content/themes/QIUYE/register.php');document.getElementById("back").style.display="";});
再把一下代码扔到register.php当中并保存上传到主题目录下:
function openLogin(){
document.getElementById("win").style.display="";
document.getElementById("back").style.display="";
}function closeLogin(){
document.getElementById("win").style.display="none";
document.getElementById("back").style.display="none";
}$('#denglu').click(function(){$('#back').load('/wp-content/themes/QIUYE/login.php');document.getElementById("back").style.display="";});
最后在前台需要显示登录的地方加上以下代码:
最最后在主题的公共js文件中加上以下的代码:
jQuery(document).ready(function($){
$('.llogin').click(function() {$('#back').load('/wp-content/themes/QIUYE/login.php');document.getElementById("back").style.display="";});
$('.zzuce').click(function() {$('#back').load('/wp-content/themes/QIUYE/register.php');document.getElementById("back").style.display="";});});
注意把红色部分改成你的主题文件夹名称。其它类型网站还需要修改蓝色部分,总之按照自身情况修改自己的url。
看似代码复杂繁多,其实它一点都不影响网站打开速度,因为它是ajax异步加载功能~不要被虚无的外壳所迷惑。