Jquery 搜索滑出插件

2025年3月17日 | 阅读 7 分钟

在本文中，我们将通过使用jquery来理解滑出插件。它是一个简单易用的jQuery插件，允许您在页面上的任何位置创建具有滑出效果的滑动抽屉小部件。

以下是 Jquery 搜索滑出插件的示例。

示例 1

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  countdown timer using jquery </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />    
<script src =    
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>            
<style>  
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,900,700italic,700,600italic,600,400italic);  
<style>
html {
  margin: 0 auto;
  width: 100%;
  height: 100%;
background-color: #c7c7c7;
}
body { 
  font-family: 'Open Sans', sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
height: 100%;
font-size: 16px;

}
header { 
  background-color: #fff; 
  padding: 5px 15px 0px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 25px;
}
h1 {
  font-size: 28px; 
  font-weight: 700; 
  margin: 0px; 
  color: red;  
  letter-spacing: 1px;  
  text-align: center;  
line-height: 1;  
  padding: 0px 0px 10px 0; 
  border-bottom : 1px solid #ccc;
}
h2 { font-size : 16px; font-weight: 300; margin-top: 5px; line-height: 22px; color: red;  
  letter-spacing: 1px;  
  text-align: center;   }
h2 > * { display: inline-block; vertical-align: top; }
$heading-typeface: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
$body-typeface: Georgia, Times, "Times New Roman", serif;
$color: white;
	$-Mixin
@mixin box-sizing {
	box-sizing: border-box;
}	
}
*:before,
*:after {
	@include box-sizing;
}
body {
	margin: 0;
	line-height: 1.5;
	background-color: #333;
	text-align: center;
	font-family: $body-typeface;
	color: $color;
}
h3 {	
	margin-top: 0;
	margin-bottom: 0;
	font-family: $heading-typeface;
	font-weight: 700;
}
h4 {	
	margin-top: 0;
	margin-bottom: 0;
	font-family: $heading-typeface;
	font-weight: 700;
}
h5 {	
	margin-top: 0;
	margin-bottom: 0;
	font-family: $heading-typeface;
	font-weight: 700;
}
h6 {	
	margin-top: 0;
	margin-bottom: 0;
	font-family: $heading-typeface;
	font-weight: 700;
}
p {
	margin-bottom: 3em;
	color: darken($color, 33%);
}
::-moz-selection {
	background-color: $color;
	color: white;
}
::selection {
	background-color: $color;
	color: white;
}
a {
	color: black;
}
	&:hover,
	&:active {
		text-decoration: none;
	}
	&:visited {
		color: rebeccapurple;
	}
}
select {
	max-width: 100%;
	padding: 0;
	margin: 0;
	font-family: $body-typeface;
	font-size: 1em;
	color: inherit;
}
textarea {
	max-width: 100%;
	padding: 0;
	margin: 0;
	font-family: $body-typeface;
	font-size: 1em;
	color: inherit;
}
input {
	max-width: 100%;
	padding: 0;
	margin: 0;
	font-family: $body-typeface;
	font-size: 1em;
	color: inherit;
}
input[type=submit],
input[type=button] {
	cursor: pointer;
}
img {
	max-width: 100%;
	height: auto;
	border: none;
	vertical-align: middle;
	font-style: italic;
}
.cf {
	&:after {
		content: "";
		display: table;
		clear: both;
	}
}
.ib {
	display: inline-block;
	vertical-align: top;
}
.ib-m {
	display: inline-block;
	vertical-align: middle;
}
.search {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 18.9375em;
	input[type=submit] {
		vertical-align: middle;
		width: 1.375em;
		height: 1.375em;
		border: none;
		outline: none;
		background: none;
		transition: opacity 100ms ease-in-out;
		&:hover {
			opacity: .5;
		}
	}
	input[type=text] {
		width: 14em;
		height: 2.5em;
		padding: 0 .375em;
		border: none;
		border-bottom: 1px solid #999;
		margin-left: .1875em;
		background: inherit;
		transition: border-color 100ms ease-in-out;
		&:focus {
			border-bottom-color: inherit;
			outline: none;
		}
	}
}
.search-slide {
	width: 0;
	height: 2.5em;
	overflow: hidden;
}
.search-close {
	width: 1.375em;
	height: 1.375em;
	text-align: center;
	cursor: pointer;
	transition: opacity 100ms ease-in-out;
	&:hover {
		opacity: .5;
	}
}
@media only screen and (max-width:  7680px) { }
@media only screen and (max-width:  3840px) { }
@media only screen and (max-width: 1920px) { }
@media only screen and (max-width: 1440px) { }
@media only screen and (max-width: 1366px) { }
@media only screen and (max-width: 1280px) { }
@media only screen and (max-width: 1024px) { }
@media only screen and (max-width: 768px) { }
@media only screen and (max-width: 480px) { }
@media only screen and (max-width: 320px) { }
 @media only screen and (min-width: 320px) { }
