[Help]Hướng dẫn làm form Login sử dụng jQuery bouncing

Posts Posts : 175

Points : 267

Thanks Thanks : 12

#1kittynam 2012-05-29, 22:51

[Help]Hướng dẫn làm form Login sử dụng jQuery bouncing

BƯớc 1: Tạo site jquery trong DW. ( ngay từ đầu chả hiểu cái này)

Bước 2 : Download jquery.js từ jquery.com bỏ vào site jquery
(cái phần bỏ vào site jquery nghĩa là mình chèn link vô chỗ có tên là jquery à?)
BƯớc 3 : Download file easing.js .Bỏ vào site.

http://demo_lab.freevnn.com/js/easing.js

Download file bouncing.js .Bỏ vào site

http://demo_lab.freevnn.com/js/bouncing.js

Bước 4 : Tạo trang index.php (cái này chỉ dành cho vbb thế forumtion bước này bỏ hả?)

BƯớc 5 : Trong body . Chèn đoạn code sau (TRong <body> hay sao nhỉ? trong footer_bèin phải không nhỉ)

Code:: <a class="link">Login</a> <div id="login"> <form> Username : <input type="text" /><br /><br /> Password : <input type="password"/><br /> <input type="submit" value="Login" /> </form> </div>

"link": là cái link nào?

Bước 6 :

Định dạng CSS . TRong <head></head>. CHèn đoạn code sau :

Code:: <style> .darkCover {height: 1000px;width: 100%;background-color: #CCC;position: absolute;top:0px;left:0px} .darkContent{border:5px solid white;position: absolute;} </style>

Chứ không phải mình chèn vào Css rồi gọi nó ra à?

BƯớc 7 : Chèn code jquery .

Trong <head></head>,Chèn đoạn code sau :

Code:: <script src="jquery.js" type="text/javascript"></script> <script src="easing.js" type="text/javascript"></script> <script src="bouncing.js" type="text/javascript"></script> <script> $(document).ready(function(){ $(".link").each(function(){ $("#login").hide(); $(this).click(function(){ hienForm($("#login")); }); }); }); </script>

Nêu cái này mà chuyển sang forumtion thì ta nên chuyển phần nào..( ý là làm sao để đúng, hợp với forumtion)
HỎi: Thế cái này dùng cho phbb2, punbb, Invision thì khác phần nào?

em đang làm, nhưng thấy thắc mắc nên hỏi, để hoàn thành..hee [Help]Hướng dẫn làm form Login sử dụng jQuery bouncing 253468018

[Help]Hướng dẫn làm form Login sử dụng jQuery bouncing 253468018

Posts Posts : 1496

Points : 229361

Thanks Thanks : 1288

#2admin 2012-05-29, 23:27

[Help]Hướng dẫn làm form Login sử dụng jQuery bouncing

Bước 1: Tương đương với tạo trang HTML và edit templates, có thể hiểu tạo (hoặc chỉnh sửa) trang để sử dụng plugin này.

Bước 2: Cài thư viện jQuery vào trang, forumotion đã có sẵn nên bỏ qua bước này, nó nằm trong overall_header:

Code:: <script src="{JQUERY_PATH}" type="text/javascript"></script>

Bước 3: Nếu file js đó sài được thì copy luôn cái link đó sài, làm xong thì thay sau

Bước 4: Phần này không cần thiết

Bước 5: link ở đây chỉ là cái tên của class.
HTML của form ở đây mình phải sửa theo form login của forumotion, muốn biết form login ra sao thì view source trang www.fmvi.vn/login

Bước 6: CSS này có thể đặt trong css của forum cũng được, đặt trong head cũng được.
Cấu trúc trang web cơ bản thế này:

Code:: <html> <head> Vị trí 1 </head> <body> Vị trí 2 </body> </html>

Khi người ta hướng dẫn đặt trong thẻ head tức là đặt ở vị trí 1. CSS và javascript thường sẽ đặt ở đây. Có 3 cách đặt:

inline (Đặt vào phần tử trong vị trí 2):
Chèn css bằng thuộc tính (style="thuộc tính:giá trị;");
Chèn javascript vào một sự kiện ví dụ onlick="alert('ok')"
Internal:
CSS đặt trong thẻ

Code:

<style type="text/css">Nội dung</style>

javascript đặt trong thẻ

Code:

<script type="text/javascript">Nội dung</script>
External:
upload lên host nào đó rồi thêm src để dẫn link là được:
CSS đặt trong thẻ

Code:

<link rel="stylesheet" type="text/css" href="URL file CSS" /></style>

javascript đặt trong thẻ

Code:

<script type="text/javascript" src="URL file JAVASCRIPT"></script>

Ở trong bước 6 là người ta hướng dẫn đặt css Internal

Bước 7:

Code:: <script src="jquery.js" type="text/javascript"></script> <script src="easing.js" type="text/javascript"></script> <script src="bouncing.js" type="text/javascript"></script> <script> $(document).ready(function () { $(".link").each(function () { $("#login").hide(); $(this).click(function () { hienForm($("#login")); }); }); }); </script>

Lưu ý đặt code đúng thứ tự này, còn CSS ở bước 6 phải đặt trước những dòng này.

Posts Posts : 14

Points : 36

Thanks Thanks : 14

#3Việt K 2012-05-30, 08:17

Re: [Help]Hướng dẫn làm form Login sử dụng jQuery bouncing

[Help]Hướng dẫn làm form Login sử dụng jQuery bouncing 1089588870

: Nội tuyến (inline) là cách chèn css bằng thuộc tính (style="thuộc tính:giá trị;")
Dùng thẻ <style type="text/css"> là cách chèn Internal (bên trong).
Còn cách chèn External (bên ngoài) thì dùng thẻ link chứ không phải thẻ style

Code:: <link rel="stylesheet" type="text/css" href="URL" />

:

[Help]Hướng dẫn làm form Login sử dụng jQuery bouncing 2841064882

:

Posts Posts : 1496

Points : 229361

Thanks Thanks : 1288

#4admin 2012-05-30, 10:29

[Help]Hướng dẫn làm form Login sử dụng jQuery bouncing

Tối hôm qua buồn ngủ quá, phạm sai lầm cơ bản macco
Cảm ơn ViệtK nhé!

#5Sponsored content

Re: [Help]Hướng dẫn làm form Login sử dụng jQuery bouncing

» Khu thành viên » Hỗ trợ[Help]Hướng dẫn làm form Login sử dụng jQuery bouncingYou cannot reply to topics in this forum

Bài cùng chuyên mục

Tìm kiếm

Sơ đồ diễn đàn

Tùy chọn

» Khu thành viên » Hỗ trợ[Help]Hướng dẫn làm form Login sử dụng jQuery bouncingYou cannot reply to topics in this forum

Bài cùng chuyên mục

Tìm kiếm

Chia sẽ

Sơ đồ diễn đàn

Tùy chọn