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

最新推荐文章于 2023-07-17 10:27:13 发布

cuivivid

最新推荐文章于 2023-07-17 10:27:13 发布

阅读量1.1k

点赞数 1

分类专栏： jquery 点击文本框弹出热门标签的提示示例文章标签： jquery 标签

jquery 点击文本框弹出热门标签的提示示例专栏收录该内容

1 篇文章 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>
    <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/

cuivivid

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现点击文本框弹出热门标签的提示示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> jQuery实现点击文本框弹出热门标签的提示示例_网页代码站
复制链接

扫一扫