网站地图
【www.gdgbn.com--jquery】
选择标签至文本域效果,可多选/可过滤重复/可限制个数@mr.think
php教程爱好者,bluebirdsky" />
关闭
温馨提示：选择下面的热门标签及使用过的标签,标签将自动排列至表单域。
热门标签：时光漫步javascriptjquery plugin那一年jquery插件简单星空梦田晴朗mrthink.net
您使用过的标签：许巍sophie zelmani王菲小娟&山谷里的居民ke$hashakira朴树罗大佑
<script src="</script">http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
/*******************************
* @author mr.think
* @author blog http://mrthink.net/
* @2010.11.10
* @可自由转载及使用,但请注明版权归属
*******************************/
//调用bgiframe,解决ie6下遮住下拉列表的问题
//bgiframe函数 copyright (c) 2006 brandon aaron (http://brandonaaron.net)
;(function($){
$.fn.bgiframe = $.fn.bgiframe = function(s) {
// this is only for ie6
if ( $.browser.msie && /6.0/.test(navigator.useragent) ) {
s = $.extend({
top : "auto", // auto == .currentstyle.bordertopwidth
left : "auto", // auto == .currentstyle.borderleftwidth
width : "auto", // auto == offsetwidth
height : "auto", // auto == offsetheight
opacity : true,
src : "javascript：false;"
}, s || {});
var prop = function(n){return n&&n.constructor==number?n+"px":n;},
html = "<iframe class="bgiframe"frameborder="0"tabindex="-1"src=""+s.src+"""+
(s.opacity !== false?"filter:alpha(opacity="0");":"")+
"top:"+(s.top=="auto"?"expression(((parseint(this.parentnode.currentstyle.bordertopwidth)||0)*-1)+"px")":prop(s.top))+";"+
"left:"+(s.left=="auto"?"expression(((parseint(this.parentnode.currentstyle.borderleftwidth)||0)*-1)+"px")":prop(s.left))+";"+
"width:"+(s.width=="auto"?"expression(this.parentnode.offsetwidth+"px")":prop(s.width))+";"+
"height:"+(s.height=="auto"?"expression(this.parentnode.offsetheight+"px")":prop(s.height))+";"+
""/>";
return this.each(function() {
if ( $("> iframe.bgiframe", this).length == 0 )
this.insertbefore( document.createelement(html), this.firstchild );
});
}
return this;
};
})(jquery);
//选择标签至文本域插件
;(function(){
$.fn.extend({
iselecttags:function(options){
var iset={
name:".tagsbox",//表单或class或id名
drop:$("#dropbox"),//弹出框定位
ps教程eudoclass:$("#dropbox>p>a"),//可选择的标签定位
close:$("em.close"),//关闭按钮定位
separator:",",//标签间分隔符,建议使用英文逗号
maxcount:10 //默认限制个数,也可以设置表单的data-count值覆盖默认值
}
options = options || {};
$.extend(iset, options);
var _input=$(iset.name);
var _inputval=_input.val();
var _arr=new array(); //存放标签的数组
var _left=_input.offset().left; //左绝对距离
var _top=_input.offset().top+_input.outerheight(); //上绝对距离,此处要加上表单的高度
var _dropw=_input.outerwidth()-parseint(_input.css("border-left-width"))-parseint(_input.css("border-right-width"))-parseint(iset.drop.css("paddingleft"))-parseint(iset.drop.css("paddingright"));
iset.drop.css({"position":"absolute","left":_left+"px","top":_top+"px","width":_dropw+"px"});
//弹出框的宽度,此处计算的是与表单实际宽度相等的.也可以直接在样式中定义.
var _txt=null;
var _maxcount=parseint(_input.attr("data-count"));//限制选择个数
if(isnan(_maxcount)){
_maxcount=iset.maxcount
}
_input.click(function(){
iset.drop.show();
iset.drop.bgiframe();//调用bgiframe插件,解决ie6下select的z-index无限大问题
}).bind("keyup change",function(){
//可以在此处扩展手动输入标签情况下的相关判断
//if语句可避免清空重新选择时第一个字符为逗号
if ($(this).val() == "") {
_arr = new array();
}else {
_arr = $(this).val().split(iset.separator);//当用户手动删除或修改标签值后更新标签值
}
});
$(document).click(function(e){
//点击非弹出框区域时关闭弹出框
//下面的 if语句是用来判断传入的是class还是id
if(iset.name.charat(0)=="#"){
if(e.target.id!=iset.name.substring(1)){
iset.drop.hide();
}
}else if(iset.name.charat(0)=="."){
if(e.target.classname!=iset.name.substring(1)){
iset.drop.hide();
}
}
});
iset.drop.click(function(e){
//阻止弹出框区域默认事件
e.stoppropagation();
});
iset.pseudoclass.click(function(){
//标签选择
_txt=$(this).text();
//下面的$.inarray是用来判断是否重复
//若想反馈重复提示或走出限制个数提示,可改进下面的if语句
if(($.inarray(_txt,_arr)==-1) && (_arr.length<_maxcount )){
_arr.push(_txt);
_inputval=_arr.join(iset.separator);
// if(_inputval.charat(0)==","){
// _inputval.replace(/,/,"")
// }
_input.val(_inputval);
}
});
//关闭按钮
iset.close.click(function(){
iset.drop.hide();
});
}
});
})(jquery);
//插件调用
$(function(){
$("#demo").iselecttags();
/*
* 还可以传入参数调用
$("#test").iselecttags({
name:"#test",
drop:$(".drop"),
...
});
*/
});
</script>