扩展搜索栏 [英] Expanding Search Bar

问题描述

我正在开发一个视频网页，例如YouTube或Vimeo ...
我现在正在搜索输入中工作...我在谷歌搜索有关向导的信息，我找到了这个： http://tympanus.net/codrops/2013/06/26/ expand-search-bar-deconstructed /

I'm developing a webpage of videos, like YouTube or Vimeo... I'm working now in a search input... I was searching in Google about guides and I found this one: http://tympanus.net/codrops/2013/06/26/expanding-search-bar-deconstructed/

我差不多完成了它，但问题是，发布它的人用Javascript做了，不是使用JQuery（更容易......）

I have almost done it, but the problem is, the guy who posted it, did it with Javascript, not with JQuery (easier...)

我一直在尝试修改代码，当您单击按钮时会出现搜索输入，但它不会消失。 ..
你可以帮我这个部分吗？

I have been trying to modify the code, the search input appears when you click on the button, but it doesn't dissapear... Could you help me in this part?

Javascript：

Javascript:

    ;( function( window ) {

    function UISearch( el, options ) {  
        this.el = el;
        this.inputEl = el.querySelector( 'form > input.sb-search-input' );
        this._initEvents();
    }

    UISearch.prototype = {
        _initEvents : function() {
            var self = this,
                initSearchFn = function( ev ) {
                    if( !classie.has( self.el, 'sb-search-open' ) ) { // open it
                        ev.preventDefault();
                        self.open();
                    }
                    else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) { // close it
                        self.close();
                    }
                }

            this.el.addEventListener( 'click', initSearchFn );
            this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); });
        },
        open : function() {
            classie.add( this.el, 'sb-search-open' );
        },
        close : function() {
            classie.remove( this.el, 'sb-search-open' );
        }
    }

    // add to global namespace
    window.UISearch = UISearch;
} )( window );

我的JQuery代码：

My JQuery code:

    $(document).ready(function () {
    $("#search_container").click(function(){ if(!$("#search_container").hasClass("open")){ $("#search_container").addClass("open"); } });
    $(".search_input").click(function(){
        if($("#search_container").hasClass("open")){
            if($(".search_input").val() == ""){
                $("#search_container").removeClass("open");
            } else {
                // Search
            }
        }
    });
});

我的HTML代码：

    <div id="search_container">
<form>
<input type="search" class="search_input" placeholder="Búsqueda" id="search" value="" />
<input type="submit" class="search_submit" value="" />
<span class="btn icon_search"></span>
</form>
</div>

推荐答案

你可以通过结合一点css来实现它， jQuery的.animate（）函数。

You can achieve it by combining a little css, and the .animate() function of jQuery.

这是JS部分，请参阅现场演示的小提琴

Here is the JS part, see the fiddle for live demo

$(document).ready(function () {
$("#btnsearch").on('click',function(e){
    e.preventDefault();
    e.stopPropagation();
    /* Check if field is already displayed, if not, displays it, else, submit */
    if($('#search_container').hasClass('closed')){
        $('#search_container').toggleClass('closed');
        $('#hint').html('');
        $('#search').animate({
            right: '40px',
        }, 200, function(){

            /* 
             * Bind event to hide field when clicking OUT 
             * use .one() instead of .on() to avoid stacking binding click events on document
             */
            $(document).one('click', function(){
                $('#search_container').toggleClass('closed');
                $('#search').animate({
                    right: '-200px',
                }, 200);

                $('#hint').html('');
            });   
        });
    }
    else {
        /* Add here your field entry check */
        /* Submit your form with $('#myform').submit(); */
        $('#hint').html("Your form has been submitted with $('#myform').submit();");
    }
});

$('#search').on('click',function(e){
    /* Needed to avoid closing field when clicking on it */
    e.preventDefault();
    e.stopPropagation();
});
});

现场演示

这篇关于扩展搜索栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！