Jquery开发电商网站实战（带源码）

前端开发作者： 2024-08-26 05:05:01

组件化思想，包含：下拉菜单项封装 + 按需加载搜索功能组件化，显示数据 + 下拉显示 + 缓存分类导航按需加载幻灯片效果组件封装及按需加载商品楼层模块组件化 + 商品数据按需加载 + Tab

<!DOCTYPE html>
<html lang="zh-CN">

head>
    meta charset="UTF-8"title>demo</link rel="stylesheet" href="css/base.css" />
    ="css/common.css" ="css/index.css" />
body<!-- 站点导航开始 -->
    div class="nav-site">
        ="container">
            ul ="fl">
                li ><a href="javascript:;" id="nav-site-signin" class="nav-site-login">亲，请登录a></li="nav-site-signup"="nav-site-signup link">免费注册="###" target="_blank"="nav-site-mobile link">手机逛XX网ul="fr"="menu dropdown fl" data-active="menu">
                    ="dropdown-toggle link  transition">我的XXi ="dropdown-arrow icon transition">&#xe609;i="dropdown-layer dropdown-left">
                        ="menu-item">已买到的宝贝>我的足迹="dropdown-toggle link transition">收藏夹>收藏的宝贝>收藏的店铺="nav-site-category link">商品分类="menu" data-load="js/dropdown-seller.json">卖家中心="dropdown-loading"="nav-site-service menu dropdown fl">联系客服="dropdown-layer dropdown-right">消费者客服>卖家客服div 站点导航结束  header区开始 ="header"h1 ="./index.html"="header-logo text-hidden">XX网h1id="header-search"="search fl"form action="https://s.taobao.com/search"="search-form"input type="text" name="q" placeholder="灵魂没事一元抢" autocomplete="off"="search-inputbox fl" />
                    ="submit" value="搜索"="search-btn btn fl" />
                form="search-layer"="search-layer-item text-ellipsis">111>
            
         中心部分导航 ="nav-main"="link">数码城a
            >天黑黑>团购>发现>二手特价>名品汇="focus"="focus-category"="category fl"="category-title"="icon">&#xe608;="category-list"="dropdown"="category"="js/category-detail-1.json"="dropdown-toggle">
                            ="dropdown-link">家用电器="dropdown-arrow">&gt;="dropdown-layer"="js/category-detail-2.json">手机a
                            >、>运营商>数码="js/category-detail-3.json">电脑>办公="js/category-detail-4.json">家居>家具>家装>厨具="js/category-detail-5.json">男装>女装>童装>内衣="js/category-detail-6.json">化妆>清洁>宠物="js/category-detail-7.json">运动户外>钟表="js/category-detail-8.json">汽车>汽车用品="js/category-detail-9.json">母婴>玩具乐器="js/category-detail-10.json">食品>酒类>生鲜>特产="js/category-detail-11.json">医药保健="js/category-detail-12.json">图书>音像>电子书="js/category-detail-13.json">彩票>旅行>充值>票务="js/category-detail-14.json">理财>众筹>白条>保险="focus-slider"="slider fl"="slider-container"="slider-item" <a href="###" target="_blank"><img src="../img/focus-slider/loading.gif" data-src="https://gratisography.com/pictures/407_1.jpg" alt="" class="slider-img" /></a> -->
                        ="_blank"img src="img/focus-slider/loading.gif" data-src="img/focus-slider/1.png" alt=""="slider-img" /></="img/focus-slider/2.png"="img/focus-slider/3.png"="img/focus-slider/4.png"ol ="slider-indicator-wrap"="slider-indicator text-hidden fl">1>2>3>4ol="slider-control slider-control-left"&lt;="slider-control slider-control-right"="focus-sidebar fr"="focus-news"="focus-news-head"h2 ="focus-news-title fl">XX快报h2="link fr">更多 ="focus-news-body"p ="text-ellipsis"strong>[特惠]> 精选图书每满150减50p>[公告]> 因广州图书仓搬仓升级配送延迟> 爆款手机12期免息> 广东、福建受台风影响配送延迟> 大闸蟹领券满399减180="focus-service cf"="focus-service-item fl"="icon focus-service-icon">&#xe612;span ="focus-service-text">话费span>&#xe611;>机票>&#xe607;>电影票>&#xe60e;>游戏>&#xe605;>&#xe603;>加油卡>&#xe602;>酒店>&#xe601;>火车票>&#xe60d;>&#xe60c;>&#xe610;>礼品卡>&#xe60f;="focus-ad">

    ="todays"="todays-slider"="slider"="img/todays-slider/loading.gif"="img/todays-slider/1.png"="img/todays-slider/2.png"="img/todays-slider/3.png"="img/todays-slider/4.png"="img/todays-slider/5.png"="img/todays-slider/6.png"="img/todays-slider/7.png"="img/todays-slider/8.png"="img/todays-slider/9.png"="img/todays-slider/10.png"="img/todays-slider/11.png" floor-1 ="floor"="img/floor-loading.gif"="" />
         floor2  floor3 >
           /> 
         floor4 >
         />   
         floor5 ="floor floor-last" elevator ="elevator"="elevator container"="elevator-item"="elevator-num">F1="elevator-text">服饰>F2>美妆>F3>F4>家电>F5>
   
    
    ="toolbar"="toolbar-item"="toolbar-icon icon">&#xe617;="toolbar-text transition">会员>&#xe613;>购物车>&#xe616;>我的关注>&#xe614;>我的消息="backToTop">&#xe615;>顶部script>
    //两种判断是否有jquery库的写法：
     window.jQuery || document.write('<script src="js/jquery.js"><' + '/script>')
    window.jQuery || document.write('<script src="js/jquery.js"><\/script>);
    script ="js/transition.js"="js/showhide.js"="js/dropdown.js"="js/search.js"="js/move.js"="js/slider.js"="js/tab.js"="js/index.js"html>

/*css reset*/
    清除内外边距*/
    body,h1,h2,h3,h4,h5,h6,p,hr,结构元素
    ul,ol,li,dl,dt,dd,1)">列表元素
    form,fieldset,legend,input,button,select,textarea,1)">表单元素
    th,td,1)">表格元素
    pre {
        padding: 0;
        margin: 0;
    }

    重置默认样式font: 12px/1 微软雅黑,Tahoma,Helvetica,Arial,宋体,sans-serif;*/
        color: #333;
        font: 12px/1 "Microsoft YaHei",SimSun,sans-serif;
    }
    h1,h6 {
        font-size: 100%;
        font-weight: normal;
    }
    em,i {
        font-style:

    a {
        text-decoration: none;
    }
    li {
        list-style-type: none;
        vertical-align: top;
    }
    img {
        border: none;
        display: block;
    textarea {
        overflow: auto;
        resize:
    table {
        border-spacing:
        border-collapse: collapse;
    }

常用公共样式
    .fl {
        float: left;
        display: inline;
    }
    .fr { right;
    .cf:before,.cf:after {
        content: " "; table;
        
    }
    .cf:after {
        clear: both;
    }
    .cf {
        *zoom: 1;
    }

公共样式

    .container {
        站点导航
        width: 1200px; 0 auto;
    }

    a.link {
        链接正常颜色 #4d555d;
    }

    a.link:hover {
        链接经过颜色 #f01414 !important;
    }

    .transition {
        -o-transition: all 0.5s;
        -ms-transition:
        -moz-transition:
        -webkit-transition:
        transition: all 0.5s;
    }

    .text-hidden{
        text-indent: -9999px; hidden;
    }


    .text-ellipsis{
        text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
    }

icon
    @font-face {
        font-family: "iconfont";
        src: url('../test/font/iconfont.eot?t=1477124206');
         IE9 url('../test/font/iconfont.eot?t=1477124206#iefix') format('embedded-opentype'),1)"> IE6-IE8 */
        url('../test/font/iconfont.woff?t=1477124206') format('woff'),1)"> chrome,firefox 
        url('../test/font/iconfont.ttf?t=1477124206') format('truetype'),firefox,opera,Safari,Android,iOS 4.2+
        url('../test/font/iconfont.svg?t=1477124206#iconfont') format('svg');
         iOS 4.1- */
    }

    .icon { "iconfont" !important; 14px; normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;
    }

showhide

    .fadeOut {
        visibility: hidden !important;
        opacity: 0 !important;
    }
    .slideUpDownCollapse {
        height: 0 !important;
        padding-top:
        padding-bottom:
    .slideLeftRightCollapse {
        padding-left:
        padding-right: 0 !important;
    }

dropdown
    .dropdown {
        position: relative;
    }

    .dropdown-toggle { relative;
        z-index: 2;
    }

    .dropdown-arrow { inline-block;
        line-height: 1;
        background-repeat: no-repeat; middle;
        
    }
    


    .dropdown-layer { absolute; 1;
    }

    .dropdown-left {
        left:
        right: auto;
    }

    .dropdown-right {

     .dropdown-loading{
            width:32px;
            height: 32px;
            background: url(../img/loading.gif) no-repeat;
            margin: 20px;
        }

    .menu-active .dropdown-arrow{
    -o-transform: rotate(180deg);
    -ms-transform:
    -moz-transform:
    -webkit-transform:
    transform: rotate(180deg);
    }  

.menu .dropdown
        .menu{
            z-index: 3;
        }

        .menu .dropdown-toggle {
            display: block;
            padding: 0 13px 0 12px;
            border-left: 1px solid #f3f5f7;
            border-right: 1px solid #f3f5f7;
        }

        .menu .dropdown-arrow {
            width: 8px;
            height: 6px;
            background-image: url(../img/dropdown-arrow.png);
            margin-left: 5px;
        }

        .menu .dropdown-layer {
            top: 43px;
            background-color: #fff;
            border: 1px solid #cdd0d4;
        }

        .menu-item { 30px;
            line-height: 0 12px;
            color: #4d555d; nowrap;
        }

        .menu-item:hover { #f3f5f7;
        }

        .menu-active .dropdown-toggle {
            border-color: #cdd0d4;
        }

        .menu-active .dropdown-arrow {
            background-image: url(../img/dropdown-arrow-active.png);*/
        }

        .menu-active .dropdown-layer {
            display: block;
        }*/

btn
    .btn {
        text-align: center;
        cursor: pointer;
    }        

search
    .search { 1px solid #cfd2d5;
    }
    .search-inputbox { 585px; 40px; 0 10px;
        background-color:
    .search-btn { 73px; #07111b; 14px;
        
    }
    .search-layer {
        top: -1px; 1px solid #cfd2d5; 3;
    }
    .search-layer-item { 24px; pointer;

    }
    .search-layer-item:hover { #f3f5f7;
    }



category

    .category { 208px;
        margin-top: -62px; 14px;
    }
    .category .dropdown{ static;
    }
    .category-title { 54px; 0 20px; #c81414; #fff;
    }

    .category-title .icon {
        margin-right: 10px; 16px;
    }

    .category-list { 512px; #f01414;
    }
    .category .dropdown-toggle { 36px; 16px;

    .category .dropdown-link {

    .category .dropdown-arrow { 12px; simsun; bold;
    }

    .category-active .dropdown-toggle {

    .category-active .dropdown-toggle,.category-active .dropdown-link {

    .category .dropdown-layer { 744px;
        min-height: 473px; 8px 0 31px 0;
        box-shadow: 0 0 5px rgba(0,0.2);
    }

    .category-details {744px;        
        margin-top: 20px;
    }
    .category-details-title{ 84px;
        border-right: 1px solid #d9dde1; right;
       
    }

    .category-details-title-link {

    .category-details-item { 592px; 15px;
    }
    .category-details-item .link {

    .category .dropdown-loading { 220px auto 0;
     }

slider
    .slider {
            
            position: hidden; 728px; 504px;
        }

    .slider-indicator-wrap {
        bottom: 50%;
        margin-left: -36px;
    }

    .slider-indicator { 8px; #313a43;
        border-radius: pointer;
    }

    .slider-indicator-active { -2px; #f7f8f9; 2px solid #858b92;
    }

    .slider-control { -31px; 28px; 62px; #000; 0.8;
        filter: alpha(opacity=80); 22px; center;
    }

    .slider-control-left { 0;
    }

    .slider-control-right {

    .slider-fade .slider-item { 100%;
    }

    .slider-slide .slider-item {

        left: 100%;
    }
    .slider-slide .slider-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 1000%;
            height: 100%;
            background-color: red;
        }
        .slider-slide .slider-item {
            float: left;
        }tab
   .tab-panel { none;
        
    }

nav-site
.nav-site{ 站点导航整体设置
    width:100%;
    background-color: #f3f5f7;
}
.nav-site .container{  站点导航内容块整体设置
    height: 44px;
    line-height:
    border-bottom: 1px solid #cdd0d4;
}
.nav-site-login{  站点导航“亲，请登陆”设置
    margin-left:15px;
    color:#f01414;
}
.nav-site-signup,.nav-site-mobile{ 站点导航“注册和手机购买”设置10px;
}
.nav-site-category{
    margin:0 10px;
}

.nav-site-service{
    margin-right:15px;
}



下拉菜单样式dropdown
.dropdown{
    position: relative;
}
.dropdown-toggle{
    z-index: 2;
    display:block;
    padding: 0 16px 0 12px;
    border-left:
    border-right: 1px solid #f3f5f7;

}
.dropdown-arrow{ inline-block;
    width:8px;
    height:6px;background: url(../img/dropdown-arrow.png) no-repeat;8px;
    vertical-align: middle;

}
.dropdown-layer{none;
    top:43px;#fff; 1;
    border:
.dropdown-left{
    left:0;
    right:auto;

}
.dropdown-right{
.dropdown-item{30px;0 12px;#4d555d;
    white-space: nowrap;

}
.dropdown-item:hover{ #f3f5f7;
}

下拉菜单通过js和css来实现dropdownheader
.header{ 124px;
    .header-logo,.header .search,.header .cart { 36px;
    }
.header-logo{136px; 48px;
    background: url(../img/header-logo.png) no-repeat;15px;
    
}

.header .search{ 145px;
}
.header .cart{ 15px;
}

nav-main
    .nav-main {
        margin-bottom: 182px;
    }
    .nav-main .link { 50px; 48px;
    }
    
focus
    .focus { 504px; #eee; 8px;
    }

    .focus-sidebar { 249px;
    }

    .focus-news { 7px 20px 12px;
        border-bottom:
    .focus-news-head { 38px; 38px;
    }
    .focus-news-title { #f01414;
    .focus-news-body { 28px;
    }
    .focus-service {
        border-left: 1px solid #d9dde1;
    }
    .focus-service-item { 61px; 71px;
        border-top:
    .focus-service-icon,.focus-service-text {
    .focus-service-icon { 17px; #f67272; 22px;
    }
    .focus-service-text { 6px;
    .focus-ad { 90px;
        background: url(../img/focus-ad.png) no-repeat;
    }
    .focus .slider{ 8px;
    }

todays
    .todays .slider{1;158px;10px;
    }

    .todays .slider-img{240px;

    } 


 floor
        .floor { 533px;
            margin-bottom: 10px;
        }
        .floor-last{ 32px;
        }
        .floor .container{
            position: 1;
        }
        
        .floor-head { 68px;
            border-bottom: 1px solid #f01414;
        }
        .floor-title {
            margin-top: 22px;
        }
        .floor-title-num {
            border-radius:
            margin-right:
            text-align: center;
        }
        .floor-title-text { 3px;
            font-size:
        .floor-body { 464px;
        }
        .floor-item { 200px; 232px;
        .floor-item:hover {
            box-shadow: 0 0 10px rgba(0,0.2);
        }
        .floor-item-pic { 24px;
        }
        .floor-item-name {
        .floor-item-name .link { #07111b;
        }
        .floor-item-price { 11px;
            font-weight: bold;
        } 
        

        .floor-head .tab-item-wrap { 7px;
        }
        .floor-head .tab-item { #93999f; 14px;
        }
        .floor-head .tab-item-active { url(../img/floor-arrow.png) no-repeat center bottom; #f01414;
        }
        .floor-divider { 1px; #d9dde1; 22px 16px 0 0;
        }
        .floor-head .tab-panel { 100%;
        }
    

elevator
    .elevator { fixed; -90px; -640px;

        
    }
    .elevator-item { 35px;
    .elevator-item:hover,.elevator-active {
    .elevator-text {
    .elevator-item:hover .elevator-num,.elevator-active .elevator-num {
    .elevator-item:hover .elevator-text,.elevator-active .elevator-text { block;
    }

    
    


toolbar
    .toolbar { -102px;
    }
    .toolbar-item {
    .toolbar-icon { #b7bbbf; 30px;
    }
    .toolbar-text { 40px;
    }
    .toolbar-item:hover .toolbar-icon { #71777d;
    }
    .toolbar-item:hover .toolbar-text { #71777d;
    }

(function () {
    var transitionEndEventName = {
        transition: 'transitionend',MozTransition: 'transitionend''oTransitionEnd otransitionend'
    };
    var transitionEnd = ''false;

    for (var name in transitionEndEventName) {
        if (document.body.style[name] !== undefined) {
            transitionEnd = transitionEndEventName[name];
            isSupport = true;
            break;
        }
    }

    window.mt = window.mt || {};
    window.mt.transition = {
        end: transitionEnd,isSupport: isSupport
    };
})();

(($) {
    var transition = window.mt.transition; // transition兼容解决，transition.js

     提取init公共部分
     init($elem,hiddenCallback) {

        if ($elem.is(':hidden')) {
            $elem.data('status','hidden');
            if (typeof hiddenCallback === 'function') hiddenCallback();

        } else {
            $elem.data('status','shown');
        }
    }

     提取show公共部分

     show($elem,callback) {
        if ($elem.data('status') === 'show') return;
        if ($elem.data('status') === 'shown') ;
        $elem.data('status','show').trigger('show');
        callback();
    }

     hide($elem,1)">if ($elem.data('status') === 'hide') if ($elem.data('status') === 'hidden')  正常显示和隐藏
    var silent = {
         提取公共init后
        init: init,show: ($elem) {
            show($elem,1)">() {
                $elem.show();
                $elem.data('status','shown').trigger('shown');
            });
        },hide: ($elem) {
            hide($elem,1)">() {
                $elem.hide();
                $elem.data('status','hidden').trigger('hidden');
            });
        }
    };

     带效果的显示和隐藏，css3实现方法
    var css3 = {

        fade: {  淡入淡出

            init: ($elem) {
                css3._init($elem,'fadeOut');

            },1)">($elem) {
                css3._show($elem,1)">($elem) {
                css3._hide($elem,1)">);

            }

        },slideUpDown: { 

            init: ($elem) {
                $elem.height($elem.height());
                css3._init($elem,'slideUpDownCollapse');
            }
        },slideLeftRight: {  左右滚动
            init: ($elem) {
                $elem.width($elem.width());
                css3._init($elem,'slideLeftRightCollapse' 淡入淡出上下滚动
            init:  淡入淡出左右滚动
            init: );
            }
        }
    };

    css3._init = ($elem,className) {
        $elem.addClass('transition');
        init($elem,1)">() {
            $elem.addClass(className);

        });

    };

    css3._show = () {
            $elem.off(transition.end).one(transition.end,1)">() {
                $elem.data('status',1)">);
            });
            $elem.show();
            setTimeout(() {
                $elem.removeClass(className);
            },20);
        });


    };

    css3._hide = );
            });
            $elem.addClass(className);

        });

    }

     带效果的显示和隐藏，js实现方法
    var js = {
        fade: {  淡入淡出
            init: ($elem) {
                js._init($elem);
            },1)">($elem) {
                js._show($elem,'fadeIn');
            },1)">($elem) {

                js._hide($elem,1)">);

            }
        },slideUpDown: {  上下滚动
            init: 'slideUp'($elem) {
                js._customInit($elem,{

                    'width': 0'padding-right': 0
                });
            },1)">($elem) {

                js._customshow($elem);
            },1)">($elem) {

                js._customHide($elem,{
                    'width': 0
                });
            }
        },1)">($elem) {
  
                js._customInit($elem,{

                    'opacity': 0'padding-top': 0'opacity': 0($elem) {
 
                js._customInit($elem,'width': 0($elem) {
 
                js._customHide($elem,1)">
                });
            }
        }
    };

    js._init =  js和transition动画冲突，在执行js前，将transition去掉，屏蔽风险。
        init($elem,hiddenCallback);
    };

    js._customInit = var styles = {};
        var p  options) {
            styles[p] = $elem.css(p);
        }

        $elem.data('styles'() {
            $elem.css(options);
        });

    };

    js._customshow = ($elem) {
        var styles = $elem.data('styles');
        show($elem,1)">() {
            $elem.show();
            $elem.stop().animate($elem.data('styles'),);
            });
        });
    };

    js._customHide = () {

            $elem.stop().animate(options,1)">);
            });
        });
    };


    js._show = () {
            $elem.stop()[mode]();
            });
        });
    };

    js._hide = );
            });
        });

    };

     动画效果的默认设置
    var defaults = {
        css3: 'fade'
    };

     showHide($elem,1)">var mode = null;

        if (options.css3 && transition.isSupport) { 
            mode = css3[options.animation] || css3[defaults.animation];
          
        } else if (options.js) { 
            mode = js[options.animation] || js[defaults.animation];
        }  { 
            mode = silent;
        }
        mode.init($elem);
         {
            show: $.proxy(mode.show,1)">this (option) {
            return this.each( () {
                var $this = $(),options = $.extend({},defaults,1)">typeof option === 'object' && option),mode = $this.data('showHide');

                if (!mode) {
                    $this.data('showHide',mode = showHide($typeof mode[option] === 'function') {
                    mode[option]();
                }
            });
        }
    });

})(jQuery);

