fe / YOHOBUYPC · Commits

Go to a project

Authored by hf
Commit 86d3a4df8205d67da74608159f6cedb422ab6b77 2 parents ac66ad5c 858c776a

merge channel.js

Inline Side-by-side
Showing 10 changed files with 94 additions and 25 deletions
@@ -64,6 +64,18 @@ $(window).scroll(function() { @@ -64,6 +64,18 @@ $(window).scroll(function() {
64 }); 64 });
65 }); 65 });
66 66
  67 +function changeBackground() {
  68 + var $brandList = $('.brand-list').find('p');
  69 +
  70 + $brandList.on('touchstart', function() {
  71 + $brandList.css('background', '#fff');
  72 + $(this).css('background', '#eee');
  73 + }).on('touchend touchcancel', function() {
  74 + $(this).css('background', '#fff');
  75 + });
  76 +}
  77 +changeBackground();
  78 +
67 function searchResult() { 79 function searchResult() {
68 var keyword = ($keyword.val() + '').toLowerCase(); 80 var keyword = ($keyword.val() + '').toLowerCase();
69 var result = {}, 81 var result = {},
@@ -113,6 +125,7 @@ function searchResult() { @@ -113,6 +125,7 @@ function searchResult() {
113 125
114 // 插入 dom，绑定事件 126 // 插入 dom，绑定事件
115 $('.search-result').html(html); 127 $('.search-result').html(html);
  128 + changeBackground();
116 } 129 }
117 130
118 if ($('.brand-search-page').length) { 131 if ($('.brand-search-page').length) {
@@ -9,10 +9,10 @@ var $ = require('jquery'), @@ -9,10 +9,10 @@ var $ = require('jquery'),
9 9
10 var $nav = $('.category-nav'), 10 var $nav = $('.category-nav'),
11 $categoryContainer = $('.category-container'), 11 $categoryContainer = $('.category-container'),
12 - $contents = $categoryContainer.children('.content'); 12 + $contents = $categoryContainer.children('.content'),
  13 + $subLevelItem = $('.sub-level li');
13 14
14 -var $curContent = $contents.not('.hide'),  
15 - $curClickSubLevel; 15 +var $curContent = $contents.not('.hide');
16 16
17 var navHammer, ccHammer; 17 var navHammer, ccHammer;
18 18
@@ -71,13 +71,9 @@ ccHammer.on('tap', function(e) { @@ -71,13 +71,9 @@ ccHammer.on('tap', function(e) {
71 } 71 }
72 }); 72 });
73 73
74 -$('.sub-level').bind('touchend', function(e) {  
75 - var $cur = $(e.target);  
76 -  
77 - $cur.addClass('a-highlight');  
78 -  
79 - if ($curClickSubLevel) {  
80 - $curClickSubLevel.removeClass('a-highlight');  
81 - }  
82 - $curClickSubLevel = $cur;  
83 -});  
  74 +$subLevelItem.on('touchstart', function() {
  75 + $subLevelItem.removeClass('highlight');
  76 + $(this).addClass('highlight');
  77 +}).on('touchend touchcancel', function() {
  78 + $(this).removeClass('highlight');
  79 +});
@@ -94,6 +94,14 @@ $subNav.each(function () { @@ -94,6 +94,14 @@ $subNav.each(function () {
94 } 94 }
95 }); 95 });
96 96
  97 +// 侧边栏点击背景色变化
  98 +$sideNav.children('ul').children('li').on('touchstart', function() {
  99 + $sideNav.children('ul').children('li').css('background', '#fff');
  100 + $(this).css('background', '#eee');
  101 +}).on('touchend touchcancel', function() {
  102 + $(this).css('background', '#fff');
  103 +});
  104 +
