做網站,我們是認真的!

網站適配電腦+手機端,僅1280元,送2000M阿里云服務器,送com域名+免費備案
網站前端采用靜態系統顯示,后端動態管理,我們承諾網站包收錄,完成網站之后把源碼給客戶!

觀點

互聯網+時代,說建站,談運營與網絡營銷

修改DedeCMS會員登錄狀態(樣式)調用代碼方法

時間:2020-12-21

織夢登陸框想修改顯示樣式怎么辦呢?

有兩種樣式,橫向展示,豎向展示:下面是具體實現代碼

一、橫向樣式

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>

0
首頁
案例
關于
聯系
凯时平台