点击文本框弹出热门标签

最新推荐文章于 2021-06-05 02:43:25 发布

xiaoliangaccp

最新推荐文章于 2021-06-05 02:43:25 发布

阅读量631

点赞数

分类专栏： ASP.Net 文章标签： javascript function html xhtml tags class

本文链接：https://blog.csdn.net/xiaoliangaccp/article/details/5651003

版权

ASP.Net 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!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>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
body {
font-size:12px;
}
#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.codefans.net/ajaxjs/jquery1.3.2.js"></script>
<script language="javascript">
    //Copyright (c) 2006 Brandon Aaron (http://brandonaaron.net)
    (function($) {
        $.fn.bgIframe = $.fn.bgiframe = function(s) {
            // This is only for IE6
            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)">学IT网</a><a href="javascript:void(0)" onClick="checktag(this)">xueit.com</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>
</body>
</html>