Showing
3 changed files
with
34 additions
and
39 deletions
@@ -9,49 +9,27 @@ var $searchBox = $('.search-box'), | @@ -9,49 +9,27 @@ var $searchBox = $('.search-box'), | ||
9 | $indexSearch = $('.index-search'), | 9 | $indexSearch = $('.index-search'), |
10 | $indexLogo = $('.index-logo'); | 10 | $indexLogo = $('.index-logo'); |
11 | 11 | ||
12 | +var $search = $searchBox.children('input'), | ||
13 | + $cancelSearch = $indexSearch.children('.no-search'); | ||
14 | + | ||
12 | require('../common'); | 15 | require('../common'); |
13 | 16 | ||
14 | -function showBigSearch() { | ||
15 | - $indexLogo.css({ | ||
16 | - opacity: 0 | ||
17 | - }); | ||
18 | - $searchBox.css({ | ||
19 | - width: '12.8rem' | ||
20 | - }); | ||
21 | - $indexSearch.css({ | ||
22 | - width: '15.5rem' | ||
23 | - }); | ||
24 | - $('.clear-text, .no-search').show(); | ||
25 | -} | ||
26 | - | ||
27 | -function hideBigSearch() { | ||
28 | - $indexLogo.css({ | ||
29 | - opacity: 1 | ||
30 | - }); | ||
31 | - $searchBox.css({ | ||
32 | - width: '8.8rem' | ||
33 | - }); | ||
34 | - $indexSearch.css({ | ||
35 | - width: '9.6rem' | ||
36 | - }); | ||
37 | - $('.clear-text, .no-search').hide(); | ||
38 | -} | ||
39 | - | ||
40 | -$searchBox.find('input').on('focus', function() { | ||
41 | - showBigSearch(); | 17 | +$search.on('focus', function() { |
18 | + $indexSearch.addClass('action'); | ||
19 | + $indexLogo.addClass('action'); | ||
42 | }); | 20 | }); |
43 | 21 | ||
44 | -$searchBox.find('.clear-text').on('touchend', function() { | ||
45 | - $searchBox.find('input').val(''); | ||
46 | -}); | ||
47 | -$searchBox.find('.search-icon').on('touchend', function() { | ||
48 | - $indexSearch.submit(); | 22 | +$cancelSearch.on('touchstart', function() { |
23 | + $indexSearch.removeClass('action'); | ||
24 | + $indexLogo.removeClass('action'); | ||
25 | + | ||
26 | + $search.blur(); | ||
49 | }); | 27 | }); |
50 | 28 | ||
51 | -$('.no-search').on('touchend', function() { | ||
52 | - $searchBox.find('input').val(''); | ||
53 | - hideBigSearch(); | 29 | +$searchBox.children('.clear-text').on('touchstart', function() { |
30 | + $search.val('').focus(); | ||
54 | }); | 31 | }); |
55 | 32 | ||
56 | -// 底部计算有误 | ||
57 | -// window.rePosFooter && window.rePosFooter(); | 33 | +$searchBox.children('.search-icon').on('touchstart', function() { |
34 | + $indexSearch.submit(); | ||
35 | +}); |
@@ -15,6 +15,11 @@ | @@ -15,6 +15,11 @@ | ||
15 | color: #343434; | 15 | color: #343434; |
16 | opacity: 1; | 16 | opacity: 1; |
17 | transition: all 400ms; | 17 | transition: all 400ms; |
18 | + | ||
19 | + &.action { | ||
20 | + opacity: 0; | ||
21 | + width: 0; | ||
22 | + } | ||
18 | } | 23 | } |
19 | 24 | ||
20 | .index-search { | 25 | .index-search { |
@@ -27,6 +32,18 @@ | @@ -27,6 +32,18 @@ | ||
27 | overflow: hidden; | 32 | overflow: hidden; |
28 | z-index: 3; | 33 | z-index: 3; |
29 | @include transition(width .4s); | 34 | @include transition(width .4s); |
35 | + | ||
36 | + &.action { | ||
37 | + width: 620rem / $pxConvertRem; | ||
38 | + .no-search, .clear-text { | ||
39 | + display: block; | ||
40 | + } | ||
41 | + | ||
42 | + .search-box { | ||
43 | + width: 512rem / $pxConvertRem; | ||
44 | + } | ||
45 | + } | ||
46 | + | ||
30 | .search-box { | 47 | .search-box { |
31 | float: left; | 48 | float: left; |
32 | position: relative; | 49 | position: relative; |
@@ -14,7 +14,7 @@ | @@ -14,7 +14,7 @@ | ||
14 | </form> | 14 | </form> |
15 | </div> | 15 | </div> |
16 | <div class="index-channel"> | 16 | <div class="index-channel"> |
17 | - <img class="img" src="{{background}}" alt=""> | 17 | + <img class="img" src="{{background}}"> |
18 | <div class="index-channel-list"> | 18 | <div class="index-channel-list"> |
19 | <a href="/boys" class="list-item">男生 <span class="lighter">BOYS</span> <span class="iconfont right-icon"></span></a> | 19 | <a href="/boys" class="list-item">男生 <span class="lighter">BOYS</span> <span class="iconfont right-icon"></span></a> |
20 | <a href="/girls" class="list-item">女生 <span class="lighter">GIRLS</span> <span class="iconfont right-icon"></span></a> | 20 | <a href="/girls" class="list-item">女生 <span class="lighter">GIRLS</span> <span class="iconfont right-icon"></span></a> |
-
Please register or login to post a comment