.

Post new topic  Reply to topic

 » 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

#1kittynam 2012-05-29, 22:51 http://a1club.123.st
50,32,5030,20,2045,40,2540,20,2025,35,7050,15,3055,30,4545,30,6055,15,4045,20,45
Trả lời nhanh[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
#2admin 2012-05-29, 23:27 http://www.fmvi.vn
50,32,5030,20,2045,40,2540,20,2025,35,7050,15,3055,30,4545,30,6055,15,4045,20,45
Trả lời nhanh[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.
#3Việt K 2012-05-30, 08:17 http://c3zone.forumj.net/
50,32,5030,20,2045,40,2540,20,2025,35,7050,15,3055,30,4545,30,6055,15,4045,20,45
Trả lời nhanhRe: [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:
#4admin 2012-05-30, 10:29 http://www.fmvi.vn
50,32,5030,20,2045,40,2540,20,2025,35,7050,15,3055,30,4545,30,6055,15,4045,20,45
Trả lời nhanh[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
50,32,5030,20,2045,40,2540,20,2025,35,7050,15,3055,30,4545,30,6055,15,4045,20,45
Trả lời nhanhRe: [Help]Hướng dẫn làm form Login sử dụng jQuery bouncing

You are not connected. Please login or register

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

Tìm kiếm

Tìm kiếm

Tìm theo chủ đề

Bài cùng tác giả

Tên thành viên

Chia sẻ

Chia sẽ

Bắt đầu

Sơ đồ

Sơ đồ diễn đàn

Thiết đặt

Tùy chọn

Cá nhân hóaCác hình xếpĐánh dấu đã đọcThống kê chi tiếtTình hình truy cập Trợ giúp
RSS
Thông tin
Liên hệ
Chatbox
Kiểu gõ