var categoryConfig = {
'abc': {
name: '图书',
children: {
'bcd': {
name: '中文图书',
children: {
'cde': {
name: '文学',
children: {
'def': {name: '小说'},
'dfg': {name: '传记'}
}
},
'cef': {name: '管理'},
'cfg': {name: '人文社科'}
}
},
'bde': {
name: '教材教辅考试',
children: {
'cgh': {name: '考试'},
'chi': {name: '外语'}
}
},
'bef': {
name: '进口图书',
children: {
'cij': {name: '外国文学'},
'cjk': {name: '世界名著'}
}
}
}
},
'acd': {
name: '影视、音乐',
children: {
'bfg': {
name: '影视',
children: {
'ckl': {name: '电影'},
'clm': {name: '电视剧'},
}
},
'bgh': {
name: '音乐',
children: {
'cmn': {name: '内地流行'},
'cno': {name: '港台流行'}
}
},
'bhi': {
name: '教育音像',
children: {
'cop': {name: '儿童教育'},
'cpr': {name: '英语学习'}
}
}
}
},
'ade': {
name: '手机数码、家用电器',
children: {
'bij': {
name: '摄影摄像'
},
},
},
'aef': {
name: '电脑、游戏、软件、办公',
children: {
'bjk': {
name: '苹果电脑'
}
}
},
'afg': {
name: '家具、厨具'
},
'agh': {
name: '食品、美妆、个人健康'
},
'ahi': {
name: '玩具母婴'
},
'aij': {
name: '运动、户外和休闲'
},
'ajk': {
name: '钟表首饰'
},
'akl': {
name: '汽车用品'
}
}; // categoryConfig
var CTG = (function() {
var _config = {'name': '分类', 'children': categoryConfig};
var _trackStack = [];
function findCategory(cid) {
if (! cid) {
return null;
} else if (cid == 'root') {
return _config;
}
var iter = null;
for (var i = 0; i < _trackStack.length; i++) {
var id = _trackStack[i];
iter = iter == null
? _config
: (iter.children ? iter.children[id] : null);
if (id == cid) {
return iter;
}
}
return iter && iter.children ? iter.children[cid] : null;
}
function getCurrentCategoryId() {
if (_trackStack.length > 0) {
return _trackStack[_trackStack.length - 1];
}
return null;
}
function getCurrentCategory() {
var cur = null;
for (var i = 0; i < _trackStack.length; i++) {
var id = _trackStack[i];
cur = cur == null
? _config
: (cur.children ? cur.children[id] : null);
}
return cur;
}
function getChildren(id) {
var cat = findCategory(id);
return cat != null
? getChildNodes(cat.children)
: null;
}
function getChildNodes(children) {
if (! children) {
return null;
}
var list = [];
for (var id in children) {
var node = children[id];
list.push({'id': id, 'name': node.name});
}
return list;
}
function createPiece(id) {
var children = getChildren(id);
if (children === null) {
return null;
}
var piece = $("<div class='categories hidden'></div>");
piece.attr('id', id + 'Categories');
for (var i = 0; i < children.length; i++) {
var child = children[i];
var ct = $("<div class='category'></div>");
var link = $("<a></a>");
var title = $("<div class='category-name'></div>");
title.text(child.name);
link.attr('data-id', child.id);
link.attr('href', "javascript:CTG.show('" + child.id + "');");
/*
link.click(function(){
var dataId = $(this).attr('data-id');
show(dataId);
});
*/
link.append(title);
ct.append(link);
piece.append(ct);
}
$("#categoryList").append(piece);
return piece;
}
function getPiece(id) {
if (id == null) {
return null;
}
var piece = $("#" + id + "Categories");
return piece.length > 0 ? piece : createPiece(id);
}
function display(id, curId) {
var piece = getPiece(id);
if (piece == null || piece.length < 1) {
/*
var cat = findCategory(id);
window.location.href = cat != null
? "http://www.amazon.cn/gp/aw/s?__mk_zh_CN=" + encodeURI('亚马逊网站')
+ "&k=" + encodeURI(cat.name)
: "http://www.amazon.cn/gp/aw";
return false;
*/
alert("Go to view products");
return false;
}
if (curId) {
$('#' + curId + 'Categories').slideUp();
}
var ctg = findCategory(id);
if (ctg != null) {
$("#curCategoryName").text(ctg.name);
}
piece.slideDown();
return true;
}
return {
'goBack': function() {
var curId = _trackStack.pop();
if (curId != null && curId != 'root') {
var id = getCurrentCategoryId();
if(display(id, curId)) {
var btn = $("#goBackBtn");
if (_trackStack.length > 1) {
var lastId = _trackStack[_trackStack.length - 2];
var cat = findCategory(lastId);
if (cat) {
btn.val(cat.name);
btn.show();
} else {
btn.hide();
}
} else {
btn.hide();
}
}
} else {
alert('go to home page');
// window.location.href = "http://www.amazon.cn/gp/aw";
}
},
'show': function(id) {
if (! id) {
id = 'root';
}
var curId = getCurrentCategoryId();
if (display(id, curId)) {
var cur = findCategory(curId);
var btn = $("#goBackBtn");
if (cur) {
btn.val(cur.name);
btn.show();
} else {
btn.hide();
}
_trackStack.push(id);
}
}
}
})();
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Happy shopping</title>
<link type="text/css" href="smart.css" rel="Stylesheet" media="screen" />
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="smart.js"></script>
<script type="text/javascript" src="category.js"></script>
<style>
body{font-family: Candara; margin: 0; padding: 0; font-size: 12px;}
a {text-decoration: none; color: #004B91;}
input {font-size: 12px; padding: 2px;}
ul {padding: 0;}
li {list-style-type: none; float: left; margin: 0; margin-right: 10px;}
.bd {border: 1px solid blue;}
.content {min-height: 40px; margin: 0; padding: 5px;}
.fl {float: left;}
.fr {float: right;}
.hidden {display: none;}
.welcome {color: #FF9900; font-weight: bold; padding: 0 10px; float: left;}
.wd1 {width: 90%;}
.bar {
background: -moz-linear-gradient(#FFC369, #FF9900) repeat scroll 0 0 #FFC369;
border-radius: 6px 6px 0 0;
width: 100%;
}
.bar-btns {margin: 5px; position: absolute;}
.bar-title {
color: #FFFFFF;
font-size: 120%;
font-weight: bold;
padding: 10px 0;
text-align: center;
}
.blue-bar {background: -moz-linear-gradient(#5995BF, #3C6FA1) repeat scroll 0 0 #5995BF;}
.btn {
background: -moz-linear-gradient(#F5DCA3, #E8AA19) repeat scroll 0 0 #F5DCA3;
border: 1px solid #DA8118;
border-radius: 8px;
text-shadow: 0 -1px 1px #145072;
color: #FFFFFF;
cursor: pointer;
padding: 3px 5px;
text-align: center;
vertical-align: middle;
}
.categoryContainer {box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); margin: 20px;}
.categories {color: #2F3E46; font-weight: bold;}
.category {
background: -moz-linear-gradient(#FFFFFF, #F2F2F2) repeat scroll 0 0 #FFFFFF;
border-top: 1px solid #CCCCCC;
}
.category-name {padding: 15px 20px;}
.category a {color: #181D29;}
.category:hover {background: #E6E6E6;}
.footer {
background: -moz-linear-gradient(#5995BF, #3C6FA1) repeat scroll 0 0 #5995BF;
bottom: 0;
color: #FFFFFF;
font-weight: bold;
padding: 10px;
position:fixed;
width: 100%;
}
.footer ul {width: 100%; margin: 0;}
.footer li {font-size: 140%; text-align: center; width: 22%;}
.footer a {color: #FFFFFF;}
.menu li {position: relative; float: left;}
.menu li a {float: left;}
.menu li:hover > ul {display: block;}
.sub-menu {position: absolute; display: none; left: 0; top: 100%; margin: 0;}
.sub-menu li {float: left;}
.sub-menu li a {padding: 5px;}
.top-menu {padding: 0; margin: 0 20px;}
.top-menu li a {padding: 12px; background-color: #F68B32;}
.top-sub-menu {background-color: #ECECEC; width: 110px;}
.top-sub-menu li a {width: 90px;}
.top-sub-menu li a:hover {background-color: #0B5199; color: #FFFFFF;}
.blue-bar-sub {display: inline-block; margin-top: 5px;}
.price {color: #CC0000;}
.status {color: #4CB749;}
.search-box {
background-color: #FAFAFA;
border: 1px solid #1A1A65;
border-radius: 8px;
font-size: 120%;
height: 20px;
padding: 3px 5px;
margin-top: 5px;
width: 93%;
}
</style>
</head>
<body>
<div class="content">
<div class="fl"><img src="images/logo.png"/></div>
<div class="fr">
<ul class="menu">
<li><span class="welcome">Hello, Eric!</span></li>
</ul>
</div>
</div>
<div class="content blue-bar"></div>
<div id="categoryList" class="categoryContainer">
<div class="bar">
<div class="bar-btns"><input id="goBackBtn" class="btn" type="button" value="首页" onclick="CTG.goBack();"/></div>
<div class="bar-title" id="curCategoryName">分类</div>
</div>
</div>
<div class="footer">
<ul>
<li><a href="gateway.html">首页</a></li>
<li><a href="category.html">分类</a></li>
<li><a href="#">购物车</a></li>
<li><a href="#">更多</a></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
CTG.show();
});
</script>
</body>
?