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


Posted in Javascript onNovember 17, 2013
<!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="点击查看热门标签和您曾经使用过的标签" onclick="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)" onclick="checktag(this)">彩妆</a><a 
href="javascript:void(0)" onclick="checktag(this)">美发</a><a href="javascript:void(0)" 
onclick="checktag(this)">美优博客</a><a href="javascript:void(0)" onclick="checktag(this)">aaa</a><a 
href="javascript:void(0)" onclick="checktag(this)">bbb</a><a href="javascript:void(0)" 
onclick="checktag(this)">天堂</a><a href="javascript:void(0)" onclick="checktag(this)">eee</a><a 
href="javascript:void(0)" onclick="checktag(this)">fff</a><a href="javascript:void(0)" 
onclick="checktag(this)">ggg</a></p> 
<p> 
<span>您使用过的标签:</span><a href="javascript:void(0)" onclick="checktag(this)">软件</a><a 
href="javascript:void(0)" onclick="checktag(this)">Delphi</a><a href="javascript:void(0)" 
onclick="checktag(this)">博客</a><a href="javascript:void(0)" onclick="checktag(this)">源码</a><a 
href="javascript:void(0)" onclick="checktag(this)">彩妆</a><a href="javascript:void(0)" 
onclick="checktag(this)">google</a><a href="javascript:void(0)" onclick="checktag(this)">新浪</a></p> 
</div> 
<br /> 
<p> 
<a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p> 
</body> </html>
Javascript 相关文章推荐
几行代码轻松搞定jquery实现flash8类似的连接效果
May 03 Javascript
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
Extjs学习笔记之九 数据模型(上)
Jan 11 Javascript
jQuery1.6 使用方法一
Nov 23 Javascript
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
js无刷新操作table的行和列
Mar 27 Javascript
js Object2String方便查看js对象内容
Nov 24 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
jQuery实现的form转json经典示例
Oct 10 jQuery
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
ExtJS[Desktop]实现图标换行示例代码
Nov 17 #Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 #Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
Nov 17 #Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 #Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 #Javascript
jquery在项目中做复选框时遇到的一些问题笔记
Nov 17 #Javascript
jQuery学习之prop和attr的区别示例介绍
Nov 15 #Javascript
You might like
聊天室php&amp;mysql(四)
2006/10/09 PHP
php正则校验用户名介绍
2008/07/19 PHP
GBK的页面输出JSON格式的php函数
2010/02/16 PHP
php shell超强免杀、减少体积工具实现代码
2012/10/16 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
摘自百度的图片轮换效果代码
2007/11/19 Javascript
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
JavaScript OOP面向对象介绍
2010/12/02 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
Python双向循环链表实现方法分析
2018/07/30 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
python操作链表的示例代码
2020/09/27 Python
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
2019/08/01 HTML / CSS
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
实习销售业务员自我鉴定
2013/09/21 职场文书
ktv收银员岗位职责
2013/12/16 职场文书
党员创先争优心得体会
2014/09/11 职场文书
布达拉宫的导游词
2015/02/02 职场文书
小学家长意见怎么写
2015/06/03 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript