|
 |
| |
ช่วยอธิบาย วิธีการ login โดยไม่ทำให้หน้าจอกระพิบ ของเว็บนี้หน่อยครับ |
| |
 |
|
|
 |
 |
|
ช่วยอธิบาย วิธีการ login ของเว็บนี้หน่อยครับ
http://www.nekopost.net/
ผมอยากรู้ว่าเขาใช้วิธี ไหน อย่างไร ที่ทำการlogin โดยที่หน้าจอไม่กระพิบ
และแสดงแบบในรูปที่ผมจะเอาให้ดูต่อไปนี้ครับ
นี้เป็นรูป ก่อนlogin เวลาคลิกที่loginจะมีบล็อกเลื้อนออกมาให้loginเหมือนในรูปครับ **ผมรู้ว่านี้ใช้ jQuery หรือผมเข้าใจผิดครับ**
นี้เป็นรูป หลังlogin พอ login เเล้ว เว็บจะแสดง username ของ idทีloginครับ เเละพอกดลูกศร จะมีบล็อกเลือนลงมา เหมือนในรูปครับ
เเล้วก็นี้เป็นcodeหน้าเว็บที่ผมกำลังทำอยู่ครับ ซึ่งผมก็ก็อบๆ แก้ๆ มาจากเว็บต้นฉบับนั้นอะครับ
Code (PHP)
<!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" lang="th">
<head>
<title>Manga, Doujin, Novel online | hanes</title>
<meta http-equiv="content-language" content="th" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="description" content="ชุมชุนมังกะออนไลน์ โดจิน นิยาย" />
<meta name="keywords" content="hanes, มังกะออนไลน์, manga online, doujin, novel" />
<!-- CSS AND JS API -->
<link rel="stylesheet" href="stylesheet/reset.css" type="text/css" media="all" />
<link rel="stylesheet" href="stylesheet/neko_style.css" type="text/css" />
<link rel="stylesheet" href="stylesheet/neko_index.css" type="text/css" />
<link rel="stylesheet" href="stylesheet/awesome.css" type="text/css" />
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<!--[if lte IE 8]>
<script src="js/html5.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>
<script>
$(document).ready(function(){
$(".footer_items").hide();$(".user_panel").click(function(){$(".user_menu").slideToggle("fast");$(".user_panel").hasClass("user_panel_active")?$(".user_panel").removeClass("user_panel_active"):$(".user_panel").addClass("user_panel_active")});$(".bullet_guest").click(function(){$(".user_menu").slideToggle("fast");$(".guest_panel").hasClass("user_panel_active")?$(".guest_panel").removeClass("user_panel_active"):$(".guest_panel").addClass("user_panel_active")});
$(".btn_submit_frm_sign_in").click(function(a){a.preventDefault();$("#frm_sign_in").submit()});
});
</script>
<!-- START HEADER -->
<section class="box curve box_shadow">
<div><img src="stylesheet/images/header-logo2.png" width="100%" /></div>
<div class="clear"> </div>
<div class="post_box">
<nav>
<ul>
<li><a href="http://www.nekopost.net/" title="Nekopost Home">Home</a></li>
<li><a href="http://www.nekopost.net/blog/" title="Nekopost Blog">Blog</a></li>
<li><a href="http://www.nekopost.net/project/manga" title="Nekopost Manga">Manga</a></li>
<li><a href="http://www.nekopost.net/project/doujin" title="Nekopost Doujin">Doujin</a></li>
<li><a href="http://www.nekopost.net/project/novel" title="Nekopost Novel">Novel</a></li>
<li><a href="http://www.iamclaz.net/bbs" title="BBS Community">Community</a></li>
</ul>
</nav>
<div class="user_panel">
<div class="bullet"></div>
<img src="http://www.nekopost.net/nekopost_fs/avatar/username.jpg" class="avatar" />
<b>username</b><br/>
<small>Member</small>
<div class="user_menu">
<ul>
<li><a href="http://www.nekopost.net/user/setting">Account Setting</a></li>
<li><a href="http://www.nekopost.net/user/submit_work">Submit Work</a></li>
<li><a href="http://www.nekopost.net/user/sign_out">Sign out</a></li>
</ul>
</div>
</div>
<div class="guest_panel">
<b class="bullet_guest">Register - Sign in</b>
<div class="user_menu">
<form action="http://www.nekopost.net/index.php/user/sign_in" method="post" accept-charset="utf-8" id="frm_sign_in">
<input type="text" name="ip_username" class="input_txt curve" /><br/>
<input type="password" name="ip_password" class="input_txt curve" />
<a href="http://www.nekopost.net//user/sign_in" class="awesome small btn_submit_frm_sign_in">Sign in</a>
<div style="height: 4px;"> </div>
<a href="http://www.nekopost.net/register">Register</a><br/>
<a href="http://www.nekopost.net/forget_password" class="btn_submit">Forget Password</a>
</form>
</div>
</div>
<div class="clear"> </div>
</div>
<div class="clear"> </div>
</section>
<!-- END HEADER -->
<section class="bg_wood box box_shadow curve update_box">
<div class="item_list left">
<h1 class="icon_novel">Update Novel</h1>
<div class="clear"> </div>
<ul><a href="project/novel/demonophobia"><li class="item">
<img src="http://www.nekopost.net/nekopost_fs/collectNovel/641/641_preview.jpg" />
<font color="#ffffff"><b>demonophobia</b></font>
<br/>Ch.8 สิ่งที่แปลกไป <br/>on <b style="color: #776c50;">4 days ago</b>
<div class="clear"> </div>
</li></a>
</ul>
<div class="last"><a href="http://www.nekopost.net/project/novel" class="small awesome">More</a></div>
</div>
<div class="item_list left center">
<h1 class="icon_doujin">Update Doujin</h1>
<div class="clear"> </div>
<ul>
<a href="project/doujin/forget_me_not"><li class="item">
<img src="http://www.nekopost.net/nekopost_fs/collectDoujin/151/151_preview.jpg" />
<font color="#ffffff"><b>Forget Me Not</b></font>
<br/>Ch.39 Act.38 : Crimson night 2 <br/>on <b style="color: #776c50;">Yesterday</b>
<div class="clear"> </div>
</li></a>
</ul>
<div class="last"><a href="http://www.nekopost.net/project/doujin" class="small awesome">More</a></div>
</div>
<div class="item_list right">
<h1 class="icon_manga">Update Manga</h1>
<div class="clear"> </div>
<ul>
<a href="project/manga/okujyou_hime"><li class="item">
<img src="http://www.nekopost.net/nekopost_fs/collectManga/507/507_preview.jpg" />
<font color="#ffffff"><b>Okujyou Hime</b></font>
<br/>Ch.7 Chapter 7 <br/>on <b style="color: #776c50;">Today</b>
<div class="clear"> </div>
</li></a>
</ul>
<div class="last"><a href="http://www.nekopost.net/project/manga" class="small awesome">More</a></div>
</div>
<div class="clear"> </div>
</section>
<!-- START FOOTER -->
<section class="box curve box_shadow">
<div class="left">
<b>About</b> | <b>FAQ</b> | <b>Contact</b><br /><small>Powered by Kissover</small>
</div>
<div class="right">
HANES.COM Since 2011<br/><small>Best view in 1280*700 and more. Good view in Google Chrome,Mozilla Firefox</small>
</div>
<div class="clear"> </div>
</section>
<!-- END FOOTER -->
</body>
</html>
เเละนี้เป็นหน้าตา หน้าเพจที่ผมทำครับ คือuser_panel มันไม่หายตอนก่อน ก่อนlogin อะครับ เเละผมไม่รู้ว่าจะทำอย่างไงให้login เเล้วมันแสดง user_panel เหมือนกับเว็บต้นฉบับอะครับโดยไม่ทำให้หน้าจอกระพิบอะครับ
ขอบคุณครับ
Tag : HTML/CSS, Action Script, Ajax, jQuery, CakePHP
|
ประวัติการแก้ไข
2012-01-02 12:54:31
2012-01-02 12:55:09
|
 |
 |
 |
 |
| Date :
2012-01-02 12:51:42 |
By :
kissover |
View :
1960 |
Reply :
4 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
อาา ไม่มีคนตอบเลยT_T
|
| |
|
|
| |
| Date :
2012-01-02 23:37:51 |
By :
kissover |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
หาอ่านเรื่อง ajax ครับ บทเรียนไทยครีเอทก็มีนะ หรือจะไปใช้ jQuery.ajax ก็ได้
|
| |
|
|
| |
| Date :
2012-01-03 11:11:24 |
By :
ikikkok |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 04
|
