经验分享程序开发文档资料数据资源其它资源

jQuery可伸缩搜索框js代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery可伸缩搜索框js代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery可伸缩搜索框js代码

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>jQuery������������</title>
<link href="css/demo.css" rel="stylesheet" type="text/css" />
<link href="css/searchMeme.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.searchMeme.js" type="text/javascript"></script>
<script type="text/javascript">

        $(document).ready(function () {

            var searchOrange = $('#search-orange').searchMeme({ onSearch: function (searchText) {

                setTimeout(function () {

                    searchOrange.searchMeme({ searchComplete: true });

                    $('#search-results').html("You searched for " + searchOrange.val() + "");

                    $('.panel').animate({ 'height': 200 }, 500);

                }, 3000);

            }

            , buttonPlacement: 'left', button: 'orange'

            });



        var searchGreen = $('#search-green').searchMeme({ onSearch: function (searchText) {

                setTimeout(function () {

                    searchGreen.searchMeme({ searchComplete: true });

                    $('#search-results').html("You searched for " + searchGreen.val() + "");

                    $('.panel').addClass('go-green').animate({ 'height': 200 }, 500);

                }, 3000);

            }

            , buttonPlacement: 'right', button: 'green'

            });



        var searchRed = $('#search-red').searchMeme({ onSearch: function (searchText) {

                setTimeout(function () {

                    searchRed.searchMeme({ searchComplete: true });

                    $('#search-results').html("You searched for " + searchRed.val() + "");

                    $('.panel').animate({ 'height': 200 }, 500, function () {



                        alert('This is demo 3');

                    });



                }, 3000);

            }

            , buttonPlacement: 'left', button: 'red'

            });



            $('.wrapper-green,.wrapper-red').css('display', 'none');



            $('a').click(function () {

                $('.panel').removeClass('go-green');

                $('.wrapper-orange,.wrapper-green,.wrapper-red').css('display', 'none');

                if ($(this).attr('class') == 'search-orange')

                    $('.wrapper-orange').css('display', '');

                else if ($(this).attr('class') == 'search-green')

                    $('.wrapper-green').css('display', '');

                else if ($(this).attr('class') == 'search-red')

                    $('.wrapper-red').css('display', '');



                $('.panel').html('Search results here...').animate({ 'height': 100 }, 500);

                return false;

            });



        });

    </script>
<style type="text/css">

        .demobar

        {

            height: 90px;

            line-height: 90px;

        }

        .demobar .fleft

        {

            float: left;

            margin-left: 10px;

        }

        .demobar .fright

        {

            float: right;

            margin-top: 14px;

            margin-right: 10px;

        }
		
		#demo-side-bar
		{
		position:absolute;
		top:90px;		
		display:none;
		}

    </style>

</head>

<body>

<div class="wrapper">
	<a href="#" class="search-orange" style="margin-left: 100px">Demo 1</a><a href="#" class="search-green">Demo 
	2</a><a href="#" class="search-red">Demo 3</a>
	<div class="demo">
		<input type="text" id="search-orange" />
		<input type="text" id="search-green" />
		<input type="text" id="search-red" />
		<div class="clear">
		</div>
	</div>
</div>
<div class="panel" id="search-results">Search results here... </div>
</body>
</html>

JS代码(jquery.searchMeme.js):