97 //头部banner轮播 105 //头部banner轮播
98 if ($('.banner-swiper').find('li').size() > 1) { 106 if ($('.banner-swiper').find('li').size() > 1) {
99 bannerSwiper = new Swiper('.banner-swiper', { 107 bannerSwiper = new Swiper('.banner-swiper', {
@@ -8,7 +8,8 @@ var $ = require('jquery'); @@ -8,7 +8,8 @@ var $ = require('jquery');
8 var $searchBox = $('.search-box'), 8 var $searchBox = $('.search-box'),
9 $box = $('.box'), 9 $box = $('.box'),
10 $indexSearch = $('.index-search'), 10 $indexSearch = $('.index-search'),
11 - $indexLogo = $('.index-logo'); 11 + $indexLogo = $('.index-logo'),
  12 + $channelLink = $('.index-channel a');
12 13
13 var $search = $searchBox.children('input[type="text"]'), 14 var $search = $searchBox.children('input[type="text"]'),
14 $cancelSearch = $box.children('.no-search'), 15 $cancelSearch = $box.children('.no-search'),
@@ -42,6 +43,26 @@ $searchBox.children('.search-icon').on('touchstart', function() { @@ -42,6 +43,26 @@ $searchBox.children('.search-icon').on('touchstart', function() {
42 $indexSearch.submit(); 43 $indexSearch.submit();
43 }); 44 });
44 45
45 -$('.index-channel img').on('load', function() {  
46 - window.rePosFooter(); 46 +$('.index-channel img').on('load error', function() {
  47 + window.rePosFooter && window.rePosFooter();
  48 +});
  49 +
  50 +$channelLink.on('touchstart', function() {
  51 + $channelLink.css({
  52 + background: '#000',
  53 + color: '#fff',
  54 + borderColor: '#fff'
  55 + });
  56 + $(this).css({
  57 + background: 'rgba(255, 255, 255, 0.5)',
  58 + color: '#000',
  59 + borderColor: '#000'
  60 + });
  61 +}).on('touchend touchcancel', function() {
  62 + $(this).css({
  63 + background: '#000',
  64 + color: '#fff',
  65 + borderColor: '#fff'
  66 + });
  67 +
47 }); 68 });
@@ -24,6 +24,18 @@ function showFilter() { @@ -24,6 +24,18 @@ function showFilter() {
24 $filter.removeClass('hide'); 24 $filter.removeClass('hide');
25 } 25 }
26 26
  27 +// 子菜单点击时背景高亮
  28 +function highlightSubItem() {
  29 + var $subItem = $('.filter-body .sub-item');
  30 +
  31 + $subItem.on('touchstart', function() {
  32 + $subItem.removeClass('highlight');
  33 + $(this).addClass('highlight');
  34 + }).on('touchend touchcancel', function() {
  35 + $(this).removeClass('highlight');
  36 + });
  37 +}
  38 +
27 //主筛选项Tap事件句柄 39 //主筛选项Tap事件句柄
28 function classifyTapEvt($this) { 40 function classifyTapEvt($this) {
29 if ($this.hasClass('active')) { 41 if ($this.hasClass('active')) {
@@ -95,7 +107,7 @@ function initFilter(opt) { @@ -95,7 +107,7 @@ function initFilter(opt) {
95 hCbFn = opt.hCbFn; 107 hCbFn = opt.hCbFn;
96 108
97 missStatus = opt.missStatus; 109 missStatus = opt.missStatus;
98 - 110 + highlightSubItem();
99 111
100 $filter = $('.filter-mask'); 112 $filter = $('.filter-mask');
101 113
@@ -131,6 +143,7 @@ function initFilter(opt) { @@ -131,6 +143,7 @@ function initFilter(opt) {
131 } 143 }
132 } 144 }
133 }); 145 });
  146 +
134 } 147 }
135 148
136 //重置筛选面板 149 //重置筛选面板
@@ -59,18 +59,23 @@ @@ -59,18 +59,23 @@
59 display: none; 59 display: none;
60 width: 50%; 60 width: 50%;
61 height: 440px; 61 height: 440px;
62 - padding-left: 15px;  
63 left: 50%; 62 left: 50%;
64 top: 0; 63 top: 0;
65 overflow: auto; 64 overflow: auto;
  65 + -webkit-overflow-scrolling: touch;
66 66
67 > li { 67 > li {
68 height: 60px; 68 height: 60px;
69 line-height: 60px; 69 line-height: 60px;
  70 + padding-left: 15px;
70 border-bottom: 1px solid #e6e6e6; 71 border-bottom: 1px solid #e6e6e6;
71 overflow: hidden; 72 overflow: hidden;
72 white-space: nowrap; 73 white-space: nowrap;
73 text-overflow: ellipsis; 74 text-overflow: ellipsis;
  75 +
  76 + &.highlight {
  77 + background: #eee;
  78 + }
74 } 79 }
75 80
76 .chosed-icon { 81 .chosed-icon {
@@ -95,7 +95,6 @@ @@ -95,7 +95,6 @@
95 .sub-level-container { 95 .sub-level-container {
96 float: left; 96 float: left;
97 box-sizing: border-box; 97 box-sizing: border-box;
98 - padding-left: 20rem / $pxConvertRem;  
99 background: #fff; 98 background: #fff;
100 width: 60%; 99 width: 60%;
101 height: 100%; 100 height: 100%;
@@ -112,6 +111,11 @@ @@ -112,6 +111,11 @@
112 height: 71rem / $pxConvertRem; 111 height: 71rem / $pxConvertRem;
113 line-height: 71rem / $pxConvertRem; 112 line-height: 71rem / $pxConvertRem;
114 border-bottom: 1px solid #e6e6e6; 113 border-bottom: 1px solid #e6e6e6;
  114 + padding-left: 20rem / $pxConvertRem;
  115 +
  116 + &.highlight {
  117 + background: #eee;
  118 + }
115 119
116 &:last-child { 120 &:last-child {
117 border-bottom: none; 121 border-bottom: none;
@@ -126,7 +130,4 @@ @@ -126,7 +130,4 @@
126 } 130 }
127 } 131 }
128 132
129 - .a-highlight {  
130 - text-decoration: underline;  
131 - }  
132 } 133 }
@@ -50,12 +50,16 @@ @@ -50,12 +50,16 @@
50 color: #999; 50 color: #999;
51 } 51 }
52 52
  53 + .active {
  54 + background: #eee;
  55 + }
  56 +
53 .active > a { 57 .active > a {
54 color: #000; 58 color: #000;
55 .spanTest{ 59 .spanTest{
56 width: auto; 60 width: auto;
57 height: 100%; 61 height: 100%;
58 - border-bottom: 2px solid #000; 62 + // border-bottom: 2px solid #000;
59 display: inline-block; 63 display: inline-block;
60 box-sizing:border-box; 64 box-sizing:border-box;
61 } 65 }
@@ -206,11 +206,15 @@ @@ -206,11 +206,15 @@
206 box-sizing: border-box; 206 box-sizing: border-box;
207 } 207 }
208 208
  209 + .active {
  210 + background: #eee;
  211 + }
  212 +
209 .active > a { 213 .active > a {
210 color: #000; 214 color: #000;
211 215
212 .nav-txt { 216 .nav-txt {
213 - border-bottom: 2px solid #000; 217 + // border-bottom: 2px solid #000;
214 } 218 }
215 219
216 .iconfont { 220 .iconfont {
@@ -51,8 +51,12 @@ @@ -51,8 +51,12 @@
51 color: #999; 51 color: #999;
52 } 52 }
53 53
  54 + .active {
  55 + background: #eee;
  56 + }
  57 +
54 .active > a { 58 .active > a {
55 - border-bottom: 2px solid #000; 59 + // border-bottom: 2px solid #000;
56 color: #000; 60 color: #000;
57 box-sizing:border-box; 61 box-sizing:border-box;
58 } 62 }