刚看到博客园首页上有个这个插件,刚好自己也写了一个,不过没有,可以提供大家参考参考,不说废话,贴出插件代码
插件代码部分:
opts._this.live("blur",function(){
$("."+opts.m_list).hide()
});
opts._this.live("focus",function(){
opts.this2=$(this);var s=0
opts.this2.live("keydown",function(e){
if(e.keyCode=="40"){
if(s<a("."+opts.m_list+" ."+opts.m_item).length){
a("."+opts.m_list+" ."+opts.m_item).eq(s).addClass(opts.active).siblings(" ."+opts.m_item).removeClass(opts.active)
s++
}
}else if(e.keyCode=="38"){
if(s>0){
s=s-1
a("."+opts.m_list+" ."+opts.m_item).eq(s).addClass(opts.active).siblings(" ."+opts.m_item).removeClass(opts.active)
}
}else if(e.keyCode=="13"){
var m_str=a("."+opts.m_list+" ."+opts.active+" ."+opts.m_item_c).text()
a(this).attr("value",m_str)
a("."+opts.m_list).hide()
opts.this2.live("keyup",function(e){move(opts.position)})
}else{pms()}
});
move()
});
在输入框获取焦点和输出焦点时初始化状态,同时绑定有键盘事件,该事件是通过键盘操控指向内容,
var pms=function(){
opts.this2.live("keyup",function(e){
var mm=opts._this.attr("value");
a("."+opts.m_list+" ."+opts.m_item).each(function(index){
a(this).find("."+opts.m_item_c).text(mm+opts.position[index])
});
if(a("."+opts.m_list).css("display")=="none"){a("."+opts.m_list).show()}
if(opts._this.attr("value")==""){$("."+opts.m_list).hide()}
});
}
释放鼠标事件执行方法
var move=function(){
a("."+opts.m_list+" ."+opts.m_item).hover(function(){
$(this).addClass(opts.active)
},function(){
$(this).removeClass(opts.active)
});
a("."+opts.m_list+" ."+opts.m_item).live("mousedown",function(){
var j_str=$(this).find(".email_domain").text()
opts._this.attr("value",j_str)
});
a("."+opts.m_list+" ."+opts.m_item).each(function(index){
$(this).find("."+opts.m_item_c).text(opts.position[index])
});
$("."+opts.m_list).hide()
}
}
鼠标事件执行方法,并同时在事件中释放内容,
这样 一个比较简单的输入框插件就完成了
调用代码:
$(function() {
$('#username').hilight({
m_list:"email_tip_wrap",/**提示显示标题部分,初始化为隐藏**/
m_item:"email_tip",/**提示内容列表**/
active:"current",/**选中标题hover效果**/
m_item_c:"email_domain"/**由于客户最早要气的是email固定不变,所以这边加了这个参数,可以不要**/
});
});
html部分,这个插件做的时候是固定的几个email,所以在做的时候列表被写死,如果涉及到数据库时,只要在ul循环相应的li就可以获取到提示字相应的内容 ,改进空间比较大,使用比较方便灵活,由于是个人开发,只关注这一项功能,不存在其他杂七杂八的代码。
<div style="202px;position:relative;margin:10px">
<input id="username" type="text" class="text_put" autocomplete="off">
<div class="email_tip_wrap" style="display:none">
<ul>
<li class="tip_intro">请选择邮箱类型:</li>
<li class="email_tip">
<span class="user_input"></span>
<span class="email_domain">@duobei.com</span>
</li>
<li class="email_tip">
<span class="user_input"></span>
<span class="email_domain">@qq.com</span>
</li>
<li class="email_tip">
<span class="user_input"></span>
<span class="email_domain">@gmail.com</span>
</li>
<li class="email_tip">
<span class="user_input"></span>
<span class="email_domain">@163.com</span>
</li>
<li class="email_tip">
<span class="user_input"></span>
<span class="email_domain">@126.com</span>
</li>
<li class="email_tip">
<span class="user_input"></span>
<span class="email_domain">@sina.com</span>
</li>
<li class="email_tip">
<span class="user_input"></span>
<span class="email_domain">@sohu.com</span>
</li>
<li class="email_tip">
<span class="user_input"></span>
<span class="email_domain">@hotmail.com</span>
</li>
</ul>
</div>
</div>
头一次贴代码,希望对大家有用