修改DedeCMS会员登录状态(样式)调用代码方法

2021-07-29 0 2,634

织梦登陆框想修改显示样式怎么办呢?

有两种样式,横向展示,竖向展示:下面是具体实现代码

一、横向样式

1.实现过程

第一步:我们首先新建一个空白的默认首页模板(通常为index.htm),并设置为启用状态,然后掏空里面的所有代码。

第二步:然后在<head></head>区域内加入以下代码:

<script language="javascript" type="text/javascript" src="{dede:global.cfg_cmsurl/}/include/dedeajax2.js"></script> 

<script language="javascript" type="text/javascript"> 

    function CheckLogin(){  

      var taget_obj = document.getElementById('_userlogin');  

      myajax = new DedeAjax(taget_obj,false,false,'','','');  

      myajax.SendGet2("{dede:global.cfg_cmspath/}/member/ajax_loginsta.php");  

      DedeXHTTP = null;  

    }  

</script>

第三步:然后再在<body></body>区域增加如下代码:

<div id="_userlogin"> 

    <form name="userlogin" action="{dede:global.cfg_memberurl/}/index_do.php" method="POST"> 

    <input type="hidden" name="fmdo" value="login" /> 

    <input type="hidden" name="dopost" value="login" /> 

    <input type="hidden" name="keeptime" value="604800" /> 

    <ul> 

        <li> 

            <label>用户名:</label> <input type="text" name="userid" class="text" style="width:80px"/> 

        <li> 

        <li> 

            <label>密  码:</label> <input type="password" name="pwd" class="text" style="width:80px"/> 

        </li> 

        <li> 

            <label>验证码:</label><input type="text" name="vdcode" class="text" style="width:40px"/> <img id="vdimgck" align="absmiddle" onClick="this.src=this.src+'?'" style="cursor: pointer; margin-left: 0px;" alt="看不清?点击更换" src="../include/vdimgck.php"/> 

        </li> 

        <li><button type="submit" class="btn-1">登录</button> <a href="{dede:global.cfg_memberurl/}/index_do.php?fmdo=user&dopost=regnew" >注册帐号</a> <a href="{dede:global.cfg_memberurl/}/resetpassword.php">忘记密码?</a></li>         

    </ul> 

</div> 

<script language="javascript" type="text/javascript">CheckLogin();</script> 

<style> 

#_userlogin{font-size:12px; height:22px;}  

#_userlogin ul {margin:0;}  

#_userlogin ul li{ float:left; padding:0 5px;}  

#_userlogin ul li input.text{font-size:12px; height:14px;}  

</style> 

</body> 

第四步:代码添加完毕,我们生成首页或者直接浏览动态首页看看效果:

第五步:我们输入正确的账号密码,回到首页的效果图:

到此,我们的横向登陆样式就制作完毕了。

但是很明显,登陆后的样式非常丑陋,我们应该美化一下,但在美化之前我们应该要来了解一下代码中的含义。

2)代码解释

所谓的代码解释就是要让大家能够看得懂,所以大家可以看一下整个页面的注释版代码:

<!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=gb2312" /> 

<title>首页登陆样式测试 —— 旭日站长织梦教程网(www.webmaster5u.com)</title> 

<script language="javascript" type="text/javascript" src="{dede:global.cfg_cmsurl/}/include/dedeajax2.js"></script><!–这段是显示整个效果必须要存在的ajax框架–> 

<script language="javascript" type="text/javascript"> 

    function CheckLogin(){ //判断是否登陆的函数  

      var taget_obj = document.getElementById('_userlogin'); //登陆后动态加载的区块,也就是<body>区域的id="_userlogin"的所有内容  

      myajax = new DedeAjax(taget_obj,false,false,'','','');  

      myajax.SendGet2("{dede:global.cfg_cmspath/}/member/ajax_loginsta.php"); //登陆后的要显示的具体内容  

      DedeXHTTP = null;  

    }  

</script> 

</head> 

 

<body> 

<div id="_userlogin"><!–动态显示的内容区块,ID值必须与上面的document.getElementById('_userlogin') 中 的_userlogin保持一致–> 

    <form name="userlogin" action="{dede:global.cfg_memberurl/}/index_do.php" method="POST"><!–登陆提交的处理页面–> 

    <input type="hidden" name="fmdo" value="login" /><!–定义操作为login–> 

    <input type="hidden" name="dopost" value="login" /><!–定义操作为login–> 

    <input type="hidden" name="keeptime" value="604800" /><!–记住登陆状态的时间,单位秒–> 

    <ul> 

        <li> 

            <label>用户名:</label> <input type="text" name="userid" class="text" style="width:80px"/><!–用户名–> 

        <li> 

        <li> 

            <label>密  码:</label> <input type="password" name="pwd" class="text" style="width:80px"/><!–密码–> 

        </li> 

        <li> 

            <label>验证码:</label><input type="text" name="vdcode" class="text" style="width:40px"/> <img id="vdimgck" align="absmiddle" onClick="this.src=this.src+'?'" style="cursor: pointer; margin-left: 0px;" alt="看不清?点击更换" src="../include/vdimgck.php"/> 

        </li> 

        <li><button type="submit" class="btn-1">登录</button></li>          

    </ul> 