(($) {
    'use strict'

     Dropdown($elem,1)">this.$elem = $elem;
            this.options = options;
        this.$layer = this.$elem.find('.dropdown-layer'this.activeClass = options.active + '-active'._init();
    }

    Dropdown.DEFAULTS = {
        event: "hover"0
    };
    Dropdown.prototype._init= () {
        var self=this.$layer.showHide(.options);       
        this.$layer.on('show shown hide hidden',1)"> (e) {
            self.$elem.trigger('dropdown-'+e.type);
            
        });

        this.options.event === 'click') {
            this.$elem.on('click',1)">(e) {
                self.show();
                e.stopPropagation();
            });
            $(document).on('click',$.proxy(this.hide,1)">));

        }  {
            this.$elem.hover($.proxy(this.show,1)">this),1)">));

        }
    }

    Dropdown.prototype.show = () {
        var self = .options.delay) {
            this.timer = setTimeout(() {
                _show();
            },1)">.options.delay);
        }  {
            _show();
        }

         _show() {
            self.$elem.addClass(self.activeClass);
            self.$layer.showHide('show');
        }

    }

    Dropdown.prototype.hide = if(.options.delay){
            clearTimeout(.timer);

        }
        this.$elem.removeClass(.activeClass);
        this.$layer.showHide('hide');
    }

    $.fn.extend({
        dropdown: (option) {
            () {
                
                this=$(this.data('dropdown'this).data(),1)">typeof option==='object'&&option);
                 dropdown(this,options);  
                if(!dropdown){解决多次调用dropdown问题
                    $this.data('dropdown',dropdown=new Dropdown($typeof dropdown[option]==='function'){
                    dropdown[option]();

                }

            });

        }
    });


})(jQuery);

 面向对象方式实现搜索功能