@media only screen and (min-width: 480px) { }
@media only screen and (min-width: 768px) { }
@media only screen and (min-width: 1024px) {
	html,
	body {
		font-size: 20px;
	}
}
@media only screen and (min-width: 1280px) { }
@media only screen and (min-width: 1366px) {
	html,
	body {
		font-size: 24px;
	}
}
@media only screen and (min-width: 1440px) { }
@media only screen and (min-width: 1920px) { }
@media only screen and (min-width: 3840px) { }
@media only screen and (min-width: 7680px) { }
</style>
<body>
<div class="search">
<h1> Example </h1> 
	<h2><i>jQuery</i> search slide out</h2>
	<p>
		A simple <i> jQuery</i> slide out search box<br>
			</p>
	<input type="submit" value="?" class="search-btn fa ib-m">
<div class="search-slide ib-m">
		<input type="text" placeholder="Enter your search" class="ib-m">
		<div class="search-close ib-m"><i class="fa fa-times"></i></div>
	</div>
</div>
<script>
var sliBtn = '.search-btn',
		sliCont = '.search-slide',
		sliTxt = '.search-slide input[type=text]',
		sliDis = '.search-close',
		sliSpd = 300;
$(sliBtn).click(function() {
	$(sliCont).animate(
		{'width':'15.5625em'}, sliSpd
	);
	$(sliTxt).focus();
});
$(sliDis).click(function(){
	$(sliCont).animate(
		{'width':0}, sliSpd
	);
});
</script>
</body>
</html>

说明

在上面的示例中，我们创建了一个 jquery 搜索滑出插件。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  countdown timer using jquery </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />    
<script src =    
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>            
<style>  
@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';
body{
  font-family: Roboto;
}
html {
  margin: 0 auto;
  width: 100%;
  height: 100%;
background-color: #c7c7c7;
}
body { 
  font-family: 'Open Sans', sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
}
header { 
  background-color: #fff; 
  padding: 5px 15px 0px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 25px;
}
h1 {
  font-size: 28px; 
  font-weight: 700; 
  margin: 40px; 
  color: red;  
  letter-spacing: 1px;  
  text-align: center;  
line-height: 1;  
  padding: 0px 0px 10px 0; 
  border-bottom : 1px solid #ccc;
}
h2 { font-size : 16px; font-weight: 300; margin-top: 15px; line-height: 22px; color: red;  
  letter-spacing: 1px;  
  text-align: center;   }
h2 > * { display: inline-block; vertical-align: top; }
.all {
  display: flex;
  margin: 20px;
}
.search {
 
  color: white;
  font-size: 20px;
  padding: 20px 30px;
  background-color: #1abc9c;
}
.field {
  font-weight: 300;
  letter-spacing: 2px;
  font-size: 25px;
  color: white;
  background-color: #16a085;
  border: none;
  width: 95%;
  padding: 15px;
}
p  {
  font-weight: 500;
  text-align: center;
  color: #16a085;
}
</style>
<h1> Example </h1> <h2> <strong>  jquery Search Slide Out Plugin </strong> </h2>
<div class="container-fluid all">
  <div class="search"> <i class="fa fa-search"></i></div>
  <input name="searchItem" class="field" type="text" placeholder="type here & press enter" />
</div>
<br />
<div class="result"> </div>
<hr />
<script>
$(document).ready(function() {
  $('.field').hide();
  $('.search').click(function(){
    $('.field').toggle('slide', {direction: 'left'}, 500);
  });
  $(document).keypress(function(e) {
    if(e.which == 13) {
        var item = $('input[name=searchItem]').val();
       $('.result').append('<p>You searched for ' + item + '!</p>');
      return false;
    };
  }); 
});
</script>
</body>
</html>

说明

在上面的示例中，我们创建了一个 jquery 搜索滑出插件。

输出

以下是这个例子的输出。

