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,

CREATE TABLE `categories` 
(
`cat_id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(150) ,
`parent` int(11) ,
`media` varchar(100),
PRIMARY KEY (`cat_id`)
);

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

<?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) . ')';
?>

<?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.

<script type="text/javascript" src="https://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>

ajax/libs/jquery/1.6.2/jquery.min.js"></script>

$(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:

//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>

//HTML Code

</div>

</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

<?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");
?>

<?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

#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}

#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

[jbutton link=”http://demos.9lessons.info/jsonmenu/index.html” color=”orange” size=”large” icon=”download”]Download Code[/jbutton] [jbutton link=”https://www.box.com/s/5b3457fa16cab5e722aa” color=”orange” size=”large”]View Demo[/jbutton]

(9 lession)

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

Like this:

Có liên quan

Nguyễn Trung Hiếu

Một trả lời tới to “Thiết kế menu dạng thương mại điện tử với Json Data”

Share this:

Like this:

Có liên quan

Nguyễn Trung Hiếu

Một trả lời tới to “Thiết kế menu dạng thương mại điện tử với Json Data”