New Ajax Login ตัวใหม่ครับ

mastergtx

คุณเคยสังเกตไหมครับ เมื่อเราจะปิดระบบ Windows XP หรือ Vista เมื่อคลิกปุ่ม Turn Off Computer แล้วสักพักสีมันจะจางค่อยๆเพี้ยนลง ajax ตัวนี้ก็จะทำงานคล้ายๆ กันหรือเปล่า ดูรูปประกอบงับ



ตัวอย่างดูของแท้ ได้ที่
www.com-bannok.com เอาเมาส์ไปคลิกที่ปุ่ม LOGIN ครับก็จะเห็น
สำหรับ Discuz 6.0.0 เท่านั้น
ลองรับ IE, Firefox, Opera (ถ้าจะให้แสดงผลเต็มรูปแบบต้องรันดูที่ Firefox กับ Opera นะครับม, ส่วน IE จะมีปัญหาตอน ถ้าโหลดหน้าเว็บยังไม่ครบเช่นเหลือรูปภาพเพียงรูปเดียว เมื่อคลิกที่ login แล้ว จะมีปัญหานิดหน่อยงับอิอิ ดังนั้นก็ต้องรอให้มันโหลดเสร็จก่อนสำหรับ IE แล้วค่อยคลิ๊กมันจะได้ไม่มีปัญหา)

วิธีติดตั้ง 3 ขั้นตอนง่ายๆ ครับ
--------------------
step 1
เลือก templates ของสกิน หรือสกินที่คุณต้องการให้ mod ตัวนี้ทำงาน

เปิดไฟลล์ header.htm
ที่อยู่ใน public_html/templates/สกินxxx/header.htm
หา

1. <script type="text/javascript" src="include/javascript/ajax.js"></script>

คัดลอกไปที่คลิปบอร์ด

เคาะ Enter แล้ววางโค้ดนี้ด้านล้างงับ

1. <script type="text/javascript" src="include/javascript/ajax_login.js"></script>

คัดลอกไปที่คลิปบอร์ด

อย่าเพิ่ง Save ต่อไปหา

1. <a href="$link_login">{lang login}</a>

คัดลอกไปที่คลิปบอร์ด

แทนด้วย

1. <a onclick="AlertLogin('$bbname','$sitename',this);">{lang login}</a>

คัดลอกไปที่คลิปบอร์ด

Save

--------------------

step 2
เปิดไฟลล์ css.htm ที่อยู่ใน templates ของสกินที่คุณใช้
ที่อยู่ใน public_html/templates/สกินxxx/css.htm
เคาะ Enter ในบรรทัดสุดท้าย แล้ววางโค้ดนี้ต่อ (ว่างในบรรทัดสุดท้าย)

1. #login{width:515px; height:330px; margin:0; padding:0; list-style:none;}
   
2.                 html>body #login{background:url({IMGDIR}/login.png) repeat;}
   
3.                 * html #login{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src="{IMGDIR}/login.png"); background:none;}
   
4.                 #login li{position:absolute;}
   
5.                 #login input{width:192px; height:18px; border:0;}
   
6.         #close{top:39px; right:55px;}
   
7.                 #close a{display:block; width:43px; height:16px;}
   
8.                 html>body #close a{background:url("{IMGDIR}/close.png") 0 0 no-repeat;}
   
9.                 * html #close a{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src="{IMGDIR}/close.png"); background:none;}
   
10.                 #close a:hover{background-position:0 -16px;}
    
11.                 #close a:active{background-position:0 -32px;}
    
12.         #boxuname{top:150px !important; top:148px; left:160px;}
    
13.         #boxupass{top:187px !important; top:185px; left:160px;}
    
14.         .loginbt{top:160px; right:80px;}
    
15. .menubox{overflow:hidden; width:100%; margin:0 auto; margin-top:-10px; text-align:left; border-bottom:1px dotted #E2ECF2;}
    
16. #logo_login a{display:block; width:49px; height:49px; margin-top:-3px; padding:0;}
    
17.                 html>body #logo_login a{background:url("{IMGDIR}/logo.png") 0 0 no-repeat;}
    
18.                 * html #logo_login a{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src="{IMGDIR}/logo.png"); background:none;}
    
19.                 #logo_login a:hover{background-position:0 -49px;}
    
20.                 #logo_login a:active{background-position:0 -98px;}

คัดลอกไปที่คลิปบอร์ด

-----------------------

Step 3
ดาวน์โหลดไฟลล์นี้



ต้องขออภัยในความไม่สะดวกผมไม่ได้แบนไฟล์ให้ในนี้ คือว่ามันโพสไม่ได้ครับ ลองโพสหลายครั้งแล้ว


อัพโหลดไฟล์ที่แนบมาให้ไปไว้ตำแหน่งดังนี้
ไฟลล์สคริป
ajax_login.js
public_html/include/javascript/ajax_login.JS

ไฟลล์รูปภาพ
close.png, logo.png, login.png
public_html/images/xxx
วางในสกินที่คุณใช้งาน เช่นของผม air ผมก็จะวาง public_html/images/default ประมาณนี้ครับ วางไม่ถูกที่มันไม่แสดงรูปนะครับ

มันเป็น <a onclick="xx">xxx</a> ไม่ใช้ <a href="x">xxx</a> นะครับดังนั้นไม่ต้องแปลกใจเมื่อนำเมาส์ss ไปวางแล้วมันไม่เปลี่ยนเป็นรูปมือ

ปรับแต่งตามใจฉันได้ที่ ajax_login.JS

เช่น เปลี่ยนสีพื้นหลังใหม่ จัดซ้าย, กลาง, ขวา ตามสบาย แต่ระวังเพียนละกันครับ

1. shield.style.background = "#333";
   
2. shield.style.textAlign = "center";

คัดลอกไปที่คลิปบอร์ด

ตัวอย่างต้องขออภัยเมื่อวานมันไม่ทำงาน คือผมไปเปลี่ยนสกุลไฟล์เป็นตัวใหญ่มันเลยไม่ขึ้นให้ดู ตอนนี้ขึ้นแล้วครับ

[ แก้ไขล่าสุด mastergtx เมื่อ 2008-2-29 13:26 ]

ting1

ขอบคุณครับเบริด์ผมได้ของใหม่อีกแย้วไชโยๆๆๆๆๆๆๆ

Master_X

สวยงามครับ แต่ดูมันอืดๆยังไงไม่รู้ตอนกดแล้ว หรือผมเปนคนเดียวหว่า

mastergtx

เป็นที่การ์ดจอครับ  ต้องใช้การประมวลผลดานกราฟิกเข้ามาช่วยนิดหน่อยครับหรือเปล่า :)

AdisakMu

โทษนะครับ มันโหลดไม่ได้ครับ