菜单

仿中关村在线首页弹出式广告插件,利用jQuery实现可输入搜索文字的下拉框

2019年8月4日 - 前端排行

其的就不多说啦,直接上代码:
jquery 插件:

先看效果
图片 1 
图片 2 
功能:点击下拉框输入框时,自动显示下面的下拉列表,而且是根据输入框中输入的搜索添加,自动在后台查找,然后传到前台,展现页面。
用的的js:

复制代码 代码如下:

复制代码 代码如下:

/*
疯狂秀才 制作 于 2012-04-24 17:00
QQ: 1055818239
email: hxl_apple@163.com
*/
(function($){
$.fn.quickAd = function(settings){
settings = $.extend({
width:760,
height:400,
html:’我是广告内容’,
top:130,
sec:5, //广告显示时长,单位秒
border:true //显示外框
},settings);
var fkxc_ad = 0;
var bodyWidth = $(window).width();
var _adBodyContainerID = “bigAd_”+settings.width;
var _adCloseContainerID = “bitAdClose_”+settings.width;
var closeHtml = ‘广告剩余 <span id=”__sec”></span> 秒
<a href=”javascript:;” id=”__close_ad”>关 闭</a>’;
//广告内容容器
var _adContent = ‘<div
id=”‘+_adBodyContainerID+'”></div>’;
//关闭按钮容器
var _adCloseBtn = ‘<div
id=”‘+_adCloseContainerID+'”>’+closeHtml+'</div>’;
var self = $(this);
$(this).empty().html(_adContent+_adCloseBtn);
$(‘#__close_ad’).click(function(){
window.clearTimeout(fkxc_ad);
self.fadeOut();
})
if(settings.border){
$(‘#’+_adBodyContainerID).css(‘border’,’1px solid #ccc’);
}
$(‘#’+_adBodyContainerID).empty().html(settings.html).css({
‘width’:settings.width+’px’,
‘height’:settings.height+’px’,
‘position’: ‘fixed’,
‘z-index’: 20000,
‘top’:settings.top+’px’,
‘left’:(bodyWidth – settings.width) / 2 + ‘px’
}).fadeIn(‘fast’);
$(‘#’+_adCloseContainerID).css({
‘width’:’160px’,’height’:’18px’,’line-height’:’18px’,’background-color’:’#ccc’,
‘text-align’: ‘center’, ‘opacity’:
‘0.8’,’top’:settings.top+’px’,’position’: ‘fixed’,
‘left’:((bodyWidth – settings.width) / 2+(settings.width-160)) + ‘px’,
‘z-index’: 20001
}).show();
var daojishi = function (s) {
fkxc_ad = setInterval(function () {
if (s == 0) {
self.fadeOut();
}
$(“#__sec”).text(s);
s–;
}, 1000);
}
daojishi(settings.sec)
}
})(jQuery)

