手机Web版浏览产品分类

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>