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="首页" οnclick="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>