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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>jQuery实现点击文本框弹出热门标签的提示示例_网页代码站</title>

<style type="text/css">

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;

}

</style>

<script src="http://www.webdm.cn/themes/script/jquery.js"></script>

<script language="javascript">

(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 = '<iframe class="bgiframe"frameborder="0"tabindex="-1"src="' + s.src + '"' +

'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);

}

</script>

</head>

<body>

如果没有出现提示框请刷新一下页面再试~

<input type="text" id="selecttags" name="m_tagsname" class="m_tagsname" style="width: 577px"

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

<div id="m_tagsItem" style="display: none">

<div id="tagClose">

关闭</div>

<p>

<span>温馨提示：</span>标签间请用“空格”、“逗号”或“分号”隔开，用简练的词语概括您的博文内容。</p>

<p>

<span>热门标签：</span><a href="javascript:void(0)" οnclick="checktag(this)">彩妆</a><a

href="javascript:void(0)" οnclick="checktag(this)">美发</a><a href="javascript:void(0)"

οnclick="checktag(this)">美优博客</a><a href="javascript:void(0)" οnclick="checktag(this)">aaa</a><a

href="javascript:void(0)" οnclick="checktag(this)">bbb</a><a href="javascript:void(0)"

οnclick="checktag(this)">天堂</a><a href="javascript:void(0)" οnclick="checktag(this)">eee</a><a

href="javascript:void(0)" οnclick="checktag(this)">fff</a><a href="javascript:void(0)"

οnclick="checktag(this)">ggg</a></p>

<p>

<span>您使用过的标签：</span><a href="javascript:void(0)" οnclick="checktag(this)">软件</a><a

href="javascript:void(0)" οnclick="checktag(this)">Delphi</a><a href="javascript:void(0)"

οnclick="checktag(this)">博客</a><a href="javascript:void(0)" οnclick="checktag(this)">源码</a><a

href="javascript:void(0)" οnclick="checktag(this)">彩妆</a><a href="javascript:void(0)"

οnclick="checktag(this)">google</a><a href="javascript:void(0)" οnclick="checktag(this)">新浪</a></p>

</div>

<br />

<p>

<a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>

</body>

</html>

转自：http://blog.163.com/dreamman_yx/blog/static/26526894201292410338810/

jQuery实现点击文本框弹出热门标签的提示示例相关推荐

点击输入框弹出文字html,jQuery实现点击文本框弹出热门标签的提示效果
jQuery实现点击文本框弹出热门标签的提示示例_网页代码站 body { font-size:12px;font-family:Arial; } #m_tagsItem { background:# ...
点击文本框弹出热门标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
php 点击文本框弹出时间,点击Input框弹出日期选项
点击text文本框弹出日期选择器 body{margin:0;padding:0;font:14px Verdana, Arial, sans-serif;line-height:200%;} #co ...
html 弹出复选框,js点击文本框弹出可选择的checkbox复选框
本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解 ...
html5搜索框在最右侧,html5搜索框特效点击搜索框弹出分类搜索框代码
特效描述:html5搜索框特效点击搜索框弹出分类搜索框.点击搜索框弹出分类搜索框代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Search People Sara Soue ...
点击文本框搜索,出现在下拉列表中
输入用户名发送请求到后台,将用户的custId返回回来,保存到form中,再提交.根据custId去搜寻 $("#custNameButton").click(function ( ...
html中如何写一个提示框,html弹出公告 html中点击列表文字弹出提示框？
怎么在网页制作中给主页设置弹出公告,要CSS布局HTML小编今天和大家分享在主页打... 无标题文档 45565 把style属性加给你的弹窗标签就可以了,宽高位置均可变. 哪位前辈高手有html的窗 ...
Jquery 点击图片在弹出层显示大图
[转]Jquery 点击图片在弹出层显示大图使用jquery, 实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断. 效果图片: 1.点击前的效果: 2.点击后的效果: h ...
案例：文件下载需求：1. 页面显示超链接 2. 点击超链接后弹出下载提示框 3. 完成图片文件下载||中文文件问题
文件下载需求: 1. 页面显示超链接 2. 点击超链接后弹出下载提示框 3. 完成图片文件下载 * 分析: 1. 超链接指向的资源如果能够被浏览器解析,则在浏览器中展示 ...

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

jQuery实现点击文本框弹出热门标签的提示示例相关推荐

最新文章

热门文章