Grid-A-Licious

Grid-A-Licious?

Grid-A-Licious là một cách dàn trang sử dụng mạng lưới (grid) các div bằng css và javascript. Đặc biệt, các div có thể co giãn tùy thuộc vào kích thước của "cái-dùng- để-hiển-thị" (scalable) và tải (load) lần lượt lên trang hiển thị. Ví dụ như: tablet hay smartphone để dọc, để xuôi, màn hình HD hay màn hình vi tính thường v.v... Grid-A-Licioussẽ giúp co giãn để hiển thị vừa đủ lên toàn màn hình.

Ưu điểm của Grid-A-Licious là lạ và đẹp, thích hợp đối với các trang web chia sẻ, album ảnh hay blog cá nhân tương tác cao. Nó cũng hợp thời do hiển thị na ná giao diện metro của Windows 8 vừa ra.

Một số tùy chọn
width (độ rộng mỗi div)
Mặc định: 225px

PHP:

$("#container").gridalicious({width: 225});

gutter (độ rộng khoảng cách giữa 2 cột div)
Mặc định: 20px

PHP:

$("#container").gridalicious({gutter: 20});

selector
Mặc định: .item

PHP:

$("#container").gridalicious({selector: '.item'});

animate
Mặc định: false

PHP:

$("#container").gridalicious({animate: false});

animationOption
Mặc định:

PHP:

$("#container").gridalicious({
  animate: true,
  animationOptions: { […] }
});

• Queue: Xếp lần lượt các object (cụ thể là div). Mặc định: true
• Speed: Tốc độ hiển thị (render) từng object (tính theo millisecond). Mặc định: 200
• Duration: Khoảng thời gian duy trì hiệu ứng animation (tính theo millisecond). Mặc định: 300
• Effect: Hiện tại mới chỉ có fadeInOnAppear. Mặc định: fadeInOnAppear
• Complete: Thực thi một tác vụ nào đó sau khi hiệu ứng kết thúc. Mặc định: function()

PHP:

$("#container").gridalicious({
  animate: true,
  animationOptions: {
    queue: true,
    speed: 200,
    duration: 300,
    effect: 'fadeInOnAppear',
    complete: onComplete
  }
});

Demo và tải

Demo: (Xem tại chỗ)
Link download: Sourcecode (Pass: vietdesigner.net)

Tham khảo: suprb.com