jQuery は、テキスト box_jquery をクリックしたときに人気のタグをポップアップするプロンプト効果を実装します。-jsチュートリアル-php.cn

コードをコピー コードは次のとおりです: jQuery实现点击文本框弹出热门标签的提示示例_网页代码站 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; } (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 = ' '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); } 如果没有出现提示框请刷新一下页面再试~ value="点击查看热门标签和您曾经使用过的标签" onclick="if(this.value=='点击查看热门标签和您曾经使用过的标签'){this.value='';this.className='m_tagsname'}"> 关闭 注意事項: タグを区切るには、簡潔な単語を使用してください。コンテンツ。

人気のタグ: メイク href="javascript:void(0)" onclick="checktag(this)">美容 onclick="checktag(this)">メイヨウブログ aaa 🎜>href="javascript:void(0)" onclick="checktag(this)">bbb onclick="checktag(this) ">パラダイス eee href=" javascript:void(0) )" onclick="checktag(this)">fff onclick="checktag(this)">ggg 使用したタグ: ソフトウェア href="javascript:void(0)" onclick="checktag(this)">Delphi onclick="checktag(this)">ブログ ソース コード&lt ;/a> href="javascript:void(0)" onclick="checktag(this)">カラーメイク onclick="checktag(this) )">google Sina

Web Code Station ダウンロード Web サイト - 中国の Web マスター向けに高品質の Web コードを提供することに尽力しています。