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 相关文章推荐
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
js的[defer]和[async]属性
Nov 24 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
Oct 15 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
Oct 29 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
Jan 21 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 Javascript
从0搭建vue-cli4脚手架
Jun 17 Javascript
js实现跳一跳小游戏
Jul 31 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二维数组矩形转置实例
2016/07/20 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
js中取得变量绝对值的方法
2015/01/03 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
vuex的使用和简易实现
2021/01/07 Vue.js
python检测服务器是否正常
2014/02/16 Python
Python NumPy库安装使用笔记
2015/05/18 Python
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
python实现多线程行情抓取工具的方法
2018/02/28 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
python opencv摄像头的简单应用
2019/06/06 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
单位在职证明范本
2014/01/09 职场文书
会计专业求职信范文
2014/03/16 职场文书
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL