엠파스 로그인은 쉬세요 JQuery overlabel 정보
엠파스 로그인은 쉬세요 JQuery overlabel첨부파일
본문
레이블값을 텍스트필드에 삽입해줍니다.
01.outlogin.skin.1.php을 엽니다
jquery.overlabel.js의 경로를 확인하시고 스크립트 추가
<script type="text/javascript" src="<?=$g4['path']?>/jquery/jquery.overlabel.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("label.overlabel").overlabel();
});
</script>
02.텍스트필드를 아래로 바꿉니다.
스타일추가하고
<style type="text/css" media="all">
#login {position:relative;}
label.overlabel-apply {
position:absolute;
top:6px;
left:5px;
z-index:1;
color:#999;
}
</style>
<div id="login">
<label for="mb_id" class="overlabel">아이디</label>
<input type="text" name="mb_id" id="mb_id" value="" /><br />
<label for="mb_password" class="overlabel">비밀번호</label>
<input type="password" name="mb_password" id="mb_password" value="" />
</div>
03.엠파스 로그인참조 관련 스크립트를 지웁니다.
추천
3
3
댓글 6개
엠파스 이젠 쉴때도 되었지요 ^^
엠파스 이젠 쉴때도 되었지요 ^^
근대 우ㅐ 적용이 안될까 ㅠㅠ
근대 우ㅐ 적용이 안될까 ㅠㅠ
당연한소리겠지만 jquery.js도 include되야합니다.
jquery를 사랑하시는분이라면 head.sub.php에 불러오시면 편합니다.
jquery를 사랑하시는분이라면 head.sub.php에 불러오시면 편합니다.
head.sub.php 에 jquery.js 와 jquery.overlabel.js 올렸구요... (경로정확 ㅠㅠ)
<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
$url = '';
if ($g4['https_url']) {
if (preg_match("/^\./", $urlencode))
$url = $g4[url];
else
$url = $g4[url].$urlencode;
} else {
$url = $urlencode;
}
?>
<script type="text/javascript" src="<?=$g4[path]?>/js/capslock.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("label.overlabel").overlabel();
});
</script>
<!-- 로그인 전 외부로그인 시작 -->
<table width="190" cellpadding=0 cellspacing=0 border=0>
<colgroup width='18px'><colgroup width='100%'><colgroup width='18px'>
<tr>
<td height=18><img src='<?=$outlogin_img?>/line2_lt.gif'></td>
<td class='line2_top'><img src='<?=$g4[path]?>/images/nbsp.gif'></td>
<td><img src='<?=$outlogin_img?>/line2_rt.gif'></td>
</tr>
<tr>
<td class='line2_left' rowspan=2><img src='<?=$g4[path]?>/images/nbsp.gif'></td>
<td><img src='<?=$outlogin_img?>/login_title.gif'></td>
<td class='line2_right' rowspan=2><img src='<?=$g4[path]?>/images/nbsp.gif'></td>
</tr>
<tr>
<td valign=top>
<form name="fhead" method="post" onsubmit="return fhead_submit(this);" autocomplete="off" style="margin:0px;">
<input type="hidden" name="url" value="<?=$url?>">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="110">
<table width="110" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="110" colspan="2" align="center"><label for="mb_id" class="overlabel">아이디</label><input type="text" name="mb_id" id="mb_id" value="" class="ween" style="width:95%" /></td>
</tr>
<tr>
<td width="110" colspan="2" align="center"><label for="mb_password" class="overlabel">비밀번호</label><input type="password" name="mb_password" id="mb_password" value="" class="ween" style="width:95%" /></td>
</tr>
</table>
</td>
<td width="40" height="40" rowspan="2" align="center" valign=top><input type="image" src="<?=$outlogin_skin_path?>/img/login_btn_<?=$config[cf_hometype]?>.gif" width="40" height="40"></td>
</tr>
<tr><td colspan=2 height=5></td></tr>
<tr><td colspan=2><a href="javascript:win_password_forget();"><img src="<?=$outlogin_skin_path?>/img/btn_lost.gif" border="0"></a><a href="<?=$g4[bbs_path]?>/register.php"><img src="<?=$outlogin_skin_path?>/img/btn_join.gif" border="0"></a></td></tr>
</table>
</form>
</td>
</tr>
<tr>
<td height=18><img src='<?=$outlogin_img?>/line2_lb.gif'></td>
<td class='line2_bottom'><img src='<?=$g4[path]?>/images/nbsp.gif'></td>
<td><img src='<?=$outlogin_img?>/line2_rb.gif'></td>
</tr>
</table>
<script language="JavaScript">
function fhead_submit(f)
{
if (!f.mb_id.value) {
alert("회원아이디를 입력하십시오.");
f.mb_id.focus();
return false;
}
if (document.getElementById('mb_password').style.display!='none' && !f.mb_password.value) {
alert("패스워드를 입력하십시오.");
f.mb_password.focus();
return false;
}
<?
if ($g4[https_url])
echo "f.action = '$g4[https_url]/$g4[bbs]/login_check.php';";
else
echo "f.action = '$g4[bbs_path]/login_check.php';";
?>
return true;
}
</script>
<!-- 로그인 전 외부로그인 끝 -->
<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
$url = '';
if ($g4['https_url']) {
if (preg_match("/^\./", $urlencode))
$url = $g4[url];
else
$url = $g4[url].$urlencode;
} else {
$url = $urlencode;
}
?>
<script type="text/javascript" src="<?=$g4[path]?>/js/capslock.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("label.overlabel").overlabel();
});
</script>
<!-- 로그인 전 외부로그인 시작 -->
<table width="190" cellpadding=0 cellspacing=0 border=0>
<colgroup width='18px'><colgroup width='100%'><colgroup width='18px'>
<tr>
<td height=18><img src='<?=$outlogin_img?>/line2_lt.gif'></td>
<td class='line2_top'><img src='<?=$g4[path]?>/images/nbsp.gif'></td>
<td><img src='<?=$outlogin_img?>/line2_rt.gif'></td>
</tr>
<tr>
<td class='line2_left' rowspan=2><img src='<?=$g4[path]?>/images/nbsp.gif'></td>
<td><img src='<?=$outlogin_img?>/login_title.gif'></td>
<td class='line2_right' rowspan=2><img src='<?=$g4[path]?>/images/nbsp.gif'></td>
</tr>
<tr>
<td valign=top>
<form name="fhead" method="post" onsubmit="return fhead_submit(this);" autocomplete="off" style="margin:0px;">
<input type="hidden" name="url" value="<?=$url?>">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="110">
<table width="110" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="110" colspan="2" align="center"><label for="mb_id" class="overlabel">아이디</label><input type="text" name="mb_id" id="mb_id" value="" class="ween" style="width:95%" /></td>
</tr>
<tr>
<td width="110" colspan="2" align="center"><label for="mb_password" class="overlabel">비밀번호</label><input type="password" name="mb_password" id="mb_password" value="" class="ween" style="width:95%" /></td>
</tr>
</table>
</td>
<td width="40" height="40" rowspan="2" align="center" valign=top><input type="image" src="<?=$outlogin_skin_path?>/img/login_btn_<?=$config[cf_hometype]?>.gif" width="40" height="40"></td>
</tr>
<tr><td colspan=2 height=5></td></tr>
<tr><td colspan=2><a href="javascript:win_password_forget();"><img src="<?=$outlogin_skin_path?>/img/btn_lost.gif" border="0"></a><a href="<?=$g4[bbs_path]?>/register.php"><img src="<?=$outlogin_skin_path?>/img/btn_join.gif" border="0"></a></td></tr>
</table>
</form>
</td>
</tr>
<tr>
<td height=18><img src='<?=$outlogin_img?>/line2_lb.gif'></td>
<td class='line2_bottom'><img src='<?=$g4[path]?>/images/nbsp.gif'></td>
<td><img src='<?=$outlogin_img?>/line2_rb.gif'></td>
</tr>
</table>
<script language="JavaScript">
function fhead_submit(f)
{
if (!f.mb_id.value) {
alert("회원아이디를 입력하십시오.");
f.mb_id.focus();
return false;
}
if (document.getElementById('mb_password').style.display!='none' && !f.mb_password.value) {
alert("패스워드를 입력하십시오.");
f.mb_password.focus();
return false;
}
<?
if ($g4[https_url])
echo "f.action = '$g4[https_url]/$g4[bbs]/login_check.php';";
else
echo "f.action = '$g4[bbs_path]/login_check.php';";
?>
return true;
}
</script>
<!-- 로그인 전 외부로그인 끝 -->
스타일 추가하시고
<div id="login">
<label for="mb_id" class="overlabel">아이디</label><input type="text" name="mb_id" id="mb_id" value="" class="ween" style="width:95%" /></div>
<div id="login"><label for="mb_password" class="overlabel">비밀번호</label><input type="password" name="mb_password" id="mb_password" value="" class="ween" style="width:95%" /></div>
이렇게 싸주세요
전 table을 안써서 미쳐 생각을 못했네요
<div id="login">
<label for="mb_id" class="overlabel">아이디</label><input type="text" name="mb_id" id="mb_id" value="" class="ween" style="width:95%" /></div>
<div id="login"><label for="mb_password" class="overlabel">비밀번호</label><input type="password" name="mb_password" id="mb_password" value="" class="ween" style="width:95%" /></div>
이렇게 싸주세요
전 table을 안써서 미쳐 생각을 못했네요
좋은팁 감사합니다.
아이디, 비밀번호 글씨가 겹치는데 좀더 생각해보니 그럴수 밖에 없네요.
해결책으로....
<div class="mb_id">
<label for="mb_id" class="overlabel">아이디</label>
<input type="text" name="mb_id" id="mb_id" class="mb_id" value="">
</div>
<div class="mb_password">
<label for="mb_password" class="overlabel">비밀번호</label>
<input type="password" name="mb_password" id="mb_password" class="mb_password" value="">
</div>
처럼 아이디영역과 비번영역을 감싸는 각각의 div영역을 만들고 거기에 position:relative;속성을 주면 되는군요.
/*for overlabel*/
.outlogin .inner .left .mb_id {position:relative;}
.outlogin .inner .left .mb_password {position:relative;}
label.overlabel {position:absolute; top:3px; left:9px; z-index:1; color:#7dacd8;}
<div id="outlogin" class="outlogin">
<div class="inner">
<div class="left">
<div class="mb_id">
<label for="mb_id" class="overlabel">아이디</label>
<input type="text" name="mb_id" id="mb_id" class="mb_id" value="">
</div>
<div class="mb_password">
<label for="mb_password" class="overlabel">비밀번호</label>
<input type="password" name="mb_password" id="mb_password" class="mb_password" value="">
</div>
</div>
</div>
</div>
아이디, 비밀번호 글씨가 겹치는데 좀더 생각해보니 그럴수 밖에 없네요.
해결책으로....
<div class="mb_id">
<label for="mb_id" class="overlabel">아이디</label>
<input type="text" name="mb_id" id="mb_id" class="mb_id" value="">
</div>
<div class="mb_password">
<label for="mb_password" class="overlabel">비밀번호</label>
<input type="password" name="mb_password" id="mb_password" class="mb_password" value="">
</div>
처럼 아이디영역과 비번영역을 감싸는 각각의 div영역을 만들고 거기에 position:relative;속성을 주면 되는군요.
/*for overlabel*/
.outlogin .inner .left .mb_id {position:relative;}
.outlogin .inner .left .mb_password {position:relative;}
label.overlabel {position:absolute; top:3px; left:9px; z-index:1; color:#7dacd8;}
<div id="outlogin" class="outlogin">
<div class="inner">
<div class="left">
<div class="mb_id">
<label for="mb_id" class="overlabel">아이디</label>
<input type="text" name="mb_id" id="mb_id" class="mb_id" value="">
</div>
<div class="mb_password">
<label for="mb_password" class="overlabel">비밀번호</label>
<input type="password" name="mb_password" id="mb_password" class="mb_password" value="">
</div>
</div>
</div>
</div>