(function ($){
	$.fn.extend({
	searchMeme:function (options){
	var settings = $.extend({
	animationSpeed:500,defaultText:'Search...',button:'orange',buttonPlacement:'left',onSearch:null,searchComplete:false}
,options);
	return this.each(function (){
	var searchBox;
	var searchButton;
	var searchButtonIcon;
	if (settings.searchComplete){
	searchButtonIcon = $('.searchMeme-button-inner');
	onSearchComplete();
	return false;
}
//prepare markup var wrapper = $('<div class="wrapper-' + settings.button + '"><div class="searchMeme-button-' + settings.buttonPlacement + ' ' + settings.button + '-normal searchMeme-round-' + settings.buttonPlacement + '"> ' + '<div class="searchMeme-button-icon searchMeme-button-inner"></div></div> <div class="searchMeme-input-' + settings.buttonPlacement + '"></div></div>');
	$(this).before(wrapper);
	$('.searchMeme-input-' + settings.buttonPlacement + '',wrapper).append($(this));
	searchBox = $('.searchMeme-input-' + settings.buttonPlacement + ' input',wrapper);
	searchButton = $('.searchMeme-button-' + settings.buttonPlacement + '',wrapper);
	searchButtonIcon = $('.searchMeme-button-inner',searchButton);
	var w = 0;
	//width var p = 0;
	//padding var m = 0;
	//margin var waterMark = settings.defaultText;
	w = searchBox.width();
	p = searchBox.css('padding-left');
	m = parseInt(w) + (parseInt(p) * 2);
	if (settings.buttonPlacement == 'left') searchBox.css({
	'width':0,paddingLeft:0,paddingRight:0}
).animate({
	width:0,paddingLeft:0,paddingRight:0}
,settings.animationSpeed);
	else searchBox.css({
	'margin-left':m,paddingLeft:0,paddingRight:0}
).animate({
	marginLeft:m,paddingLeft:0,paddingRight:0}
,settings.animationSpeed);
	searchBox.val(waterMark).addClass('searchMeme-water-mark');
	searchButton.hover(function (){
	$(this).addClass('' + settings.button + '-hover');
	$(this).removeClass('' + settings.button + '-normal');
}
,function (){
	$(this).addClass('' + settings.button + '-normal');
	$(this).removeClass('' + settings.button + '-hover');
}
);
	searchButton.mouseenter(function (){
	if (settings.buttonPlacement == 'left') searchBox.addClass('searchMeme-water-mark').animate({
	width:w,paddingLeft:p,paddingRight:p}
,settings.animationSpeed);
	else searchBox.addClass('searchMeme-water-mark').animate({
	marginLeft:0,paddingLeft:p,paddingRight:p}
,settings.animationSpeed);
}
).click(function (){
	triggerSearch();
	return false;
}
);
	searchBox.keydown(function (e){
	if (e.which == 13){
	triggerSearch();
}
}
).click(function (){
	searchBox.removeClass('searchMeme-water-mark').val('');
	return false;
}
).blur(function (){
	if ($(this).val() == '') $(this).addClass('searchMeme-water-mark');
}
);
	$(document).click(function (e){
	if (settings.buttonPlacement == 'left'){
	searchBox.removeClass('searchMeme-water-mark').animate({
	width:0,paddingLeft:0,paddingRight:0}
,settings.animationSpeed,function (){
	searchBox.val(waterMark).addClass('searchMeme-water-mark');
}
);
}
else{
	searchBox.animate({
	marginLeft:m,paddingLeft:0,paddingRight:0}
,settings.animationSpeed,function (){
	searchBox.val(waterMark).addClass('searchMeme-water-mark');
}
);
}
}
);
	function triggerSearch(){
	if (searchBox.val() != '' && searchBox.val() != waterMark){
	searchButtonIcon.removeClass('searchMeme-button-icon');
	searchButtonIcon.addClass('searchMeme-button-searching');
	if (settings.onSearch != null) settings.onSearch(searchBox.val());
}
}
function onSearchComplete(){
	searchButtonIcon.removeClass('searchMeme-button-searching');
	searchButtonIcon.addClass('searchMeme-button-icon');
}
}
);
}
}
);
}
)(jQuery);

CSS代码(demo.css):

