免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
最近访问板块 发新帖
查看: 2622 | 回复: 0

jQuery提示示例:点击文本框弹出热门标签 [复制链接]

论坛徽章:
0
发表于 2011-05-10 13:58 |显示全部楼层
  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>
复制代码
您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

  

北京盛拓优讯信息技术有限公司. 版权所有 京ICP备16024965号-6 北京市公安局海淀分局网监中心备案编号:11010802020122 niuxiaotong@pcpop.com 17352615567
未成年举报专区
中国互联网协会会员  联系我们:huangweiwei@itpub.net
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP