Tổng hợp jQuery giúp bạn tối ưu hoá Layout

Xu hướng thiết kế web năm 2012 có để cập đến Responsive Layout, tức là một website phải đáp ứng tốt cho việc hiển thị ở những màn hình kích thước đa dạng khác nhau như trên PC, điên thoại di động, máy tính bảng. Hãy xem qua 20 jQuery mà chúng tôi vừa mới tổng hợp, nó sẽ giúp bạn tối ưu hoá và tuỳ biến kích thước cho website của bạn.

JResponsive

Jresponsive sẽ tổ chức nội dung của bạn một cách có hiệu quả,  đáp ứng linh hoạt bản thiết kế.  Nó có thể được áp dụng cho các phần tử phía ngoài và sẽ sắp xếp các phần tử con của nó trong mẫu thiết kế một cách tối ưu trên không gian màn hình, bằng cách “đóng gói” chúng một cách chặt chẽ. Một trong những website nổi tiếng sử dụng kiểu thiết kế này là Pluse

Response.js

Pesponse là một jQuery plugin, nó cung cấp một công cụ xây dựng tối ưu hóa về hiệu năng, trước tiên là đáp ứng cho các website trên giao diện mobile. Nó là điểm chuyển tiếp trong việc sử dụng thuộc tính dữ liệu HTML5 để chuyển đổi linh hoạt giữa các điểm mốc cơ bản vì vậy đáp ứng được nhiều nội dung hơn. API này bao gồm sự kiện kèm theo ở các trình duyệt, tập dữ liệu HTML5 và cách thức lấy hoặc kiểm tra thuộc tính hồi đáp. 

Responsly

Responsly là một công cụ đáp ứng (responsive) vô cùng đơn giản, được viết ra sử dụng CSS3 biến đổi và áp dụng như một jQuery plugin. Hiện tại nó là một slideshow có thể thay đổi kích thước, và sẽ còn nhiều tính năng hơn nữa.

Menu to a Dropdown for Small Screens

Đây là công cụ hỗ trợ thiết kế menu đáp ứng tốt trên nhiều thiết bị khác nhau. Khi mà cửa sổ trình duyệt hẹp, menu ở phía trên bên phải sẽ chuyển từ liên kết menu ngang sang menu sổ xuống.

Doubletake

Doubletake cập nhật linh hoạt thuộc tính src hình ảnh của bạn trên cơ sở chiều rộng trình duyệt. Bắt đầu với một hình ảnh nhỏ, trong HTML của bạn thân thiện với thiết bị mobile. Doubletake sẽ sử dụng một định nghĩa để đặt các thời điểm cập nhật src hình ảnh khi cần.

Tôi sử dụng hai công cụ để hỗ trợ trong việc thay đổi kích thước hình ảnh trên trang – một ở trên máy trạm copy của SLIR và một của dịch vụ web src.sencha.io. Nếu bạn cảm thấy không yên tâm với hình ảnh được thay đổi ở cách trên, bạn có thể dùng một cách đơn giản là copy ra nhiều hình ảnh trên host, sau đó dùng Doubletake để tạo ra các thời điểm để thay đổi kích thước hình ảnh.

FitText

FitText giúp kích thước font chữ trở nên mềm dẻo. Sử dụng plugin này trong mẫu thiết kế đáp ứng (respnsive layout) để có được sử thay đổi dòng tiêu đề trải đều chiều rộng của phần tử chứa nó. Chú ý không sử dụng FitText cho cả đoạn văn bản, nó chỉ nên áp dụng cho các tiêu đề lớn...

jFontSize

Elastislide

Elastiside là một băng chuyền hình ảnh đáp ứng (responsive), sẽ đặt trôi trong trong một bố cục. Nó là một jQuery plugin có thể sắp đặt theo chiều ngang hoặc chiều dọc với mỗi quy đinh số lượng tối thiểu hình ảnh được hiển thị.

Blueberry

Blueberry là một thực nghiệm mã nguồn mở jQuery plugin trình chiếu hình ảnh, nó được viết một cách đặc biệt để làm việc một cách trôi chảy/đáp ứng (responsive) các mẫu thiết kế web

PhotoSwipe

PhotoSwipe là một thư viện hình ảnh miễn phí dựa trên HTML/CSS/Javascript  đặc trưng dành riêng cho các thiết bị mobile

FlexSlider

Seamless Responsive Photo Grid

Bạn có một tập hỉnh ảnh mà  bạn muốn hiển thị, và mục tiêu là lấy chúng đặt cạnh nhau trên cửa sổ trình duyệt không có khoảng hở.  Bởi vì bạn nghĩ  như vậy sẽ rất tuyệt. Cửa sổ trình duyệt có rất nhiều kích thước khác nhau, bạn không quan tâm đến việc nó sẽ thay đổi kích thước, nhưng chúng cần duy trì diện mạo theo tỷ lệ để hiển thị. “Seamless Responsive Photo Grid” sẽ giúp bạn làm điều đó…

Responsive Image Gallery with Thumbnail Carousel

Đây là chức năng trình chiếu hình ảnh với băng chuyền hỉnh ảnh sử dụng Elastislide (đã đề cập ở trên) được xây dựng bởi Mary Lou. Với một số tính năng đặc biệt như xem trình chiếu hình ảnh ở nhiều kích thước màn hình (Responsive image gallery), có thể thay đổi cách xem (xem với băng chuyền hỉnh ảnh Elastislide hoặc không) và có thể điều khiển bằng bàn phím...

rlightbox – A jQuery UI mediabox

Rlightbox là một jQuery UI mediabox, nó có thể hiển thị nhiều kiểu nội dung như hình ảnh, youtube và vimeo viddeos. Nó còn có một số chức năng riêng như panorama và live Re-size...

Dynamic Carousel

FitVids

FitVids là một jQuery plugin nhẹ và dễ sử dụng, hỗ trợ thay đổi dễ dàng kích thước video trong mã nhúng (ember)

jQuery Masonry

Masonry là một thư viện thiết kế lưới javascript. Nó làm việc theo cách định vị các phần tử trong vị trí tối ưu dựa trên không gian thẳng đứng có sẵn,  sắp xếp giống như người thợ xây đặt những viên đá vừa vặn lên một bức tường. Bạn có thể thấy nó được sử dụng nhiều  trên internet.

Isotope

Tương tự như Masonry ở trên nhưng  Isotope là một jQuery plugin không miễn phí, nó có một số chức năng sắp xếp lưới khá thú vị

Adaptive Images in HTML

“Adaptive Images” phát hiện kích thước màn hình của bạn đang xem để tự động tạo, lưu trữ và đưa ra phiên bản thu nhỏ thích hợp của hình ảnh nhúng HTML cho website của bạn. Không đánh dấu những thay đổi cần thiết, nó là mong đợi của người dùng với "Responsive Design" kết hợp với kỹ thuật "Fluid Image".

[Sưu tầm & Dịch]