công ty thiết kế website tốt nhất

Thay đổi giao diện website trong javascript 06/05/2020

Thay đổi giao diện website trong javascript

Posted by Admin in Tạp chí iTOOL
4102

Các kỹ thuật thay đổi giao diện web sử dụng javascript

Với những kỹ thuật thiết kế website hiện đại cho phép chúng ta có thể thay đổi giao diện web tùy theo chủ đề hay các ngày lễ, thay đổi layout trình bày tùy vào độ phân giải màn hình hay đơn giản là thay đổi màu sắc trình bày trang web theo sở thích của mỗi khách viếng thăm. Dưới đây là một số cách phổ biến giúp bạn có thể áp dụng kỹ thuật thay đổi giao diện web bằng theme cho website của mình.
 
Thay đổi giao diện web trong javascript
 
Thay đổi giao diện web theo phương pháp thay đổi link file css:
 
Trong quá trình thiết kế website, bạn không nên dùng quá nhiều định dạng css phức tạp mà nên “quy hoạch” trước những định dạng để áp dụng cho website.
 
Vd Font: Sử dụng Verdana  cho nội dung, Courier new cho code.
Color: sử dụng #888888 cho nội dung, sử dụng #000000 cho tiêu đề.
Size: 14pt bold cho tiêu đề, 9pt cho nội dung.
 
Với những lựa chọn trước như vậy, quá trình thiết kế giao diện web cho website sẽ nhanh chóng hơn, đảm bảo cho sự nhất quán trong cách trình bày ở tất cả các trang.
Việc thay đổi giao diện web bằng cách thay đổi link file css khá đơn giản và sử dụng các script ở phía browse để thực hiện. Một ví dụ cho việc thay đổi giao diện web ở phía client là trang yahoo.com, Các giao diện web được chọn và thay đổi ngay trên phía browse của khách viếng thăm mà không cần thiết phải tải lại trang:
 
- Sau khi đã chọn các sắc thái cho các thành phần chính của website, nên đưa tất cả các định dạng css và tất cả các image liên quan đến css đó vào một folder duy nhất (Lưu ý đường dẫn trong file css. Các đường dẫn đến hình ảnh hoặc file khác được tính từ file css chứ không phải là file html mà css đó định dạng, ví dụ file index.html có file định dạng css là public/css/theme.css, hình nền cho table ở thư mục public/images/hinhnen.jpg, thì định dạng talbe trong css sẽ là background: url(‘../images/hinhnen.jpg’);).
 
- Đưa định dạng css vào trong trang:
 
<link rel=”stylesheet” id=”sitetheme” type=”text/css” href=”Path_To_Css/mytheme.css”>
 
- Viết code javascript để thay đổi giao diện web: Ví dụ bạn có 2 giao diện web, đoạn code dưới đưa một link thay đổi giao diện web bằng javascript vào trang.
 
<a href=#theme onclick=”changeTheme(‘Theme_1’); return false”>Theme_1</a>
<a href=#theme onclick=”changeTheme(‘Theme_2’); return false”>Theme_2</a>
 
Trong một file javascript bất kỳ hoặc ngay trong trang html, bạn viết thêm đoạn code thay đổi giao diện web:
 
<script>
function changeTheme(tentheme) {
document.getElementById(‘sitetheme’).src= tentheme + ”/mytheme.css”;
// Thay đổi Path của theme hiện tại thành một path mới
}
</script>
 
Như vậy, mỗi khi click vào các link Theme_1, Theme_2; đường dẫn của mytheme.css được thay đổi và do đó tất cả các định dạng của website bao gồm cả hình ảnh cũng thay đổi theo.
 
Tuy vậy, việc thay đổi giao diện web chỉ diễn ra trong khi click lên nút Theme_1 hay Theme_2 và không lưu được trạng thái của giao diện web khi trang được tải lại hoặc chuyển qua trang mới. Chúng ta có thể sử dụng cookie để lưu trạng thái (giao diện web đã chọn) khi chuyển qua các trang tiếp theo, như vậy cứ mỗi lần chuyển trang sẽ phải gọi function setTheme() (<body onload=”setTheme()”>) :
 
<script>
function setTheme() {
if(document.cookie(“theme”)) { // Nếu tồn tại cookie tên là theme
document.getElementById(‘sitetheme’).src= document.cookie(“theme”) + ”/mytheme.css”;
}
}
</script>
 
Và để lưu trạng thái của giao diện web đã chọn, sau khi thay đổi đường dẫn cho file css, cần lưu lại giao diện web đã chọn:
 
<script>
function changeTheme(tentheme) {
document.getElementById(‘sitetheme’).src= tentheme + ”/mytheme.css”;
document.cookie = “theme=” + tentheme;
   var date = new Date();
   date.setMonth(date.getMonth()+1);
   document.cookie += (“; expires=” + date.toUTCString());
}
</script>
 
Với việc viết website bằng HTML đơn thuần, sử dụng cách này để đưa chức năng thay đổi giao diện website (theme) vào website không mấy tiện dụng, nhưng nếu thiết kế web với các ngôn ngữ như ASP, PHP,… thì với biến theme đã lưu trong cookie, Path_to_css lúc import css vào trang được thực hiện ngay trên server và mỗi khách viếng thăm có thể chọn lưu cho mình một giao diện web ưa thích.

Blog