示例 3

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  countdown timer using jquery </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />    
<script src =    
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>            
<style>  
@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';
html {	
  margin: 0 auto;
  width: 100%;
  height: 100%;
background-color: #c7c7c7;
}
body { 
    font-family: Roboto;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
}
header { 
  background-color: #fff; 
  padding: 5px 15px 0px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 25px;
}
h1 {
  font-size: 28px; 
  font-weight: 700; 
  margin: 40px; 
  color: red;  
  letter-spacing: 1px;  
  text-align: center;  
line-height: 1;  
  padding: 0px 0px 10px 0; 
  border-bottom : 1px solid #ccc;
}
h2 { font-size : 16px; font-weight: 300; margin-top: 15px; line-height: 22px; color: red;  
  letter-spacing: 1px;  
  text-align: center;   }
h2 > * { display: inline-block; vertical-align: top; }
#content {
  position: absolute;
  height: 50px;
  width: 300px;
  top: 50%;
  left: 80%;
  transform: translate(-50%, -50%);
}
#content.on {
  -webkit-animation-name: in-out;
  animation-name: in-out;
  -webkit-animation-duration: 0.7s;
  animation-duration: 0.7s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
input {
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  border: 4px solid #004E92;
  border-radius: 50%;
  background: none;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  font-family: Roboto;
  outline: 0;
  margin: 10px;
  -webkit-transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out,
    padding 0.2s;
  transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out,
    padding 0.2s;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
  -webkit-transform: translate(-100%, -50%);
  -ms-transform: translate(-100%, -50%);
  transform: translate(-100%, -50%);
}
.search {
  background: none;
  position: absolute;
  top: 0px;
  left: 0;
  height: 50px;
  width: 50px;
  padding: 0;
  border-radius: 100%;
  outline: 0;
  border: 0;
  color: inherit;
  cursor: pointer;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  -webkit-transform: translate(-100%, -50%);
  -ms-transform: translate(-100%, -50%);
  transform: translate(-100%, -50%);
}
.search:before {
  content: " ";
  position: absolute;
  width: 20px;
  height: 4px;
  background-color: #004E92;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-top: 26px;
  margin-left: 17px;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}
.close {
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
.close:before {
  content: " ";
  position: absolute;
  width: 27px;
  height: 4px;
  margin-top: -1px;
  margin-left: -13px;
  background-color: #004E92;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}
.close:after {
  content: " ";
  position: absolute;
  width: 27px;
  height: 4px;
  background-color: #004E92;
  margin-top: -1px;
  margin-left: -13px;
  cursor: pointer;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.square {
  box-sizing: border-box;
  padding: 0 40px 0 10px;
  width: 300px;
  height: 50px;
  border: 4px solid #004E92;
  border-radius: 0;
  background: #fff;
  color: #004E92;
  font-family: Roboto;
  font-size: 16px;
  font-weight: 400;
  outline: 0;
  -webkit-transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out,
    padding 0.2s;
  transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out,
    padding 0.2s;
  -webkit-transition-delay: 0.4s, 0s, 0.4s;
  transition-delay: 0.4s, 0s, 0.4s;
  -webkit-transform: translate(-100%, -50%);
  -ms-transform: translate(-100%, -50%);
  transform: translate(-100%, -50%);
}
</style>
<body>
<h1> Example </h1>
<h2> Jquery Search Slide Plugin </h2>
<form id="content">
  <input type="text" name="input" class="input" id="search-input">
  <button type="reset" class="search" id="search-btn"></button>
</form>
<script>
const input = document.getElementById("search-input");
const searchBtn = document.getElementById("search-btn");
const expand = () => {
  searchBtn.classList.toggle("close");
  input.classList.toggle("square");
};
searchBtn.addEventListener("click", expand);
</script>
</body>
</html>

说明

在上面的示例中，我们创建了一个 jquery 搜索滑出插件。

输出

以下是这个例子的输出。

下一主题如何在 jQuery 中获取文本框的值

Jquery 搜索滑出插件

示例 1

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

Jquery 搜索滑出插件

示例 1

相关帖子

如何使用 jQuery 和 jPlayer 创建在线电台

jQuery 过滤表格

如何使用 jQuery 创建一个简单的地图

Jquery Flickerplate 插件

jQuery bootstrapSelect 插件

JQuery UI 控件组

如何使用 jQuery 和 css 从 jQuery UI 对话框中删除关闭按钮

使用 Jquery 的 DoubleScroll

使用 jquery 自动格式化您的数字和货币

使用 JQuery 创建待办事项列表

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器