body{background-color:#3C352B;}
.wrapper{margin:0 auto;width:500px;margin-top:100px;}
.clear{clear:both;}
a,a:active,a:visited{display:inline-block;width:90px;height:18px;color:White;font-weight:bold;font-size:12px;text-decoration:none;padding-top:2px;text-align:center;margin:4px;-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomright:4px;-moz-border-radius-bottomleft:4px;-webkit-border-radius:4px 4px 4px 4px;border-radius:4px 4px 4px 4px;font-family:Arial;}
a.search-orange{margin-left:0px;background:#f8c70f;/* Old browsers */
 background:-moz-linear-gradient(top,#f8c70f 0%,#f2a309 100%,#f2a309 100%);/* FF3.6+ */
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f8c70f),color-stop(43%,#f2a309),color-stop(100%,#f2a309));/* Chrome,Safari4+ */
 background:-webkit-linear-gradient(top,#f8c70f 0%,#f2a309 100%,#f2a309 100%);/* Chrome10+,Safari5.1+ */
 background:-o-linear-gradient(top,#f8c70f 0%,#f2a309 100%,#f2a309 100%);/* Opera 11.10+ */
 background:-ms-linear-gradient(top,#f8c70f 0%,#f2a309 100%,#f2a309 100%);/* IE10+ */
 background:linear-gradient(top,#f8c70f 0%,#f2a309 100%,#f2a309 100%);/* W3C */
 filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8c70f',endColorstr='#f2a309',GradientType=0 );/* IE6-9 */
}
a.search-orange:hover{margin-left:0px;background:#f2a309;/* Old browsers */
 background:-moz-linear-gradient(top,#f2a309 0%,#f8c70f 100%,#f8c70f 100%);/* FF3.6+ */
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f2a309),color-stop(43%,#f8c70f),color-stop(100%,#f8c70f));/* Chrome,Safari4+ */
 background:-webkit-linear-gradient(top,#f2a309 0%,#f8c70f 100%,#f8c70f 100%);/* Chrome10+,Safari5.1+ */
 background:-o-linear-gradient(top,#f2a309 0%,#f8c70f 100%,#f8c70f 100%);/* Opera 11.10+ */
 background:-ms-linear-gradient(top,#f2a309 0%,#f8c70f 100%,#f8c70f 100%);/* IE10+ */
 background:linear-gradient(top,#f2a309 0%,#f8c70f 100%,#f8c70f 100%);/* W3C */
 filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2a309',endColorstr='#f8c70f',GradientType=0 );/* IE6-9 */
}
a.search-red{background:#ea0000;/* Old browsers */
 background:-moz-linear-gradient(top,#ea0000 0%,#f20000 100%,#f20000 100%);/* FF3.6+ */
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ea0000),color-stop(43%,#f20000),color-stop(100%,#f20000));/* Chrome,Safari4+ */
 background:-webkit-linear-gradient(top,#ea0000 0%,#f20000 100%,#f20000 100%);/* Chrome10+,Safari5.1+ */
 background:-o-linear-gradient(top,#ea0000 0%,#f20000 100%,#f20000 100%);/* Opera 11.10+ */
 background:-ms-linear-gradient(top,#ea0000 0%,#f20000 100%,#f20000 100%);/* IE10+ */
 background:linear-gradient(top,#ea0000 0%,#f20000 100%,#f20000 100%);/* W3C */
 filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea0000',endColorstr='#f20000',GradientType=0 );/* IE6-9 */
}
a.search-red:hover{background:#f20000;/* Old browsers */
 background:-moz-linear-gradient(top,#f20000 0%,#ea0000 100%,#ea0000 100%);/* FF3.6+ */
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f20000),color-stop(43%,#ea0000),color-stop(100%,#ea0000));/* Chrome,Safari4+ */
 background:-webkit-linear-gradient(top,#f20000 0%,#ea0000 100%,#ea0000 100%);/* Chrome10+,Safari5.1+ */
 background:-o-linear-gradient(top,#f20000 0%,#ea0000 100%,#ea0000 100%);/* Opera 11.10+ */
 background:-ms-linear-gradient(top,#f20000 0%,#ea0000 100%,#ea0000 100%);/* IE10+ */
 background:linear-gradient(top,#f20000 0%,#ea0000 100%,#ea0000 100%);/* W3C */
 filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f20000',endColorstr='#ea0000',GradientType=0 );/* IE6-9 */
}
a.search-green{background:#73d006;/* Old browsers */
 background:-moz-linear-gradient(top,#73d006 0%,#46b204 100%,#46b204 100%);/* FF3.6+ */
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#73d006),color-stop(43%,#46b204),color-stop(100%,#46b204));/* Chrome,Safari4+ */
 background:-webkit-linear-gradient(top,#73d006 0%,#46b204 100%,#46b204 100%);/* Chrome10+,Safari5.1+ */
 background:-o-linear-gradient(top,#73d006 0%,#46b204 100%,#46b204 100%);/* Opera 11.10+ */
 background:-ms-linear-gradient(top,#73d006 0%,#46b204 100%,#46b204 100%);/* IE10+ */
 background:linear-gradient(top,#73d006 0%,#46b204 100%,#46b204 100%);/* W3C */
 filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#73d006',endColorstr='#46b204',GradientType=0 );/* IE6-9 */
}
a.search-green:hover{background:#46b204;/* Old browsers */
 background:-moz-linear-gradient(top,#46b204 0%,#73d006 100%,#73d006 100%);/* FF3.6+ */
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#46b204),color-stop(43%,#73d006),color-stop(100%,#73d006));/* Chrome,Safari4+ */
 background:-webkit-linear-gradient(top,#46b204 0%,#73d006 100%,#73d006 100%);/* Chrome10+,Safari5.1+ */
 background:-o-linear-gradient(top,#46b204 0%,#73d006 100%,#73d006 100%);/* Opera 11.10+ */
 background:-ms-linear-gradient(top,#46b204 0%,#73d006 100%,#73d006 100%);/* IE10+ */
 background:linear-gradient(top,#46b204 0%,#73d006 100%,#73d006 100%);/* W3C */
 filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#46b204',endColorstr='#73d006',GradientType=0 );/* IE6-9 */
}
.demo{padding-top:100px;}
.panel{width:470px;margin:0 auto;background-color:#1C1915;padding:15px;color:#CCCCCC;font:30px Arial,Helvetica,sans-serif;margin-top:30px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;height:100px;}
.panel.go-green{color:#73d006;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
38.03 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
38.03 KB
立即下载
莫慧
了解
打赏作者 鼓励作者
jquery特效2
最新结算
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图像缩放工具插件Zoomer特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图像缩放工具插件Zoomer特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
Labelauty–jQuery单选框_复选框美化插件特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
Labelauty–jQuery单选框_复选框美化插件特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery网页版打砖块小游戏源码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery网页版打砖块小游戏源码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章