</div> 

<script language="javascript" type="text/javascript">CheckLogin();</script><!–本函数必须加载,用于获取上面的function CheckLogin()函数–> 

<style> 

#_userlogin{font-size:12px; height:22px;}  

#_userlogin ul {margin:0;}  

#_userlogin ul li{ float:left; padding:0 5px;}  

#_userlogin ul li input.text{font-size:12px; height:14px;}  

</style> 

</body> 

</html> 

 

通过上面的查看,我们已经知道要美化这个样式,只需要修改 /member/ajax_loginsta.php 文件的代码即可。

我们打开这个文件,将里面的代码全部替换为如下代码:

 

<?php  

require_once(dirname(__FILE__)."/config.php");  

AjaxHead();  

if($myurl == '')  

{  

    exit('');  

}  

$uid  = $cfg_ml->M_LoginID;  

 

!$cfg_ml->fields['face'] && $face = ($cfg_ml->fields['sex'] == '女')? 'dfgirl' : 'dfboy';  

$facepic = emptyempty($face)? $cfg_ml->fields['face'] : $GLOBALS['cfg_memberurl'].'/templets/images/'.$face.'.png';  

 

?>  

你好:<strong><?php echo $cfg_ml->M_UserName; ?></strong>,欢迎登录!<a href="<?php echo $cfg_memberurl; ?>/guestbook_admin.php">我的留言</a> | <a href="<?php echo $cfg_memberurl; ?>/mystow.php">我的收藏</a> | <a href="<?php echo $cfg_memberurl; ?>/index.php">会员中心</a> |  <a href="<?php echo $cfg_memberurl; ?>/edit_fullinfo.php">修改资料</a> | <a href="<?php echo $myurl;?>">空间</a> | <a href="<?php echo $cfg_memberurl; ?>/index_do.php?fmdo=login&dopost=exit">退出登录</a>  

 

我们也顺道来看一下修改后的效果:

 

 

怎么样?大家知道应该如何来制作这个效果了吧。好了,我们再来看看竖向的登录框。

二、竖向登陆

(责任编辑:模板天下)

通过横向登陆的示例,其实我们很容易理解。要做一个竖向登陆的这个效果,只需要将登陆前后的样式分别修改一下即可,不需要修改其它任何功能文件。

这是我修改的竖向登陆的登录前样式:

<!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=gb2312" /> 

<title>首页登陆样式测试 ——旭日站长织梦教程网(www.webmaster5u.com)</title> 

<script language="javascript" type="text/javascript" src="{dede:global.cfg_cmsurl/}/include/dedeajax2.js"></script><!–这段是显示整个效果必须要存在的ajax框架–> 

<script language="javascript" type="text/javascript"> 

    function CheckLogin(){ //判断是否登陆的函数  

      var taget_obj = document.getElementById('_userlogin'); //登陆后动态加载的区块,也就是<body>区域的id="_userlogin"的所有内容  

      myajax = new DedeAjax(taget_obj,false,false,'','','');  

      myajax.SendGet2("{dede:global.cfg_cmspath/}/member/ajax_loginsta.php"); //登陆后的要显示的具体内容  

      DedeXHTTP = null;  

    }  

</script> 

</head> 

 

<body> 

<div id="_userlogin"><!–动态显示的内容区块,ID值必须与上面的document.getElementById('_userlogin') 中 的_userlogin保持一致–> 

    <form name="userlogin" action="{dede:global.cfg_memberurl/}/index_do.php" method="POST"><!–登陆提交的处理页面–> 

    <input type="hidden" name="fmdo" value="login" /><!–定义操作为login–> 

    <input type="hidden" name="dopost" value="login" /><!–定义操作为login–> 

    <input type="hidden" name="keeptime" value="604800" /><!–记住登陆状态的时间,单位秒–> 

    <ul> 

        <li> 

            <label>用户名:</label><input type="text" name="userid" class="text" style="width:100px"/><!–用户名–> 

        </li> 

        <li> 

            <label>密 码:</label> <input type="password" name="pwd" class="text" style="width:100px"/><!–密码–> 

        </li> 

        <li> 

            <label>验证码:</label><input type="text" name="vdcode" class="text" style="width:40px"/> <img id="vdimgck" align="absmiddle" onClick="this.src=this.src+'?'" style="cursor: pointer; margin-left: 0px;" alt="看不清?点击更换" src="../include/vdimgck.php"/> 

        </li> 

        <li><button type="submit" class="btn-1">登录</button>                  <a href="{dede:global.cfg_memberurl/}/index_do.php?fmdo=user&dopost=regnew" >注册帐号</a> <a href="{dede:global.cfg_memberurl/}/resetpassword.php">忘记密码?</a> </li>       

    </ul> 

