首页>>Jquery文字>>自定义样式与位置 的tips 支持input(2015-07-03)

自定义样式与位置 的tips 支持input

自定义样式与位置 的tips 支持input
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script type="text/javascript">  
  2.         //<![CDATA[  
  3.         $(function(){  
  4.   
  5.             $('#demo-basic').poshytip();  
  6.             $('#demo-tip-yellow').poshytip();  
  7.             $('#demo-tip-violet').poshytip({  
  8.                 className: 'tip-violet',  
  9.                 bgImageFrameSize: 9  
  10.             });  
  11.             $('#demo-tip-darkgray').poshytip({  
  12.                 className: 'tip-darkgray',  
  13.                 bgImageFrameSize: 11,  
  14.                 offsetX: -25  
  15.             });  
  16.             $('#demo-tip-skyblue').poshytip({  
  17.                 className: 'tip-skyblue',  
  18.                 bgImageFrameSize: 9,  
  19.                 offsetX: 0,  
  20.                 offsetY: 20  
  21.             });  
  22.             $('#demo-tip-yellowsimple').poshytip({  
  23.                 className: 'tip-yellowsimple',  
  24.                 showTimeout: 1,  
  25.                 alignTo: 'target',  
  26.                 alignX: 'center',  
  27.                 offsetY: 5,  
  28.                 allowTipHover: false  
  29.             });  
  30.             $('#demo-tip-twitter').poshytip({  
  31.                 className: 'tip-twitter',  
  32.                 showTimeout: 1,  
  33.                 alignTo: 'target',  
  34.                 alignX: 'center',  
  35.                 offsetY: 5,  
  36.                 allowTipHover: false,  
  37.                 fade: false,  
  38.                 slide: false  
  39.             });  
  40.             $('#demo-tip-green').poshytip({  
  41.                 className: 'tip-green',  
  42.                 offsetX: -7,  
  43.                 offsetY: 16,  
  44.                 allowTipHover: false  
  45.             });  
  46.             $('#demo-form-name').poshytip({  
  47.                 className: 'tip-yellowsimple',  
  48.                 showOn: 'focus',  
  49.                 alignTo: 'target',  
  50.                 alignX: 'right',  
  51.                 alignY: 'center',  
  52.                 offsetX: 5,  
  53.                 showTimeout: 100  
  54.             });  
  55.             $('#demo-form-email').poshytip({  
  56.                 className: 'tip-yellowsimple',  
  57.                 showOn: 'focus',  
  58.                 alignTo: 'target',  
  59.                 alignX: 'left',  
  60.                 alignY: 'center',  
  61.                 offsetX: 5,  
  62.                 showTimeout: 100  
  63.             });  
  64.             $('#demo-form-site').poshytip({  
  65.                 className: 'tip-yellowsimple',  
  66.                 showOn: 'focus',  
  67.                 alignTo: 'target',  
  68.                 alignX: 'inner-left',  
  69.                 offsetX: 0,  
  70.                 offsetY: 5,  
  71.                 showTimeout: 100  
  72.             });  
  73.             $('#demo-form-subject').poshytip({  
  74.                 className: 'tip-yellowsimple',  
  75.                 showOn: 'focus',  
  76.                 alignTo: 'target',  
  77.                 alignX: 'center',  
  78.                 alignY: 'bottom',  
  79.                 offsetX: 0,  
  80.                 offsetY: 5,  
  81.                 showTimeout: 100  
  82.             });  
  83.             $('#demo-async-timeout').poshytip({  
  84.                 content: function(updateCallback) {  
  85.                     window.setTimeout(function() {  
  86.                         updateCallback('Tooltip content updated!');  
  87.                     }, 1000);  
  88.                     return 'Loading...';  
  89.                 }  
  90.             });  
  91.   
  92.             var flickrFeedsCache = {};  
  93.             $('#demo-async-flickr > a').poshytip({  
  94.                 className: 'tip-darkgray',  
  95.                 bgImageFrameSize: 11,  
  96.                 alignY: 'bottom',  
  97.                 content: function(updateCallback) {  
  98.                     var rel = $(this).attr('rel');  
  99.                     if (flickrFeedsCache[rel] && flickrFeedsCache[rel].container)  
  100.                         return flickrFeedsCache[rel].container;  
  101.                     if (!flickrFeedsCache[rel]) {  
  102.                         flickrFeedsCache[rel] = { container: null };  
  103.                         var tagsComma = rel.substring(4).replace('-', ',');  
  104.                         $.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?tags=' + tagsComma + '&tagmode=all&format=json&jsoncallback=?',  
  105.                             function(data) {  
  106.                                 var container = $('<div/>').addClass('flickr-thumbs');  
  107.                                 $.each(data.items, function(i, item) {  
  108.                                     $('<a/>')  
  109.                                         .attr('href', item.link)  
  110.                                         .append($('<img/>').attr('src', item.media.m))  
  111.                                         .appendTo(container)  
  112.                                         .data('tip', '<strong>' + (item.title || '(no title)') + '</strong><br />by: ' + item.author.match(/((.*))/)[1]);  
  113.                                     if (i == 4)  
  114.                                         return false;  
  115.                                 });  
  116.                                 // add tips for the images inside the main tip  
  117.                                 container.find('a').poshytip({  
  118.                                     content: function(){return $(this).data('tip');},  
  119.                                     className: 'tip-yellowsimple',  
  120.                                     showTimeout: 100,  
  121.                                     alignTo: 'target',  
  122.                                     alignX: 'center',  
  123.                                     alignY: 'bottom',  
  124.                                     offsetY: 5,  
  125.                                     allowTipHover: false,  
  126.                                     hideAniDuration: 0  
  127.                                 });  
  128.                                 // call the updateCallback function to update the content in the main tooltip  
  129.                                 // and also store the content in the cache  
  130.                                 updateCallback(flickrFeedsCache[rel].container = container);  
  131.                             }  
  132.                         );  
  133.                     }  
  134.                     return 'Loading images...';  
  135.                 }  
  136.             });  
  137.             $('#demo-follow-cursor').poshytip({  
  138.                 followCursor: true,  
  139.                 slide: false  
  140.             });  
  141.             $('#demo-manual-trigger').poshytip({  
  142.                 content: 'Hey, there! This is a tooltip.',  
  143.                 showOn: 'none',  
  144.                 alignTo: 'target',  
  145.                 alignX: 'inner-left',  
  146.                 offsetX: 0,  
  147.                 offsetY: 5  
  148.             });  
  149.             $('#button-show').click(function() { $('#demo-manual-trigger').poshytip('show'); });  
  150.             $('#button-show-delayed').click(function() { $('#demo-manual-trigger').poshytip('showDelayed', 2000); });  
  151.             $('#button-hide').click(function() { $('#demo-manual-trigger').poshytip('hide'); });  
  152.             $('#button-hide-delayed').click(function() { $('#demo-manual-trigger').poshytip('hideDelayed', 2000); });  
  153.             $('#button-update').click(function() { $('#demo-manual-trigger').poshytip('update', 'I am a new content :)'); });  
  154.             $('#button-disable').click(function() { $('#demo-manual-trigger').poshytip('disable'); });  
  155.             $('#button-enable').click(function() { $('#demo-manual-trigger').poshytip('enable'); });  
  156.             $('#button-destroy').click(function() { $('#demo-manual-trigger').poshytip('destroy'); });  
  157.             $('#demo-live-events > a').poshytip({  
  158.                 liveEvents: true  
  159.             });  
  160.             $('#button-live-events').click(function() {  
  161.                 $('#demo-live-events').append(', <a title="Hey, there! This is a tooltip." href="#">Hover for a tooltip</a>');  
  162.             });  
  163.   
  164.         });  
  165.         //]]>  
  166.     </script>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_478.html