• Tags , ,         
  • 2018-06-26  09:30:48        
  • 166 °C    

    我们知道,百度现在全面要支持https,不过百度的站内搜索暂时不支持https,所以加了https的站长们要实现百度的站内搜索,可以用另外一种方法实现,而这里也给大家一个好看的搜索框,如break易站上面header的搜索框一样。大家把form代码写在相应的位置即可实现。

    CSS3搜索框代码,并实现百度站内搜索

    CSS3搜索框代码FORM的html代码

    <form onsubmit="submitFn(this, event);"> 
      <div class="search-wrapper">   
       <div class="input-holder">
    	<input type="text" class="search-input" placeholder="请输入关键字" />
    	<button class="search-icon" onclick="return searchToggle(this, event);"><span></span></button>
       </div>
       <span class="close" onclick="return searchToggle(this, event);"></span>		      
       <div class="result-container"></div>
      </div>
    </form>
    

    CSS3搜索框代码代码并加入了百度站内搜索

    记得把下面的yourID换成自己百度站内搜索的ID。

    <!---搜索框JS--->
    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    function searchToggle(obj, evt){
    var container = $(obj).closest('.search-wrapper');
    if(!container.hasClass('active')){
    container.addClass('active');
    evt.preventDefault();
    }
    else if(container.hasClass('active') && $(obj).closest('.input-holder').length == 0){
    container.removeClass('active');
    // clear input
    container.find('.search-input').val('');
    // clear and hide result container when we press close
    container.find('.result-container').fadeOut(100, function(){$(this).empty();});
    }
    
    }
    function submitFn(obj, evt){
    var value = $(obj).find('.search-input').val().trim();
    //_html = "Yup yup! Your search text sounds like this: ";
    if(!value.length){
    _html = "Yup yup! 不能为空,我的朋友 :D";
    $(obj).find('.result-container').html('<span>' + _html + '</span>');
    $(obj).find('.result-container').fadeIn(100);
    evt.preventDefault();
    }
    else{ 
    window.open('http://zhannei.baidu.com/cse/search?s=yourID&entry=1&q='+value+'&nsid=1'); 
    }
    }
    </script>
    
     
    转载请保留页面地址:https://www.breakyizhan.com/wpress/4671.html