</div> 

<script language="javascript" type="text/javascript">CheckLogin();</script><!–本函数必须加载,用于获取上面的function CheckLogin()函数–> 

<style> 

#_userlogin{font-size:12px; height:22px; text-align:left;}  

#_userlogin ul {margin:0;}  

#_userlogin ul li{ list-style:none; margin:0; padding:5px 0;}  

#_userlogin ul li input.text{font-size:12px; height:14px;}  

 

#_userlogin .userinfo{  

    width:220px;  

}  

#_userlogin .userinfo .welcome{  

    width:220px;  

    height:24px;  

    margin:12px auto;  

    background:#F9F9F9;  

    border-top:1px solid #EEE;  

    border-bottom:1px solid #EEE;  

    line-height:23px;  

    text-indent:10px;  

    color:#666;  

}  

#_userlogin .userinfo .welcome strong{  

    color:#F60;  

    font-weight:bold;  

}  

#_userlogin .userinfo .userface{  

    width:60px;  

    height:64px;  

    overflow:hidden;  

    padding-left:16px;  

    padding-top:2px;  

    float:left;  

}  

#_userlogin .userinfo .userface a{  

    display:block;  

    margin:0px auto;  

    text-align:center;  

}  

#_userlogin .userinfo .userface a img{  

    width:52px;  

    height:52px;  

    display:block;  

    margin:0px auto 6px;  

    padding:2px;  

    border:1px solid #DDD;  

}  

#_userlogin .userinfo .mylink{  

    width:144px;  

    float:left;  

    overflow:hidden;  

}  

#_userlogin .userinfo .mylink ul{  

    margin:0;  

    padding:0;  

}  

#_userlogin .userinfo .mylink ul li{  

    width:50%;  

    float:left;  

    line-height:21px;  

    text-indent:12px;  

    padding:0;  

}  

#_userlogin .userinfo .mylink ul li a{  

    color:#555;   

}  

.userinfo .uclink{  

    height:31px;  

    line-height:31px;  

    clear:both;  

    overflow:hidden;  

    text-align:center;  

    color:#DDD;  

}  

.userinfo .uclink a{  

    color:#690;  

    margin:0px 2px;  

}  

</style> 

</body> 

</html>

 

好,接下来我们看看效果:

登陆后的显示样式我们用织梦(DedeCMS)自带的,来看看效果:

收藏 (0) 打赏

您的支持是我们前进最大的动力!

打开微信扫一扫,即可进行扫码打赏哦
点赞 (0)

本站声明: 根据2013年1月30日《计算机软件保护条例》2次修订第17条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬,鉴于此,也希望大家遵守相关法律法规使用、研究软件。 1、本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解。 2、下载用户仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担。 3、站内资源均来源于网络公开发表文件或网友投稿发布,如侵犯您的权益,请联系管理员处理。 4、本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用,如有链接无法下载、失效或广告,请联系客服处理。 5、所有资源均收集于互联网仅供学习、参考和研究,请理解这个概念,所以不能保证每个细节都符合你的需求,也可能存在未知的BUG与瑕疵,因本站资源均为可复制品,所 以不支持任何理由的退款兑现,请熟知后再下载。

彤彤模板团 织梦CMS教程 修改DedeCMS会员登录状态(样式)调用代码方法 https://www.xiaoyuerqingfen.cn/11633.html

一家有态度的精品资源分享平台

常见问题
  • 模板团承诺演示效果图均和网站95%一样,并且我们的模板和数据都没有留后门,请放心使用。
查看详情
  • 因为模板具有可复制性和可传播性,模板一旦发货,非质量问题,不支持退换;所以务必请您一定看清楚后再购买。
查看详情

相关文章

评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

  • 0 +

    访问总数

  • 0 +

    会员总数

  • 0 +

    资源总数

  • 0 +

    今日发布

  • 0 +

    本周发布

  • 0 +

    运行天数

开通会员,尊享海量资源下载特权