当前位置： 文江博客话题详情

jQuery提示示例：点击文本框弹出热门标签

发布于 2022-10-15 07:24:07 字数 11655 浏览 21 评论 0

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>jQuery提示示例：点击文本框弹出热门标签</title>
  5. <meta http-equiv="content-type" content="text/html;charset=gb2312">
  6. <style type="text/css">
  7. body {
  8.         font-size:12px;font-family:Arial;
  9. }
  10. #m_tagsItem {
  11.         background:#fff;
  12.         position:absolute;
  13.         top:0px;
  14.         left:0px;
  15.         overflow:hidden;
  16.         width:590px;
  17. *width:561px;
  18.         width:561px\9;
  19.         padding:10px;
  20.         border:1px solid #ccc;
  21.         z-index:1000;
  22.         display:none;
  23. }
  24. #m_tagsItem p {
  25.         text-align:left;
  26.         line-height:22px;
  27.         padding:2px 0;
  28.         margin:0;
  29.         border:0;
  30. }
  31. #m_tagsItem span {
  32.         font-weight:bold;
  33. }
  34. #m_tagsItem a {
  35.         margin:0 5px;
  36. }
  37. .m_tagsname {
  38.         color:#999;
  39.         vertical-align:middle;
  40.         font-size:12px;
  41.         text-indent:3px;
  42.         line-height:20px;
  43. }
  44. #tagClose {
  45.         font-size:12px;
  46.         color:#888;
  47.         cursor:pointer;
  48.         position:absolute;
  49.         top:2px;
  50.         right:2px;
  51. }
  52. </style>
  53. <script src="http://www.codefans.net/ajaxjs/jquery1.3.2.js"></script>
  54. <script language="javascript">
  55. (function($){
  56. $.fn.bgIframe = $.fn.bgiframe = function(s) {
  57.         if ( $.browser.msie && /6.0/.test(navigator.userAgent) ) {
  58.                 s = $.extend({
  59.                         top     : 'auto', // auto == .currentStyle.borderTopWidth
  60.                         left    : 'auto', // auto == .currentStyle.borderLeftWidth
  61.                         width   : 'auto', // auto == offsetWidth
  62.                         height  : 'auto', // auto == offsetHeight
  63.                         opacity : true,
  64.                         src     : 'javascript:false;'
  65.                 }, s || {});
  66.                 var prop = function(n){return n&&n.constructor==Number?n+'px':n;},
  67.                     html = '<iframe class="bgiframe"frameborder="0"tabindex="-1"src="'+s.src+'"'+
  68.                                'style="display:block;position:absolute;z-index:-1;'+
  69.                                        (s.opacity !== false?'filter:Alpha(Opacity=\'0\');':'')+
  70.                                                'top:'+(s.top=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+\'px\')':prop(s.top))+';'+
  71.                                                'left:'+(s.left=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+\'px\')':prop(s.left))+';'+
  72.                                                'width:'+(s.width=='auto'?'expression(this.parentNode.offsetWidth+\'px\')':prop(s.width))+';'+
  73.                                                'height:'+(s.height=='auto'?'expression(this.parentNode.offsetHeight+\'px\')':prop(s.height))+';'+
  74.                                         '"/>';
  75.                 return this.each(function() {
  76.                         if ( $('> iframe.bgiframe', this).length == 0 )
  77.                                 this.insertBefore( document.createElement(html), this.firstChild );
  78.                 });
  79.         }
  80.         return this;
  81. };
  82. })(jQuery);
  83. jQuery.fn.selectCity = function(targetId) {
  84.         var _seft = this;
  85.         var targetId = $(targetId);
  86.         this.click(function(){
  87.                 var A_top = $(this).offset().top + $(this).outerHeight(true);  //  1
  88.                 var A_left =  $(this).offset().left;
  89.                 targetId.bgiframe();
  90.                 targetId.show().css({"position":"absolute","top":A_top+"px" ,"left":A_left+"px"});
  91.         });
  92.         targetId.find("#tagClose").click(function(){
  93.                 targetId.hide();
  94.         });
  95.         $(document).click(function(event){
  96.                 if(event.target.id!=_seft.selector.substring(1)){
  97.                         targetId.hide();       
  98.                 }
  99.         });
  100.         targetId.click(function(e){
  101.                 e.stopPropagation(); //  2
  102.         });
  103.     return this;
  104. }
  105. $(function(){
  106.         $("#selecttags").selectCity("#m_tagsItem");
  107. });
  108. //为文本域连续赋值
  109. function checktag(o){
  110.   var tagid = function(id){return document.getElementById(id);}
  111.   var tags = [];//存放标签,避免重复加入
  112.   var tagidSPLITCHAR = ' ';//设定分隔符,根据程序需求可改
  113.   var d = tagid('selecttags');
  114.   if (d.value)
  115.     tags = d.value.split(tagidSPLITCHAR);
  116.   var v = o.innerHTML;//如果tag有别的值或者别的非innerHTML里体现的内容
  117.     var s = tagidSPLITCHAR+tags.join(tagidSPLITCHAR)+tagidSPLITCHAR
  118.     if (!new RegExp(tagidSPLITCHAR+v+tagidSPLITCHAR,'g').test(s)){
  119.       s+=v;
  120.     }
  121.     s = s.replace(new RegExp("(^"+tagidSPLITCHAR+"*|"+tagidSPLITCHAR+"*tagid)","g"),'');
  122.     d.value = s;
  123.     tags = s.split(tagidSPLITCHAR);
  124. }
  125. </script>
  126. </head>
  127. <body>
  128. 如果没有出现提示框请刷新一下页面再试~
  129. <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'}">
  130. <div id="m_tagsItem" style="display:none">
  131.   <div id="tagClose">关闭</div>
  132.   <p><span>温馨提示：</span>标签间请用“空格”、“逗号”或“分号”隔开，用简练的词语概括您的博文内容。</p>
  133.   <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>
  134.   <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>
  135. </div>
  136. </body>
  137. </html>

复制代码

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据

关于作者

上课铃就是安魂曲

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

1CH1MKgiKxn9p

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

JackDx

文章 0 评论 0

信远

文章 0 评论 0

yaoduoduo1995

文章 0 评论 0

霞映澄塘

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文