Customize style với jQuery và CSS
Bạn đã từng bắt gặp một trang web mà mỗi lần refesh nó lại thay đổi ngẫu nhiên một giao diện (có khi là chỉ thay đổi màu). Hoặc những template có các phiên bản đỏ, vàng, cam, xanh… và người dùng có thể lựa chọn nó bằng cách click chuột.
Nhân tiện có người hỏi và lâu rồi không viết bài nào cho Cosmos, hôm nay Thanh sẽ hướng dẫn cho các bạn cách customize style đơn giản với jQuery và CSS
Customize style với jQuery và CSS
Trước tiên là phần HTML
Ta chỉ khai báo đơn giản
</pre> <div id="banner"></div> <div id="content"> <h3>Lorem Ipsum là clgt</h3> Lorem Ipsum chỉ đơn giản... <ul> <li><a class="do" href="#">Do</a></li> <li><a class="xanh" href="#">Xanh</a></li> <li><a class="tim" href="#">Tim</a></li> <li><a class="vang" href="#">Vang</a></li> </ul> </div> <pre>
[button link=”http://db.tt/5jZ757rk” color=”#AAAAAA” size=”3″ style=”1″ dark=”0″ radius=”auto” target=”self”]Demo 1[/button] [button link=”http://db.tt/Yb32ZnOY” color=”#AAAAAA” size=”3″ style=”1″ dark=”0″ radius=”auto” target=”self”]Demo 2[/button] [button link=”http://db.tt/4dQUpjPD” color=”#AAAAAA” size=”3″ style=”1″ dark=”0″ radius=”auto” target=”self”]Source Code[/button]
Đừng quên include Jquery và link phần style vào phần head nhé
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script> <link id="style" href="style4.css" rel="stylesheet" />
Chọn Style CSS
Link style nào cũng được, bạn có thể coi style1 là giao diện mặc định. Tương ứng với phần HTML trên, ta chuẩn bị 4 style đỏ, xanh, tím, vàng tương ứng lần lượt với style1.css, style3.css, style3.css, style4.css. Mạn phép không giải thích mấy đoạn css trên vì nó rất cơ bản 😀 style1
#banner{ background: url(img/logo1.png); width: 728px; height: 90px; margin: 0 auto; } #content{ width: 730px; height: auto; color: #ac0101; margin: 10px auto; }
style2
#banner{ background: url(img/logo2.png); width: 728px; height: 90px; margin: 0 auto; } #content{ width: 730px; height: auto; color: #00aceb; margin: 10px auto; }
style3
#banner{ background: url(img/logo3.png); width: 728px; height: 90px; margin: 0 auto; } #content{ width: 730px; height: auto; color: #b100eb; margin: 10px auto; }
style4
#banner{ background: url(img/logo4.png); width: 728px; height: 90px; margin: 0 auto; } #content{ width: 730px; height: auto; color: #8b9f00; margin: 10px auto; }
Tiếp theo đến phần script
var style = ['style1.css','style2.css','style3.css','style4.css'];
var styleLength = style.length;
var randStyle = Math.floor(Math.random() * styleLength);
$("link[id='style']").attr('href',style[randStyle]);
Trước tiên ta khai báo các file style vào 1 mảng và lấy độ dài của mảng đó.Tiếp đến ta random các số từ 0->độ dài của mảng style và con số này sẽ thay đổi sau mỗi lần bạn refesh. Tiếp đến ta sẽ thay đổi cấu trúc DOM (ở đây ta thay đổi link style có id là ‘style’), vậy là xong. Tương tự nếu bạn chỉ muốn lựa chọn style mà không muốn nó random ngẫu nhiên thì ta sẽ làm như sau Thêm vào sau phần đoạn HTML mục đích là để tạo ra phần chọn style
</pre> <ul> <li><a class="do" href="#">Do</a></li> <li><a class="xanh" href="#">Xanh</a></li> <li><a class="tim" href="#">Tim</a></li> <li><a class="vang" href="#">Vang</a></li> </ul> <pre>
Và css một chút cho nó (nên chọn các màu tương ứng với style cần chọn)
ul li{
list-style: none;
float: left;
}
li a{
text-indent: -999999px;
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
}
.do{background:#ac0101}
.xanh{background:#00aceb}
.tim{background:#b100eb}
.vang{background:#8b9f00}
footer{
margin: 50px auto;
float: none;
}
Ta viết 1 hàm để lựa chọn màu (pickColor)
function pickColor(colorClass,styleFile){
$(colorClass).fadeOut(function(){
$(colorClass).fadeIn(1000);
$("link[id='style']").attr('href',styleFile).fadeIn('slow');
});
}
Hàm này khá đơn giản gồm 2 biến truyền vào là colorClass và styleFile. Ví dụ khi mình click vào class đỏ. Thì nút bấm sẽ có hiệu ứng fadeOut và fadeIn và sau đó ta lại thay đổi style như phần trên và ở đây nó styleFile sẽ là style1.css.
Code đầy đủ cho script chọn màu:
function pickColor(colorClass,styleFile){
$(colorClass).fadeOut(function(){
$(colorClass).fadeIn(1000);
$("link[id='style']").attr('href',styleFile).fadeIn('slow');
});
}
$(document).ready(function(){
$('.do').click(function(){
pickColor(this,'style1.css');
});
$('.xanh').click(function(){
pickColor(this,'style2.css');
});
$('.tim').click(function(){
pickColor(this,'style3.css');
});
$('.vang').click(function(){
pickColor(this,'style4.css');
});
Tóm lại: đây là một cách rất đơn giản để custome style với jquery và css, mình chỉ hướng dẫn những ví dụ đơn giản, bạn có thể áp dụng nó cho các template phức tạp hơn nhưng nguyên tắc thì vẫn như thế. Lưu ý là nó chỉ hoạt động khi bạn bật javascript trong trình duyệt thôi nhé, tắt thì… chịu. Nếu có thắc mắc gì có thể comment bên dưới
Cosmos Pham's Blog 