jQuery实现点击文本框弹出热门标签的提示效果_jquery

复制代码 代码如下:

jQuery实现点击文本框弹出热门标签的提示示例_网页代码站 body { font-size:12px;font-family:Arial; } #m_tagsItem { background:#fff; position:absolute; top:0px; left:0px; overflow:hidden; width:590px; *width:561px; width:561px\9; padding:10px; border:1px solid #ccc; z-index:1000; display:none; } #m_tagsItem p { text-align:left; line-height:22px; padding:2px 0; margin:0; border:0; } #m_tagsItem span { font-weight:bold; } #m_tagsItem a { margin:0 5px; } .m_tagsname { color:#999; vertical-align:middle; font-size:12px; text-indent:3px; line-height:20px; } #tagClose { font-size:12px; color:#888; cursor:pointer; position:absolute; top:2px; right:2px; } (function ($) { $.fn.bgIframe = $.fn.bgiframe = function (s) { 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 = ' 'style="display:block;position:absolute;z-index:-1;' + (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); jQuery.fn.selectCity = function (targetId) { var _seft = this; var targetId = $(targetId); this.click(function () { var A_top = $(this).offset().top + $(this).outerHeight(true); // 1 var A_left = $(this).offset().left; targetId.bgiframe(); targetId.show().css({ "position": "absolute", "top": A_top + "px", "left": A_left + "px" }); }); targetId.find("#tagClose").click(function () { targetId.hide(); }); $(document).click(function (event) { if (event.target.id != _seft.selector.substring(1)) { targetId.hide(); } }); targetId.click(function (e) { e.stopPropagation(); // 2 }); return this; } $(function () { $("#selecttags").selectCity("#m_tagsItem"); }); //为文本域连续赋值 function checktag(o) { var tagid = function (id) { return document.getElementById(id); } var tags = []; //存放标签,避免重复加入 var tagidSPLITCHAR = ' '; //设定分隔符,根据程序需求可改 var d = tagid('selecttags'); if (d.value) tags = d.value.split(tagidSPLITCHAR); var v = o.innerHTML; //如果tag有别的值或者别的非innerHTML里体现的内容 var s = tagidSPLITCHAR + tags.join(tagidSPLITCHAR) + tagidSPLITCHAR if (!new RegExp(tagidSPLITCHAR + v + tagidSPLITCHAR, 'g').test(s)) { s += v; } s = s.replace(new RegExp("(^" + tagidSPLITCHAR + "*|" + tagidSPLITCHAR + "*tagid)", "g"), ''); d.value = s; tags = s.split(tagidSPLITCHAR); }

如果没有出现提示框请刷新一下页面再试~ value="点击查看热门标签和您曾经使用过的标签" onclick="if(this.value=='点击查看热门标签和您曾经使用过的标签'){this.value='';this.className='m_tagsname'}"> 关闭 温馨提示： 标签间请用“空格”、“逗号”或“分号”隔开，用简练的词语概括您的博文内容。

热门标签： 彩妆 href="javascript:void(0)" onclick="checktag(this)">美发 onclick="checktag(this)">美优博客 aaa href="javascript:void(0)" onclick="checktag(this)">bbb onclick="checktag(this)">天堂 eee href="javascript:void(0)" onclick="checktag(this)">fff onclick="checktag(this)">ggg

您使用过的标签： 软件 href="javascript:void(0)" onclick="checktag(this)">Delphi onclick="checktag(this)">博客 源码 href="javascript:void(0)" onclick="checktag(this)">彩妆 onclick="checktag(this)">google 新浪

网页代码站 - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！

jQuery实现点击文本框弹出热门标签的提示效果_jquery

Articles Liés