Khi phát triển website responsive( xu hướng thiết kế website năm 2014), bạn chắc chắn sẽ gặp những thiết kế đòi hỏi phải tổ chức lại một số HTML. Thông thường công việc sắp xếp tùy ý như này có thể được thực hiện thông qua sự trợ giúp của những thủ thuật CSS thông minh, nhưng nếu việc này không thể hoặc không thực tiễn, bạn có thể phải nhờ đến một số javascript để tạo độ rộng cho trình duyệt.
Lúc này, hãy sử dụng Intention.js. Intention.js là một script nhỏ nhưng vô cùng mạnh mẽ do Dow Jones phát triển. Nếu bạn đang mắc kẹt với một thiết kế đòi hỏi nhiều sự điều chỉnh động, công cụ này sẽ giúp bạn thoát khỏi những suy nghĩ đau đầu không cần thiết.
Dependencies (vật phụ thuộc)
Để sử dụng intention.js, bạn cần có thư viện jQuery, Underscore.js, và context.js. (bạn có thể sử dụng Context.js hoặc không, tùy thuộc vào việc bạn có muốn tạo ngữ cảnh riêng hay không).
Ví dụ 1: Sắp xếp lại/ tổ chức lại
Giả sử bạn có một thiết kế trong đó điều hướng hàng đầu của nó phải di chuyển đến phía dưới cùng của trang web, ngay bên trên footer, nhưng chỉ áp dụng cho thiết bị điện thoại. Với CSS, bạn phải thực hiện một số điều chỉnh tuyệt đối để đạt được điều này, nhưng với Intention.js, bạn chỉ cần thực hiện như sau:
<nav data-intent data-in-mobile-prepend=”.footer”></nav>
Trên điểm dừng (breakpoint) của thiết bị di động, điều hướng sẽ được di chuyển từ phía trên cùng của trang đến vị trí ngay trên footer.
Ví dụ 2: Thay đổi lớp (Classes)
Thay đổi các lớp (Classes) vô cùng đơn giản. Nếu bạn muốn thay đổi nội dung bên trong lớp liên quan đến độ rộng màn hình khác nhau, bạn có thực hiện như sau:
<body data-intent data-in-mobile-class=”red” data-in-tablet-class=”blue” data-in-standard-class=”green”>
Ví dụ 3: Thay đổi thuộc tính
Intention.js cũng đáp ứng những thay đổi về độ phân giải màn hình.
Ví dụ, nếu bạn muốn thay đổi hình ảnh cho màn hình võng mạc, bạn có thể thực hiện như sau:
<img alt=”car” data-intent data-intent-base-src=”https://lmt.com.vn/images/car.jpg”
data-intent-highres-src=”https://lmt.com.vn/images/car-retina.jpg” width=”525″ height=”350″/>
Ví dụ 4: Tạo ngữ cảnh riêng
Nếu bạn muốn tạo các điểm dừng (breakpoint) riêng, Intention.js có thể hữu ích trong trường hợp này. Những tài liệu về Intention.js sẽ đi sâu vào chi tiết cách thức để thực hiện việc này, vì vậy tôi sẽ giải thích nó thật đơn giản. Dưới đây là ví dụ về một số ngữ cảnh tùy chỉnh mà bạn có thể sử dụng trong bất kỳ ứng dụng thực tế nào:
var intent = new Intention();
var horizontal_axis = intent.responsive({
ID: ‘width’,
contexts: [
{name:’standard’, min:980},
{name:’tablet’, min:768},
{name:’mobile’, min:0}
],
matcher: function(measure, context) {
return measure >= context.min;
},
measure: function() {
return $(window).width();
}
});
horizontal_axis.respond();
$(window)
.on(‘resize’, horizontal_axis.respond);
window.intent = intent;
$(function() {
intent.elements(document);
});
Bây giờ tôi đã tạo ra được ngữ cảnh riêng, tất cả mọi thứ đã làm việc, tôi có thể bắt đầu thao tác trên các yếu tố mà không cần sử dụng html. Ví dụ, nếu tôi muốn thu bớt thanh bên (sidebar) trên thiết bị di động:
intent.on(‘mobile’, function() {
if ( $(‘.sidebar-collapse’).hasClass(‘in’) ) {
$(‘.sidebar-collapse’).removeClass(‘in’);
}
Giả sử tôi muốn tự ý di chuyển các quảng cáo xung quanh. Tôi có thể thêm chức năng vào mỗi điểm dừng:
intent.on(‘standard’, function() {
$(‘.commercial’).insertBefore(‘.footer’);
});
intent.on(‘tablet’, function() {
$(‘.commercial’).insertBefore(‘.footer’);
});
intent.on(‘mobile’, function() {
$(‘.commercial’).insertBefore(‘#sidebar’);
});
Kết Luận
Intention.js có thể đáp ứng hầu hết các thay đổi trên màn hình thiết kế của bạn. Nó có thể lắng nghe định hướng (phong cảnh & chân dung), scrolldepth, thậm chí cả thay đổi thời gian. Điểm cần lưu ý ở đây đó là bạn không nên dựa vào javascript để mã hóa thiết kế responsive, nhưng khi CSS thất bại, bạn có thể trông cậy vào nó. Bạn có thể sử dụng những giải pháp thay thế nào khi CSS không đủ để giúp hoàn thành công việc? Hãy cho chúng tôi biết ý kiến trong mục bình luận dưới đây.
Bạn có từng khó chịu khi ngồi bồn cầu lạnh ngắt trong mùa đông hay…
Bạn đang thắc mắc thuê chung cư 2 phòng ngủ có phù hợp với gia…
Một trong những kinh nghiệm giúp việc mua bán nhà đất diễn ra hiệu quả,…
Khi chọn mua bộ bàn làm việc tại nhà, gia chủ tuổi Ngọ nên cân…
Hiện nay, chi phí để thuê mặt bằng công ty tại các thành phố lớn…
Hồ cá Koi bằng thùng xốp được khá nhiều người sử dụng để nuôi cá…