Tạo Style Cho Các Dropdown Sử Dụng DropKick

Khi nói đến việc tạo style cho các trang web, không có gì khó như làm style cho các form. Và khi nói đến style của các form – gần như không có gì phức tạp như tạo style cho input <select>.
 
Chúng ta có thể tạo một style cho <select> với CSS, nhưng có thể có những hạn chế lớn để chúng ta đạt được mục đích với việc chỉ sử dụng CSS. Thông thường, lựa chọn khả thi nhất là style thông qua JavaScript, và như là một hình thức nâng cao tiến bộ nó không phải là cái mà chúng ta né tránh.
 
 
Trong bài viết này mình sẽ sử dụng DropKick để tạo ra một dropdown. DropKick sẽ chuyển đổi danh sách <select> thành một dropdown HTML tùy biến hoàn toàn và khi một option được chọn thì giá trị tương ứng sẽ được cập nhật như  là một phần trong form của bạn. OK, hãy bắt đầu nào …
 
Tạo Style Cho Các Select Sử Dụng DropKick
 

Thiết lập <select>

 
Điều đầu tiên chúng ta cần làm là thiết lập một <select>, ví dụ chúng ta sẽ tạo ra một danh sách các ngày làm việc trong tuần:
<select id='mySelect'>
    <option value='mon'>Monday</option>
    <option value='tue'>Tuesday</option>
    <option value='wed'>Wednesday</option>
    <option value='thu'>Thursday</option>
    <option value='fri'>Friday</option>
</select>

Gọi DropKick

 
Một khi chúng ta đã thiết lập xong <select>, chúng ta cần phải tải 3 file vào trong document: các file JavaScript DropKick, CSS và tất nhiên jQuery. Chúng ta nên load ra các CSS ở head và các file JavaScript ở foot của trang. Sau khi thực hiện xong, tất cả chúng ta cần phải làm là kích hoạt plugin và tạo ra dropdown hoàn toàn tùy biến của chúng ta bằng cách gọi DropKick, như sau:
$('#mySelect').dropkick();

DropKick sẽ chuyển đổi HTML thành như sau:

<div class="dk_container dk_theme_default" id="dk_container_undefined">
	<a class="dk_toggle">
		<span class="dk_label">Thursday</span>
	</a>
	<div class="dk_options">
		<ul class="dk_options_inner">
			<li class="">
				<a data-dk-dropdown-value="mon">Monday</a>
			</li>
			<li class="">
				<a data-dk-dropdown-value="tue">Tuesday</a>
			</li>
			<li class="">
				<a data-dk-dropdown-value="wed">Wednesday</a>
			</li>
			<li class="dk_option_current">
				<a data-dk-dropdown-value="thu">Thursday</a>
			</li>
			<li class="">
				<a data-dk-dropdown-value="fri">Friday</a>
			</li>
		</ul>
	</div>
</div>
Như bạn thấy, DropKick đã chuyển đổi <select> của chúng ta thành một cái gì đó mà chúng ta có thể đổi style với CSS. Hơn nữa, những giá trị của chúng ta vừa được chèn vào trong các thuộc tính dữ liệu HTML5 mới ( với tên data-dk-dropdown-value ).
 
Bây giờ chúng ta có thể tạo style cho các dropdown với CSS rồi, hoặc sử dụng một trong các theme của DropKick nếu bạn thích. Tại thời điểm viết bài này thì DropKick có sẵn ba theme để lựa chọn: default, dark gloss và light gloss. Nhưng hầu hết mọi người đều sẽ muốn sử dụng phong cách riêng phù hợp với yêu cầu dự án của họ.
 

Mở Rộng DropKick

 
Extending DropKick là một quá trình đơn giản. Ví dụ, nếu chúng ta muốn phát hiện khi có một thay đổi được thực hiện với dropdown, chúng ta có thể thêm các xử lý cho sự kiện thay đổi này ( event handler ), như sau:
$('select').dropkick({
    change: function (value) {
        console.log('Option selected: ' + value);
    }
});

Ý Kiến Cá Nhân

 
Mình chắc rằng có một ngàn cách để làm style cho một select menu mà không cần phải sử dụng jQuery, nhưng những người sử dụng chỉ CSS đang phải nhức đầu chiến đấu với các mặc định của trình duyệt. Sự đơn giản của plugin này và tính linh hoạt to lớn mà nó cung cấp và tiếp cận nâng cao tiến bộ, có nghĩa là DropKick là một giải pháp tuyệt vời.
 
- Các bạn có thể download và tham khảo thêm về dropkick tại đây

 

Related Post


CSS Transparency Cho Tất Cả Các Trình Duyệt
Tuesday, March 18, 2014
Transparency ( độ trong suốt ) là một trong những thuộc tính của CSS đòi hỏi rất nhiều các thuộc tính và giá trị khác nhau để đảm bảo khả năng tương thích với các trình duyệt. Để làm được điều này, bạn cần một nhóm các câu lệnh CSS...
3 Giải Pháp Hỗ Trợ Hiệu Quả Trên Internet Explorer
Friday, March 14, 2014
Trước kia, Internet Explorer ( IE ) là một trình duyệt tiến bộ nhất. Nhưng sau một khoảng thời gian ngưng phát triển, IE đã trở thành ‘thảm họa’ đối với các nhà thiết kế web như chúng ta. Microsoft đã cải tiến và cập nhật trình duyệt của họ, nhưng sự thật là IE vẫn đang tụt hậu một chút so với các trình duyệt dựa trên WebKit và Firefox...
Search

Đăng ký nhận bài mới


Category

Blog Archive