CSS và jQuery – Customize style dễ dàng

Customize style với jQuery và CSS

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

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&#8221; color=”#AAAAAA” size=”3″ style=”1″ dark=”0″ radius=”auto” target=”self”]Demo 1[/button] [button link=”http://db.tt/Yb32ZnOY&#8221; color=”#AAAAAA” size=”3″ style=”1″ dark=”0″ radius=”auto” target=”self”]Demo 2[/button] [button link=”http://db.tt/4dQUpjPD&#8221; 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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s