(($) {
    'use strict';

     var cache = {
        data: {},count: 0 (key,data) {
            .data[key]) {
                this.data[key] = data;
                this.count++;
            }
        },readData:  (key) {
            .data[key];
        },deleteDataByKey: delete .data[key];
            this.count--;
        },deleteDataByOrder:  (num) {
            var count = 0;

            in .data) {
                if (count >= num) {
                    ;
                }
                count++;
                .deleteDataByKey(p);
            }
        }
    };

     Search($elem,1)"> $elem;
         options;

        this.$form = this.$elem.find('.search-form');
        this.$input = this.$elem.find('.search-inputbox'this.$elem.find('.search-layer'this.loaded = this.submit,1)">));
        .options.autocomplete) {
            .autocomplete();
        }

    }
    Search.DEFAULTS = {
        autocomplete: 200

    };
    Search.prototype.submit = this.getInputVal() === '';
        }
        .$form.submit();
    };
    Search.prototype.autocomplete = var timer = .$input
            .on('input',1)">() {
                 (self.options.getDataInterval) {

                    clearTimeout(timer);
                    timer = setTimeout(() {
                        self.getData();
                    },self.options.getDataInterval);
                }  {
                    self.getData();
                }

            })
            .on('focus',1)">this.showLayer,1)">))
            .on('click',1)">;
            });

        .options);
        $(document).on('click',1)">this.hideLayer,1)">));
    };

    Search.prototype.getData = var inputVal = .getInputVal();
        if (inputVal == '') return self.$elem.trigger('search-noData'if(cache.readData(inputVal)) return self.$elem.trigger('search-getData'this.jqXHR) .jqXHR.abort();
        this.jqXHR = $.ajax({
            url: this.options.url + inputVal,dataType: 'jsonp'
        }).done((data) {
            console.log(data);
            cache.addData(inputVal,data);
            console.log(cache.data);
            console.log(cache.count);
            self.$elem.trigger('search-getData'() {
            self.$elem.trigger('search-noData');
        }).always(() {
            self.jqXHR = ;
        });

    };
    Search.prototype.showLayer = this.loaded) this.$layer.showHide('show');
    };
    Search.prototype.hideLayer = );
    };

    Search.prototype.getInputVal = return $.trim(.$input.val());
    };

    Search.prototype.setInputVal = (val) {
        .$input.val(removeHtmlTags(val));

         removeHtmlTags(str) {
            return str.replace(/<(?:[^>'"]|"[^"]*"|'[^']*')*>/g,'');
        }
    };

    Search.prototype.appendLayer = (html) {
        .$layer.html(html);
        this.loaded = !!html;
    };

    $.fn.extend({
        search: (option,value) {
            () {

                this.data('search' option);

                search) {
                    $this.data('search',search = new Search($typeof search[option] === 'function') {
                    search[option](value);

                }

            });

        }
    });



})(jQuery);

