日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

人們?cè)缇土?xí)慣了在互聯(lián)網(wǎng)購(gòu)物買東西，甚至有一部分朋友還是上癮了。本篇PHP教程就來(lái)幫助您的電子商務(wù)項(xiàng)目實(shí)現(xiàn)最重要的產(chǎn)品類別的導(dǎo)航菜單系統(tǒng)。我已經(jīng)使用PHP、MYSQL及JQuery實(shí)現(xiàn)了亞馬遜樣式的產(chǎn)品分類圖像菜單，下面讓我們來(lái)看一下如何使用json數(shù)據(jù)來(lái)制作商城的產(chǎn)品分類菜單。

amazon產(chǎn)品分類導(dǎo)航

在線演示

數(shù)據(jù)庫(kù)

我們先看一下簡(jiǎn)單的數(shù)據(jù)庫(kù)表的設(shè)計(jì)。主要涉及到一個(gè)分類表，包含了4個(gè)字段cat_id，name，parent，media。

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

數(shù)據(jù)表categories中的分類和子分類的數(shù)據(jù)存儲(chǔ)類似下面的格式。

商品分類表數(shù)據(jù)格式

categories.php

這個(gè)文件主要負(fù)責(zé)從categories表生成json數(shù)據(jù)，供前臺(tái)來(lái)顯示分類菜單。

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

JSON 輸出的格式

json數(shù)據(jù)格式

#p#

JavaScript & HTML

實(shí)際上最重要的部分在這里，我們需要使用$.getJSON來(lái)附加分類數(shù)據(jù)到UL #menu_ul元素上，子目錄數(shù)據(jù)存儲(chǔ)在隱藏的UL 類名hideul。

$(".category").live('mouseover',function(event){}- category 分類標(biāo)簽li的類名。使用attr("id") 調(diào)用分類標(biāo)簽li的值，根據(jù)ID的類名移動(dòng).hideul 子目錄的值到$("#submenu_ul").html(V)。

HTML 代碼

 
 
 
 
  
  
  
  
//HTML Code