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="点击查看热门标签和您曾经使用过的标签" οnclick="if(this.value=='点击查看热门标签和您曾经使用过的标签'){this.value='';this.className='m_tagsname'}">

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