(;
    var transition = window.mt.transition;
    var init = this.curX = parseFloat(this.$elem.css('left'this.curY = parseFloat(this.$elem.css('top'));

    }

    var to = (x,y,callback) {
        x = (typeof x === 'number') ? x : .curX;
        y = (typeof y === 'number') ? y : .curY;
        this.curX === x && this.curY === y) this.$elem.trigger('move',[.$elem]);
        typeof callback === 'function') {
            callback();
        }

        this.curX = x;
        this.curY = y;

    }

    var Silent = ($elem) {
        init.call(this,$elem); 改变this的指向，这里this指外面的this,如不使用call，this指init。
        this.$elem.removeClass('transition');


    };
    Silent.prototype.to = ;
        to.call(() {

            self.$elem.css({
                left: x,top: y
            });
            self.$elem.trigger('moved'(x) {
        .to(x);
    };
    Silent.prototype.y = (y) {
        this.to( css3 方式
    var Css3 = this.$elem.addClass('transition'.$elem.css({
            left: .curX,top: .curY
        });

    };

    Css3.prototype.to = () {


            self.$elem.off(transition.end).one(transition.end,1)">() {
                self.$elem.trigger('moved'.to(x);
    };
    Css3.prototype.y =  js方式
    var Js = );

    };

    Js.prototype.to = () {
            self.$elem.stop().animate({
                left: x,top: y
            },[self.$elem]);
            });
        });
    };

    Js.prototype.x = .to(x);

    };
    Js.prototype.y =  {
            css3: 
        };

    var move =  ($elem,1)">if (options.css3 && transition.isSupport) {  css3 transition
            mode = new Css3($elem);
        } if (options.js) {  js animation
            mode =  Js($elem);
        } else {  no animation
            mode =  Silent($elem);
        }

         {
            to: $.proxy(mode.to,mode),1)">改变指针this指向mode.
            x: $.proxy(mode.x,y: $.proxy(mode.y,mode)
        };
    };

    $.fn.extend({
        move:  (option,y) {
            this.data('move'if (!mode) {  first time
                    $this.data('move',mode = move($) {
                    mode[option](x,y);
                }
            });
        }

    });

})(jQuery);

