复制代码 代码如下: jQuery实现点击文本框弹出热门标签的提示示例_网页代码站 <br>body { <br>font-size:12px;font-family:Arial; <br>} <br>#m_tagsItem { <br>background:#fff; <br>position:absolute; <br>top:0px; <br>left:0px; <br>overflow:hidden; <br>width:590px; <br>*width:561px; <br>width:561px\9; <br>padding:10px; <br>border:1px solid #ccc; <br>z-index:1000; <br>display:none; <br>} <br>#m_tagsItem p { <br>text-align:left; <br>line-height:22px; <br>padding:2px 0; <br>margin:0; <br>border:0; <br>} <br>#m_tagsItem span { <br>font-weight:bold; <br>} <br>#m_tagsItem a { <br>margin:0 5px; <br>} <br>.m_tagsname { <br>color:#999; <br>vertical-align:middle; <br>font-size:12px; <br>text-indent:3px; <br>line-height:20px; <br>} <br>#tagClose { <br>font-size:12px; <br>color:#888; <br>cursor:pointer; <br>position:absolute; <br>top:2px; <br>right:2px; <br>} <br> <br>(function ($) { <br>$.fn.bgIframe = $.fn.bgiframe = function (s) { <br>if ($.browser.msie && /6.0/.test(navigator.userAgent)) { <br>s = $.extend({ <br>top: 'auto', // auto == .currentStyle.borderTopWidth <br>left: 'auto', // auto == .currentStyle.borderLeftWidth <br>width: 'auto', // auto == offsetWidth <br>height: 'auto', // auto == offsetHeight <br>opacity: true, <br>src: 'javascript:false;' <br>}, s || {}); <br>var prop = function (n) { return n && n.constructor == Number ? n + 'px' : n; }, <br>html = '<iframe class="bgiframe"frameborder="0"tabindex="-1"src="' + s.src + '"' + <BR>'style="display:block;position:absolute;z-index:-1;' + <BR>(s.opacity !== false ? 'filter:Alpha(Opacity=\'0\');' : '') + <BR>'top:' + (s.top == 'auto' ? 'expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+\'px\')' : prop(s.top)) + ';' + <BR>'left:' + (s.left == 'auto' ? 'expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+\'px\')' : prop(s.left)) + ';' + <BR>'width:' + (s.width == 'auto' ? 'expression(this.parentNode.offsetWidth+\'px\')' : prop(s.width)) + ';' + <BR>'height:' + (s.height == 'auto' ? 'expression(this.parentNode.offsetHeight+\'px\')' : prop(s.height)) + ';' + <BR>'"/>'; <br>return this.each(function () { <br>if ($('> iframe.bgiframe', this).length == 0) <br>this.insertBefore(document.createElement(html), this.firstChild); <br>}); <br>} <br>return this; <br>}; <br>})(jQuery); <br>jQuery.fn.selectCity = function (targetId) { <br>var _seft = this; <br>var targetId = $(targetId); <br>this.click(function () { <br>var A_top = $(this).offset().top + $(this).outerHeight(true); // 1 <br>var A_left = $(this).offset().left; <br>targetId.bgiframe(); <br>targetId.show().css({ "position": "absolute", "top": A_top + "px", "left": A_left + "px" }); <br>}); <br>targetId.find("#tagClose").click(function () { <br>targetId.hide(); <br>}); <br>$(document).click(function (event) { <br>if (event.target.id != _seft.selector.substring(1)) { <br>targetId.hide(); <br>} <br>}); <br>targetId.click(function (e) { <br>e.stopPropagation(); // 2 <br>}); <br>return this; <br>} <br>$(function () { <br>$("#selecttags").selectCity("#m_tagsItem"); <br>}); <br>//为文本域连续赋值 <br>function checktag(o) { <br>var tagid = function (id) { return document.getElementById(id); } <br>var tags = []; //存放标签,避免重复加入 <br>var tagidSPLITCHAR = ' '; //设定分隔符,根据程序需求可改 <br>var d = tagid('selecttags'); <br>if (d.value) <br>tags = d.value.split(tagidSPLITCHAR); <br>var v = o.innerHTML; //如果tag有别的值或者别的非innerHTML里体现的内容 <br>var s = tagidSPLITCHAR + tags.join(tagidSPLITCHAR) + tagidSPLITCHAR <br>if (!new RegExp(tagidSPLITCHAR + v + tagidSPLITCHAR, 'g').test(s)) { <br>s += v; <br>} <br>s = s.replace(new RegExp("(^" + tagidSPLITCHAR + "*|" + tagidSPLITCHAR + "*tagid)", "g"), ''); <br>d.value = s; <br>tags = s.split(tagidSPLITCHAR); <br>} <br> 如果没有出现提示框请刷新一下页面再试~ value="点击查看热门标签和您曾经使用过的标签" onclick="if(this.value=='点击查看热门标签和您曾经使用过的标签'){this.value='';this.className='m_tagsname'}"> 关闭 温馨提示：标签间请用“空格”、“逗号”或“分号”隔开，用简练的词语概括您的博文内容。 热门标签：彩妆href="javascript:void(0)" onclick="checktag(this)">美发onclick="checktag(this)">美优博客aaahref="javascript:void(0)" onclick="checktag(this)">bbbonclick="checktag(this)">天堂eeehref="javascript:void(0)" onclick="checktag(this)">fffonclick="checktag(this)">ggg 您使用过的标签：软件href="javascript:void(0)" onclick="checktag(this)">Delphionclick="checktag(this)">博客源码href="javascript:void(0)" onclick="checktag(this)">彩妆onclick="checktag(this)">google新浪 网页代码站 - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！
