[Web] Canh đều các phần tử với jQuery và CSS

Hôm trước tôi tình cờ đọc được một bài viết khá hay của tác giả Janko với thủ thuật canh giữa các phần tử trong form, có thể nhiều bạn đọc rồi nhưng có nhiều bạn chưa, tôi mạo muội dịch và giải thích thêm về bài viết này. Thông thường trong một form, bạn muốn canh đều các label với các thẻ input như hình sau :

Justify Elements Jquery CSS

Trong trường hợp này thì tôi thường dùng CSS nhiều hơn jQuery, cụ thể là tôi đưa thẻ label và input vào các thẻ div/span và thiết lập thuộc tính của nó là float:left . Đó la cách thủ công, nhưng với bài viết của Janko , tôi học hỏi được thủ thuật rất đơn giản và hiệu quả.

Ví dụ, tôi có đoạn HTML sau đây:

<h3>Trước khi canh đều</h3>
Username : <input size="20" type="text" />
Password : <input size="20" type="text" />
Email : <input size="20" type="text" />
Website : <input size="20" type="text" />
<h3>Sau khi canh đều</h3>
Username : <input class="input" size="20" type="text" />
Password : <input class="input" size="20" type="text" />
Email : <input class="input" size="20" type="text" />
Website : <input class="input" size="20" type="text" />

Một chút CSS cho các thẻ

span, .input{
float:left;
display: block;
}

Thuật toán canh giữa các phần tử cũng đơn giản, chương trình sẽ duyệt qua tất cả thẻ span, tìm độ rộng lớn nhất và gán cho biến max. Sau đó lại dùng thuộc tính width() của jQuery để thiết lập độ rộng cho toàn bộ thẻ span.

$(document).ready(function() {
var max = 0;
// Lấy độ rộng lớn nhất của thẻ span
$("span").each(function() {
if ($(this).width() > max) {
max = $(this).width();
}
});
// Gán cho tất cả các phần tử có độ rộng lớn nhất (cộng thêm 15px)
$("span").width(max + 15);
});

Tổng kết,

Cảm ơn tác giả Janko đã cung cấp một thủ thuật khá hay để canh đều các phần tử trong form. Hi vọng bài viết này có ích với các bạn. Thân ái !

Nguồn : www.jankoatwarpspeed.com/post/2008/07/09/Justify-elements-using-jQuery-and-CSS.aspx

Tấn Việt

Tôi lập trang web này để thỏa mãn sở thích viết cái gì đó vui vui khi rãnh rỗi và đồng thời cũng chia sẻ những gì tôi biết hoặc đọc đâu đó trên mạng về Lập trình web. Tôi hi vọng những bài viết này sẽ giúp ích cho các bạn. Thân ái!

You may also like…

3 Responses

  1. Mạnh cào says:

    Bài viết hay ! thanks đã chia sẽ kinh nghiệm nhé ! 😀

  2. gacon says:

    Gap may truong gop nay dung the table la nhanh nhat.

  3. dxeon says:

    Thật ra đây là phương pháp sử dụng jquery ko nhanh và tiện bằng sử dụng css 🙂

    Ở đây khi style thẻ span và input thì thêm width cho thẻ span là ok 😀

    Thường thì input m sử dụng thẻ p thay cho thẻ span, và ko sử dụng 🙂