( ($) {
    'use strict' Slider($elem,1)">this.$items = this.$elem.find('.slider-item'this.$indicators = this.$elem.find('.slider-indicator'this.$controls = this.$elem.find('.slider-control');

        this.itemNum = .$items.length;
        this.curIndex = this._getCorrectIndex(.options.activeIndex);

        ._init();
    }
    Slider.DEFAULTS = slide
        activeIndex: 0
    };
    Slider.prototype._init = this.$elem.trigger('slider-show',1)">this.curIndex,1)">this.$items[.curIndex]]);

         init show
        this.$indicators.removeClass('slider-indicator-active'this.$indicators.eq(this.curIndex).addClass('slider-indicator-active' to
        this.options.animation === 'slide'this.$elem.addClass('slider-slide'this.$items.eq(this.curIndex).css('left',0);

             send message
            this.$items.on('move moved',1)"> (e) {
                var index = self.$items.index(if (e.type === 'move') {
                    if (index === self.curIndex) {
                        self.$elem.trigger('slider-hide',[index,1)">]);
                    }  {
                        self.$elem.trigger('slider-show',1)">]);
                    }
                }  moved
                    if (index === self.curIndex) {  指定的
                        self.$elem.trigger('slider-shown',1)"> {
                        self.$elem.trigger('slider-hidden',1)">]);
                    }
                }
            });
             move init
            this.$items.move(.options);
            this.to = ._slide;

            this.itemWidth = this.$items.eq(0).width();
            this.transitionClass = this.$items.eq(0).hasClass('transition') ? 'transition' : '';
        }  fade
            this.$elem.addClass('slider-fade'.curIndex).show();

            this.$items.on('show shown hide hidden',1)"> (e) {
                self.$elem.trigger('slider-' + e.type,[self.$items.index(]);
            });
             showHide init
            this.$items.showHide(._fade;
        }

         bind event
        .$elem
            .hover( () {
                self.$controls.show();
            },1)"> () {
                self.$controls.hide();
            })
            .on('click','.slider-control-left',1)"> () {
                self.to(self._getCorrectIndex(self.curIndex - 1),1);
            })
            .on('click','.slider-control-right',1)"> () {
                self.to(self._getCorrectIndex(self.curIndex + 1),-1 () {
                self.to(self._getCorrectIndex(self.$indicators.index()));
            });

         auto
        this.options.interval && !isNaN(Number(.options.interval))) {
            this.pause,1)">this.auto,1)">));
            .auto();
        }
    };
    Slider.prototype._getCorrectIndex = (index) {
        if (isNaN(Number(index))) return 0if (index < 0) this.itemNum - 1if (index > this.itemNum - 1)  index;
    };
    Slider.prototype._activateIndicators = this.curIndex).removeClass('slider-indicator-active'this.$indicators.eq(index).addClass('slider-indicator-active');
    };
    Slider.prototype._fade = this.curIndex === index) this.curIndex).showHide('hide'this.$items.eq(index).showHide('show'._activateIndicators(index);

        this.curIndex = index;
    };
    Slider.prototype._slide = (index,direction) {
         确定滑入滑出的方向
        if (!direction) {  click indicators
            this.curIndex < index) {
                direction = -1;
            } this.curIndex > index) {
                direction = 1;
            }
        }

         设置指定滑入幻灯片的初始位置
        this.$items.eq(index).removeClass(this.transitionClass).css('left',-1 * direction * .itemWidth);

         当前幻灯片滑出可视区域，指定幻灯片滑入可视区域
        setTimeout( () {
            self.$items.eq(self.curIndex).move('x',direction * self.itemWidth);
            self.$items.eq(index).addClass(self.transitionClass).move('x',1)">);
            self.curIndex = index;
        },1)">);
        
         激活indicator
        ._activateIndicators(index);
    };
    Slider.prototype.auto = this.intervalId = setInterval( () {
            self.to(self._getCorrectIndex(self.curIndex + 1),1)">);
        },1)">.options.interval);
    };
    Slider.prototype.pause = () {
        clearInterval(.intervalId);
    };

    $.fn.extend({
        slider: this.data('slider'this.data(),1)">if (!slider) { this.data('slider',slider = new Slider($typeof slider[option] === 'function') {
                    slider[option]();
                }
            });
        }
    })
})(jQuery);

