Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Grid-A-Licious

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi banbaonylong, 3/11/12.

Lượt xem: 2,736

  1. banbaonylong Ko phải assmin

    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 cssjavascript. Đặ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({width225});
    gutter (độ rộng khoảng cách giữa 2 cột div)
    Mặc định: 20px
    PHP:
    $("#container").gridalicious({gutter20});
    selector
    Mặc định: .item
    PHP:
    $("#container").gridalicious({selector'.item'});
    animate
    Mặc định: false
    PHP:
    $("#container").gridalicious({animatefalse});
    animationOption
    Mặc định:
    PHP:
    $("#container").gridalicious({
      
    animatetrue,
      
    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({
      
    animatetrue,
      
    animationOptions: {
        
    queuetrue,
        
    speed200,
        
    duration300,
        
    effect'fadeInOnAppear',
        
    completeonComplete
      
    }
    });

    Demo và tải

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

    Tham khảo: suprb.com

    ...
    Quang Tiến, xuangiang1011, sinh2 người khác thích bài viết này.
  2. sinh

    sinh Thành viên cấp 1

    cung duoc do nhi, nhung ma luc dau khi tim hieu minh len code tay, cai nay giup minh tham khao thoi, cam on ban
  3. thanh_rossi

    thanh_rossi Thành viên cấp 2

    Vẫn thích dùng boostrap, 960 grid hơn.
    -> Responsive web design

Ủng hộ diễn đàn