channel.js 1.26 KB
/**
 * 频道选择页面顶部搜索
 * @author: bikai<kai.bi@yoho.cn>
 * @date: 2015/10/28
 */
var $ = require('jquery');

var $searchBox = $('.search-box'),
    $indexSearch = $('.index-search'),
    $indexLogo = $('.index-logo');

$searchBox.find('input').on('focus', function () {
    $indexLogo.css({
        width: 0,
        display: 'none'
    });
    $searchBox.css({
        width: '12.8rem'
    });
    $indexSearch.css({
        width: '15.5rem'
    });
    $('.clear-text, .no-search').show();
}).on('blur', function () {
    $indexLogo.css({
        width: '5.4rem',
        display: 'block'
    });
    $searchBox.css({
        width: '8.8rem'
    });
    $indexSearch.css({
        width: '9.6rem'
    });
    $('.clear-text, .no-search').hide();
});

$searchBox.find('.clear-text').click(function () {
    $searchBox.find('input').val('').trigger('focus');
});

// clearTextHammer = new Hammer($searchBox.find('.clear-text')[0]);
// clearTextHammer.on('tap', function(e) {
//     $searchBox.find('input').val('').trigger('focus');
// });

$searchBox.find('.search-icon').click(function () {
    $indexSearch.submit();
});

// searchIconHammer = new Hammer($searchBox.find('.search-icon')[0]);
// searchIconHammer.on('tap', function(e) {
//     $indexSearch.submit();
// });