( Tab($elem,1)">this.$elem.find('.tab-item'this.$panels = this.$elem.find('.tab-panel'._init();
    }
    Tab.DEFAULTS = {
        event: 'mouseenter',1)"> click
        css3: 0

    };
    Tab.prototype._init = this.$items.removeClass('tab-item-active'this.curIndex).addClass('tab-item-active'this.$panels.eq(.curIndex).show();
        this.$elem.trigger('tab-show',1)">this.$panels[.curIndex]]);


         trigger event
        this.$panels.on('show shown hide hidden',1)">(e) {
            self.$elem.trigger('tab-' + e.type,[self.$panels.index(]);
        });

         showHide init
        this.$panels.showHide(.options);

        this.options.event = this.options.event === 'click' ? 'click' : 'mouseenter'this.$elem.on(this.options.event,'.tab-item',1)">() {
            var elem=if (self.options.delay) {  delay
                clearTimeout(timer);
                timer = setTimeout( () {
                    self.toggle(self.$items.index(elem));
                },self.options.delay);
            }  immediate
                self.toggle(self.$items.index(elem));
            }

        });

        .auto();
        }


    };
    Tab.prototype._getCorrectIndex =  index;
    };
    Tab.prototype.toggle = this.$panels.eq(index).showHide('show'this.curIndex).removeClass('tab-item-active'this.$items.eq(index).addClass('tab-item-active' index;
    };


    Tab.prototype.auto =  () {
            self.toggle(self._getCorrectIndex(self.curIndex + 1));
        },1)">.options.interval);
    };
    Tab.prototype.pause = .intervalId);
    };

    $.fn.extend({
        tab: this.data('tab'if (!tab && typeof option !== 'object') ;

                if (!tab) { this.data('tab',tab = new Tab($typeof tab[option] === 'function') {
                    tab[option]();
                }
            });
        }
    });
})(jQuery);

