首页>>表单>>jQuery+CSS3搜索框特效,点击输入框显示(2017-03-02)

jQuery+CSS3搜索框特效,点击输入框显示

jQuery+CSS3搜索框特效,点击输入框显示
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script type="text/javascript">  
  2. function searchToggle(obj, evt){  
  3.     var container = $(obj).closest('.search-wrapper');  
  4.   
  5.     if(!container.hasClass('active')){  
  6.           container.addClass('active');  
  7.           evt.preventDefault();  
  8.     }  
  9.     else if(container.hasClass('active') && $(obj).closest('.input-holder').length == 0){  
  10.           container.removeClass('active');  
  11.           // clear input  
  12.           container.find('.search-input').val('');  
  13.           // clear and hide result container when we press close  
  14.           container.find('.result-container').fadeOut(100, function(){$(this).empty();});  
  15.     }  
  16. }  
  17.   
  18. function submitFn(obj, evt){  
  19.     value = $(obj).find('.search-input').val().trim();  
  20.   
  21.     _html = "您搜索的关键词： ";  
  22.     if(!value.length){  
  23.         _html = "关键词不能为空。";  
  24.     }  
  25.     else{  
  26.         _html += "<b>" + value + "</b>";  
  27.     }  
  28.   
  29.     $(obj).find('.result-container').html('<span>' + _html + '</span>');  
  30.     $(obj).find('.result-container').fadeIn(100);  
  31.   
  32.     evt.preventDefault();  
  33. }  
  34. </script>  
XML/HTML Code
  1. <form onSubmit="submitFn(this, event);">  
  2.     <div class="search-wrapper">  
  3.         <div class="input-holder">  
  4.             <input type="text" class="search-input" placeholder="请输入关键词" />  
  5.             <button class="search-icon" onClick="searchToggle(this, event);"><span></span></button>  
  6.         </div>  
  7.         <span class="close" onClick="searchToggle(this, event);"></span>  
  8.         <div class="result-container">  
  9.   
  10.         </div>  
  11.     </div>  
  12. </form>  

 


原文地址:http://www.freejs.net/article_biaodan_595.html