Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > PHP&MySQL > Thiết kế menu dạng thương mại điện tử với Json Data
Thiết kế menu dạng thương mại điện tử với Json Data
Nguyễn Trung Hiếu
Share Code Web Company 2012

Thiết kế menu dạng thương mại điện tử với Json Data

Bạn đã từng thấy rất nhiều trang thương mại điện tử làm kiểu menu rất đẹp và chuyên nghiệp, và bạn tự hỏi làm nó như thế nào? Vậy thì bài viết sau sẽ hướng dẫn bạn làm một dạng menu như thế với Json Data

I. Database

Một database mẫu được thiết kế như dưới đây, bạn cũng có thể thay đổi cho phù hợp với project của bạn,

Và mẫu dữ liệu như sau:

database menu

II. Catagories.php

File catagories.php bao gồm những đoạn code load dữ liệu từ MySql ra, sau đó thực hiện encode cho Json

Và kết quả là:

json data menu

III. Javascript & HTML

Việc bây giờ là bạn sử dụng Javascript để lấy dữ liệu từ Json ra bằng thủ tục $.getJson và bind nó vào thẻ ul có id nào đó. Còn menu con sẽ được bind vào thẻ ul có id riêng.

$(“.category”).live(‘mouseover’,function(event){}– category là hảm xử lý sự kiện khi user hover chuột qua từng menu cha, sử dụng element.attr(“id”) để gọi giá trị của menu. Sau đó là đoạn mã HTML đơn giản như sau:

Ngoài ra cũng cần lưu ý đó là phương thức kết nối tới database và file css cho menu nữa chứ nhỉ.

db.php

style.css

Vậy là thành quả của chúng ta đã xong, bạn có thể view demo hoặc download mã nguồn về nếu như không làm được. Chúc bạn thành công

Download Code View Demo

(9 lession)

 

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

http://sharecodeweb.net/?s={search_term_string}