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,
|
1 2 3 4 5 6 7 8 |
CREATE TABLE `categories` ( `cat_id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(150) , `parent` int(11) , `media` varchar(100), PRIMARY KEY (`cat_id`) ); |
Và mẫu dữ liệu như sau:
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<?php include('db.php'); $sql = mysql_query("select cat_id,name,media from categories where parent=0"); // parent categories node $categories = array("Categories" => array()); while ($row = mysql_fetch_array($sql)) { $cat_id = $row['cat_id']; $ssql = mysql_query("select cat_id,name,media from categories where parent='$cat_id'"); // single category node $category = array(); // temp array $category["cat_id"] = $row["cat_id"]; $category["name"] = $row["name"]; $category["media"] = $row["media"]; $category["sub_categories"] = array(); // subcategories again an array while ($srow = mysql_fetch_array($ssql)) { $subcat = array(); // temp array $subcat["cat_id"] = $srow['cat_id']; $subcat["name"] = $srow['name']; // pushing sub category into subcategories node array_push($category["sub_categories"], $subcat); } // pushing sinlge category into parent array_push($categories["Categories"], $category); } echo ((isset($_GET['callback'])) ? $_GET['callback'] : "") . '(' . json_encode($categories) . ')'; ?> |
Và kết quả là:
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<script type="text/javascript" src="http://ajax.googleapis.com/ ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" > $(document).ready(function() { $.getJSON("categories.php?callback=?", function(data) { $.each(data.Categories, function(i, category) { var subjsondata=''; $.each(category.sub_categories, function(i, sub_categories) { subjsondata += "<li>"+sub_categories.name+"</li>"; }); var jsondata ="<li class="category" id=''"+category.cat_id+"'>"+category.name+"<ul class="hideul" id='hide"+category.cat_id+"' media='"+category.media+"'>"+subjsondata+"</ul> </li>"; $(jsondata).appendTo("#menu_ul"); }); } ); //MouseOver on Categories $(".category").live('mouseover',function(event) { $("#menu_slider").show(); var D=$(this).html(); var id=$(this).attr('id'); var V=$("#hide"+id).html(); var M=$("#hide"+id).attr("media"); $("#submenu_ul").html(V); $("#menu_slider h3").html(D); //Background Image Check if(M!='null') { $("#menu_slider").css({"width": "450px"}); } else { $("#menu_slider").css({"width": "250px"}); } $("#menu_slider").css('background', 'url(backgrounds/' + M + ') #ffffff no-repeat right bottom'); }); //Document Click $(document).mouseup(function() { $("#menu_slider").hide(); }); //Mouse click on sub menu $("#menu_slider").mouseup(function(){ return false }); //Mouse click on my account link $("#menu_box").mouseup(function(){ return false }); }); </script> |
$(“.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:
|
1 2 3 4 5 6 7 8 |
//HTML Code <div id='menu_box' class='shadow'> <ul id='menu_ul'></ul> </div> <div id='menu_slider'> <h3></h3> <ul id='submenu_ul'></ul> </div> |
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
|
1 2 3 4 5 6 7 8 |
<?php $mysql_hostname = "localhost"; $mysql_user = "username"; $mysql_password = "password"; $mysql_database = "databasename"; $bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database"); mysql_select_db($mysql_database, $bd) or die("Could not select database"); ?> |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
#menu_box { border-top:solid 3px #333; border-left:solid 1px #dedede; border-right:solid 1px #dedede; border-bottom:solid 1px #dedede; min-height:400px;width:200px; background-color:#fff; margin-left:20px; float:left; position:relative; z-index:300 } #menu_slider { border-top:solid 3px #333; border-left:solid 1px #dedede; border-right:solid 1px #dedede; border-bottom:solid 1px #dedede; min-height:370px;background-color:#fff;margin-left:220px; position:absolute; width:250px; position:relative; z-index:200; display:none; padding:15px } .hideul{display:none} |
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
(9 lession)
[…] một số dự án cần phải nén file thật lớn để tiết kiệm dung lượng host như thương mại điện tử bán các file Pdf, ảnh, slideshow, hoặc trang web bán tài liệu… Bạn có thể […]