(($) {

    'use strict'menu
    var dropdown = {};
    $('.menu')
        .on('dropdown-show',1)">(e) {
            dropdown.loadOnce($(
        });

    dropdown.buildMenuItem = var html = ""if (data.length === 0) var i = 0; i < data.length; i++) {
            html += '<li><a href="' + data[i].url + '" target="_blank" class="menu-item">' + data[i].name + '</a></li>'
        }
        $elem.find('.dropdown-layer').html(html);

    };

    header search
    var search = {};
    search.$headerSearch = $('#header-search');
    search.$headerSearch.html = '';
    search.$headerSearch.maxNum = 10 获得数据处理
    search.$headerSearch.on('search-getData',1)">(e,data) {
        );
        search.$headerSearch.html = search.$headerSearch.createHeaderSearchLayer(data,search.$headerSearch.maxNum);
        $this.search('appendLayer' 将生成的html呈现在页面中        
         (search.$headerSearch.html) {
            $this.search('showLayer');
        }  {
            $this.search('hideLayer');

        }
    }).on('search-noData',1)">(e) {
         没获得数据处理
        $(this).search('hideLayer').search('appendLayer',1)">);

    }).on('click','.search-layer-item',1)"> 点击每项时，提交
        search.$headerSearch.search('setInputVal',1)">).html());
        search.$headerSearch.search('submit');
    });

    search.$headerSearch.search({
        autocomplete: 
    });

     获取数据，生成html

    search.$headerSearch.createHeaderSearchLayer = (data,maxNum) {
        var html = ''].length;

        if (dataNum === 0return ''var i = 0; i < dataNum; i++if (i >= maxNum) ;
            html += '<li class="search-layer-item text-ellipsis">' + data['result'][i][0] + '</li>' html;

    };

     focus-category

    $('#focus-category').find('.dropdown'() {
            dropdown.loadOnce($(
        });

    dropdown.createCategoryDetails = ) {
            html += '<dl class="category-details cf"><dt class="category-details-title fl"><a href="###" target="_blank" class="category-details-title-link">' + data[i].title + '</a></dt><dd class="category-details-item fl">'var j = 0; j < data[i].items.length; j++) {
                html += '<a href="###" target="_blank" class="link">' + data[i].items[j] + '</a>';
            }
            html += '</dd></dl>' setTimeout(function () {
        $elem.find('.dropdown-layer').html(html);
         },1000);

    };

    dropdown.loadOnce = var dataLoad = $elem.data('load'if (!dataLoad) if (!$elem.data('loaded')) {
            $elem.data('loaded',1)">);
            $.getJSON(dataLoad).done((data) {
                typeof success === 'function') success($elem,data);
            }).fail(() {
                $elem.data('loaded',1)">);
            });
        }
    };

    imgLoader
    var imgLoader = {};
    imgLoader.loadImg = (url,imgLoaded,imgFailed) {
        var image =  Image();
        image.onerror = typeof imgFailed === 'function') imgFailed(url);
        }
        image.onload = typeof imgLoaded === 'function') imgLoaded(url);
        };
        image.src = url;
    };

    imgLoader.loadImgs = ($imgs,success,fail) {        
        
        $imgs.each(function(_,el) {  _ 相当占位，不使用该参数。
            var $img = $(el);
            imgLoader.loadImg($img.data('src'),1)">(url) {
                $img.attr('src'(url) {
                console.log('从' + url + '加载图片失败');
                fail($img,url);
            });
        });
    }

    lazyLoad

    var lazyLoad = {};

    lazyLoad.loadUntil = (options) {

        var items = {},loadedItemNum = 0= options.$container,id = options.id
         什么时候开始加载
        $elem.on(options.triggerEvent,loadItemFn = if (items[index] !== 'loaded') {
                $elem.trigger(id + '-loadItem',elem,1)">() {
                    items[index] = 'loaded';
                    loadedItemNum++;
                    console.log(index + ': loaded');
                    if (loadedItemNum === options.totalItemNum) {
                         全部加载完毕
                        $elem.trigger(id + '-itemsLoaded');
                    }
                }]);
            }
        });

        加载完毕
        $elem.on(id + '-itemsLoaded',1)">(e) {
            console.log(id + '-itemsLoaded' 清除事件
            $elem.off(options.triggerEvent,loadItemFn);
        });

    }

    lazyLoad.isVisible = (offsetTop,height) {
        var $win = browser.$win;
        return ($win.height() + $win.scrollTop() > offsetTop) && ($win.scrollTop() < offsetTop + height)
    }


     foucs-slider
    var slider = {};
    slider.$focusSlider = $('#focus-slider');
    
    slider.$focusSlider.on('focus-loadItem',success) {

        imgLoader.loadImgs($(elem).find('.slider-img'),1)">($img,url) {
            $img.attr('src','img/focus-slider/placeholder.png');
        });
    });

    lazyLoad.loadUntil({
        $container: slider.$focusSlider,totalItemNum: slider.$focusSlider.find('.slider-img').length,triggerEvent: 'slider-show'
    });


    slider.$focusSlider.slider({
        css3:  fade  slide
        activeIndex: 0
    });


     todays-slider   
    slider.$todaysSlider = $('#todays-slider');
    
    slider.$todaysSlider.on('todays-loadItem','img/todays-slider/placeholder.png');
        });
    });

    lazyLoad.loadUntil({
        $container: slider.$todaysSlider,totalItemNum: slider.$todaysSlider.find('.slider-img'
    });

    slider.$todaysSlider.slider({
        css3: 
    });


floor
    var floor = {};
    floor.$floor = $('.floor');


    floor.floorData = [{
        num: '1''大牌','男装','女装'],offsetTop: floor.$floor.eq(0).offset().top,height: floor.$floor.eq(0).height(),items: [
            [{
                name: '匡威男棒球开衫外套2015'
            },{
                name: 'adidas 阿迪达斯 训练 男子''必迈BMAI一体织跑步短袖T恤''NBA袜子半毛圈运动高邦棉袜''特步官方运动帽男女帽子2016''KELME足球训练防寒防风手套''战地吉普三合一冲锋衣''探路者户外男士徒步鞋''羽绒服2015秋冬新款轻薄男士''溯溪鞋涉水鞋户外鞋''旅行背包多功能双肩背包''户外旅行双肩背包OS0099'
            }],[{
                name: '匡威男棒球开衫外套2015'
            }]
        ]
    },{
        num: '2''热门','国际大牌','国际名品'116919879.92281193929925719936139'韩束红石榴鲜活水盈七件套装''手机通讯'2'摩托罗拉 Moto Z Play''Apple iPhone 7 (A1660)''小米 Note 全网通 白色''小米5 全网通 标准版 3GB内存''荣耀7i 海岛蓝 移动联通4G手机''乐视（Le）乐2（X620）32GB'2499899199840881128728'4'312993699299911984390'九阳电饭煲多功能智能电饭锅'32915996651799'暴风TV 超体电视 40X 40英寸''电脑数码'4'戴尔成就Vostro 3800-R6308'539930996599129995999499799419849349'戴尔成就Vostro 3800-R6308'
            }]
        ]
    }];


    floor.buildFloor = (floorData) {
        ;

        html += '<div class="container">';
        html += floor.buildFloorHead(floorData);
        html += floor.buildFloorBody(floorData);
        html += '</div>' html;
    };

    floor.buildFloorHead = ;
        html += '<div class="floor-head">';
        html += '<h2 class="floor-title fl"><span class="floor-title-num">' + floorData.num + 'F</span><span class="floor-title-text">' + floorData.text + '</span></h2>';
        html += '<ul class="tab-item-wrap fr">'var i = 0; i < floorData.tabs.length; i++) {
            html += '<li class="fl"><a href="javascript:;" class="tab-item">' + floorData.tabs[i] + '</a></li>'if (i !== floorData.tabs.length - 1) {
                html += '<li class="floor-divider fl text-hidden">分隔线</li>';
            }
        }
        html += '</ul>';
        html += '</div>' html;
    };

    floor.buildFloorBody = ;
        html += '<div class="floor-body">'var i = 0; i < floorData.items.length; i++) {
            html += '<ul class="tab-panel">'var j = 0; j < floorData.items[i].length; j++) {
                html += '<li class="floor-item fl">';
                html += '<p class="floor-item-pic"><a href="###" target="_blank"><img src="img/floor/loading.gif" class="floor-img" data-src="img/floor/' + floorData.num + '/' + (i + 1) + '/' + (j + 1) + '.png" alt="" /></a></p>';
                html += '<p class="floor-item-name"><a href="###" target="_blank" class="link">' + floorData.items[i][j].name + '</a></p>';
                html += '<p class="floor-item-price">' + floorData.items[i][j].price + '</p>';
                html += '</li>';
            }

            html += '</ul>';
        }

        html += '</div>' html;
    };

    var browser={};    

    browser.$win = $(window);
    browser.$doc = $(document);

    
    floor.timeToShow = () {
        console.log('time to show');
        floor.$floor.each( (lazyLoad.isVisible(floor.floorData[index].offsetTop,floor.floorData[index].height)) {
                browser.$doc.trigger('floor-show' () {
        clearTimeout(floor.floorTimer);
        floor.floorTimer=setTimeout(floor.timeToShow,250);
    });

    floor.$floor.on('floor-loadItem',success) {

        imgLoader.loadImgs($(elem).find('.floor-img'),'img/floor.placeholder.png');
        });
    });

    browser.$doc.on('floors-loadItem',success) {

        var html = floor.buildFloor(floor.floorData[index]),1)"> $(elem);
        success();
            $elem.html(html);
            lazyLoad.loadUntil({
                $container: $elem,totalItemNum: $elem.find('.floor-img''floor'
            });
            $elem.tab({
                event: 'mouseenter',1)"> mouseenter或click
                css3: 
            });

    });

    browser.$doc.on('floors-itemsLoaded',1)">() {
        browser.$win.off('scroll resize''floors'
    });

    floor.timeToShow();


 elevator
    floor.whichFloor = var num = -1;

        floor.$floor.each( (index,1)">var floorData = floor.floorData[index];

            num = index;

            if (browser.$win.scrollTop()+browser.$win.height()/2 < floorData.offsetTop) {
                num = index - 1;
            }
        });

         num;
    };
    console.log(floor.whichFloor());

    floor.$elevator = $('#elevator');
    floor.$elevator.$items = floor.$elevator.find('.elevator-item');
    floor.setElevator = var num = floor.whichFloor();

        if (num === -1) {  hide
            floor.$elevator.fadeOut();
        }  show
            floor.$elevator.fadeIn();
            floor.$elevator.$items.removeClass('elevator-active');
            floor.$elevator.$items.eq(num).addClass('elevator-active');
        }
    };

    floor.setElevator();

    browser.$win.on('scroll resize',1)"> () {
        clearTimeout(floor.elevatorTimer);
        floor.elevatorTimer = setTimeout(floor.setElevator,1)">);
    });

    floor.$elevator.on('click','.elevator-item',1)"> () {
        $('html,body').animate({
            scrollTop: floor.floorData[$().index()].offsetTop
        });
    });

    $('#backToTop').on('click',1)">).animate({
            scrollTop: 0
        });
    });


})(jQuery);