var $xialaSELECT;
$(document).ready(function(){
initXialaSelect();
initSearch();
});
var temptimeout=null;
var query=””;
function searchDev(key){
//if(key == “”)return;
query=key;
clearTimeout(temptimeout);
temptimeout= setTimeout(findUnSaved, 500);
}
function findUnSaved()
{
//alert(“dd”);
//if(1==1)return;
$.ajax({
type: “post”,
data:{‘query’:query},
url: path + “/tList.action”,
success: function(data) {
xiala(data);
},
error: function(data) {
alert(“加载失败,请重试!”);
}
});
}
function initSearch()
{
//定义一个下拉按钮层,并配置样式(位置,定位点坐标,大小,背景图片,Z轴),追加到文本框后面
$xialaDIV = $(‘<div></div>’).css(‘position’,
‘absolute’).css(‘left’, $(‘#province’).position().left +
$(‘#province’).width() – 15 + ‘px’).css(‘top’,
$(‘#province’).position().top + 4 + ‘px’).css(‘background’,
‘transparent url(../images/lala.gif) no-repeat top left’).css(‘height’,
’16px’).css(‘width’,
’15px’).css(‘z-index’, ‘100’);
$(‘#province’).after($xialaDIV);
//鼠标进入修改背景图位置
$xialaDIV.mouseover(function(){
$xialaDIV.css(‘background-position’, ‘ 0% -16px’);
});
//鼠标移出修改背景图位置
$xialaDIV.mouseout(function(){
$xialaDIV.css(‘background-position’, ‘ 0% -0px’);
});
//鼠标按下修改背景图位置
$xialaDIV.mousedown(function(){
$xialaDIV.css(‘background-position’, ‘ 0% -32px’);
});
//鼠标释放修改背景图位置
$xialaDIV.mouseup(function(){
$xialaDIV.css(‘background-position’, ‘ 0% -16px’);
if($xialaSELECT)
$xialaSELECT.show();
});
$(‘#province’).mouseup(function(){
$xialaDIV.css(‘background-position’, ‘ 0% -16px’);
$xialaSELECT.show();
});
}
var firstTimeYes=1;
//文本框的下拉框div
function xiala(data){
//first time
if($xialaSELECT)
{
$xialaSELECT.empty();
}
//定义一个下拉框层,并配置样式(位置,定位点坐标,宽度,Z轴),先将其隐藏
//定义五个选项层,并配置样式(宽度,Z轴一定要比下拉框层高),添加name、value属性,加入下拉框层
$xialaSELECT.append(data);
if(firstTimeYes == 1)
{
firstTimeYes =firstTimeYes+1;
}else{
$xialaSELECT.show();
}
}
function initXialaSelect()
{
$xialaSELECT = $(‘<div></div>’).css(‘position’,
‘absolute’).css(‘overflow-y’,’scroll’).css(‘overflow-x’,’hidden’).css(‘border’,
‘1px solid #809DB9’).css(‘border-top’,’none’).css(‘left’,
‘125px’).css
(‘top’, $(‘#province’).position().top + $(‘#province’).height() + 6 +
‘px’).css(‘width’, $(‘#province’).width() + ‘px’).css(‘z-index’,
‘101’).css(‘width’,’152px’).css(‘background’,’#fff’).css(‘height’,’200px’).css(‘max-height’,’600px’);
$(‘#province’).after($xialaSELECT);
//选项层的鼠标移入移出样式
$xialaSELECT.mouseover(function(event){
if ($(event.target).attr(‘name’) == ‘option’) {
//移入时背景色变深,字色变白
$(event.target).css(‘background-color’, ‘#000077’).css(‘color’,
‘white’);
$(event.target).mouseout(function(){
//移出是背景色变白,字色变黑
$(event.target).css(‘background-color’, ‘#FFFFFF’).css(‘color’,
‘#000000’);
});
}
});
//通过点击位置,判断弹出的显示
$xialaSELECT.mouseup(function(event){
//如果是下拉按钮层或下拉框层,则依然显示下拉框层
if (event.target == $xialaSELECT.get(0) || event.target ==
$xialaDIV.get(0)) {
$xialaSELECT.show();
}
else {
//如果是选项层,则改变文本框的值
if ($(event.target).attr(‘name’) == ‘option’) {
//弹出value观察
$(‘#nce’).val($(event.target).html());
$(‘#d’).val($(event.target).attr(“d”));
//if seleced host then hidden the dev type
if($(event.target).attr(“ass”) == 3305)
{
$(“#ype”).hide();
$(“#ost”).val(1);
}else{
$(“#ype”).show();
$(“#ost”).val(-1);
}
}
//如果是其他位置,则将下拉框层
if ($xialaSELECT.css(‘display’) == ‘block’) {
$xialaSELECT.hide();
}
}
});
$xialaSELECT.hide();
}
var k = 1;
document.onclick = clicks;
function clicks()
{
if(k ==2){
k = 1;
if($xialaSELECT)
{
if ($xialaSELECT.css(‘display’) == ‘block’) {
$xialaSELECT.hide();
}
}
}else{
k = 2;
}
}

HTML:

复制代码 代码如下:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图