首页>>Jquery文字>>tooltips/弹出层/消息提示效果，支持点击与经过显示，位置和效果可以自定义(2014-08-27)

tooltips/弹出层/消息提示效果，支持点击与经过显示，位置和效果可以自定义

 有tooltip，弹出层,四个角落提示支持自动关闭

tooltips/弹出层/消息提示效果，支持点击与经过显示，位置和效果可以自定义
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="demo-buttons clearfix">  
  2. <div class="demo-button" id="demoT1">Hover me!</div>  
  3. <div class="demo-button" id="demoT2">Hover me!</div>  
  4. <div class="demo-button" id="demoT3">Hover me!</div>  
  5. <div class="demo-button" id="demoT4">Hover me!</div>  
  6. <div class="demo-button" id="demoT5">Hover me!</div>  
  7. <div class="demo-button" id="demoT6">Hover me!</div>  
  8. <div class="demo-button demo-button-click" id="demoT7">Click me!</div>  
  9. <div class="demo-button demo-button-click" id="demoT8">Click me!</div>  
  10. </div>  

 

JavaScript Code
  1. var noticeN3Volume = 100;  
  2.   
  3. function setN3Volume(vol) {  
  4.     noticeN3Volume = vol;  
  5.     jQuery('.jBoxN3-volume').removeClass('active');  
  6.     jQuery('#jBoxN3-volume' + vol).addClass('active')  
  7. }  
  8. jQuery(document).ready(function() {  
  9.     new jBox('Tooltip', {  
  10.         id: 'jBoxT1',  
  11.         attach: jQuery('#demoT1'),  
  12.         content: 'This is a basic jBox tooltip'  
  13.     });  
  14.     new jBox('Tooltip', {  
  15.         id: 'jBoxT2',  
  16.         theme: 'TooltipBorder',  
  17.         width: 200,  
  18.         position: {  
  19.             x: 'left',  
  20.             y: 'center'  
  21.         },  
  22.         outside: 'x',  
  23.         pointer: 'top:15',  
  24.         attach: jQuery('#demoT2'),  
  25.         content: 'You have many options to position and animate your jBoxes',  
  26.         animation: 'move'  
  27.     });  
  28.     new jBox('Tooltip', {  
  29.         id: 'jBoxT3',  
  30.         theme: 'TooltipDark',  
  31.         animation: 'zoomOut',  
  32.         attach: jQuery('#demoT3'),  
  33.         content: 'Use themes to change appearance'  
  34.     });  
  35.     jQuery('#demoT4').mouseenter(function() {  
  36.         jQuery('#demoT4').addClass('active').html('Wait...')  
  37.     }).mouseleave(function() {  
  38.         jQuery('#demoT4').addClass('active').html('Wait...')  
  39.     });  
  40.     new jBox('Tooltip', {  
  41.         id: 'jBoxT4',  
  42.         width: 300,  
  43.         pointer: 'right:80',  
  44.         animation: 'move',  
  45.         delayOpen: 1000,  
  46.         delayClose: 2000,  
  47.         attach: jQuery('#demoT4'),  
  48.         content: 'This tooltip waits 1 second to open and closes after 2 seconds',  
  49.         onOpen: function() {  
  50.             jQuery('#demoT4').removeClass('active').html('Hover me!')  
  51.         },  
  52.         onClose: function() {  
  53.             jQuery('#demoT4').removeClass('active').html('Hover me!')  
  54.         }  
  55.     });  
  56.     new jBox('Mouse', {  
  57.         id: 'jBoxT5',  
  58.         attach: jQuery('#demoT5'),  
  59.         content: 'I will follow you!'  
  60.     });  
  61.     new jBox('Tooltip', {  
  62.         id: 'jBoxT6',  
  63.         width: 280,  
  64.         closeOnMouseleave: true,  
  65.         animation: 'zoomIn',  
  66.         attach: jQuery('#demoT6'),  
  67.         content: 'I won't close when you move your mouse over me'  
  68.     });  
  69.     new jBox('Tooltip', {  
  70.         id: 'jBoxT7',  
  71.         theme: 'TooltipBorder',  
  72.         trigger: 'click',  
  73.         adjustDistance: {  
  74.             top: 55,  
  75.             right: 5,  
  76.             bottom: 5,  
  77.             left: 5  
  78.         },  
  79.         adjustTracker: true,  
  80.         closeOnClick: 'body',  
  81.         closeButton: 'box',  
  82.         animation: 'move',  
  83.         attach: jQuery('#demoT7'),  
  84.         target: jQuery('#demoT1'),  
  85.         position: {  
  86.             x: 'left',  
  87.             y: 'top'  
  88.         },  
  89.         outside: 'y',  
  90.         pointer: 'left:20',  
  91.         offset: {  
  92.             x: 25  
  93.         },  
  94.         content: 'You can position your tooltips at any element.<br>Scroll up and down to see this tooltip flip position!',  
  95.         onOpen: function() {},  
  96.         onOpen: function() {  
  97.             jQuery('#demoT7').addClass('active').html('Now scroll!')  
  98.         },  
  99.         onClose: function() {  
  100.             jQuery('#demoT7').removeClass('active').html('Click me!')  
  101.         }  
  102.     });  
  103.     new jBox('Tooltip', {  
  104.         id: 'jBoxT8',  
  105.         theme: 'TooltipBorder',  
  106.         trigger: 'click',  
  107.         width: 200,  
  108.         height: 600,  
  109.         adjustTracker: true,  
  110.         adjustDistance: {  
  111.             top: 55,  
  112.             right: 5,  
  113.             bottom: 5,  
  114.             left: 5  
  115.         },  
  116.         closeOnClick: 'body',  
  117.         closeOnEsc: true,  
  118.         animation: 'move',  
  119.         attach: jQuery('#demoT8'),  
  120.         position: {  
  121.             x: 'right',  
  122.             y: 'center'  
  123.         },  
  124.         outside: 'x',  
  125.         content: 'Scroll up and down or resize your browser, I will adjust my position!<br><br>Press [ESC] or click anywhere to close.',  
  126.         onInit: function() {  
  127.             this.options.height = (jQuery(window).height() - 200)  
  128.         },  
  129.         onOpen: function() {  
  130.             jQuery('#demoT8').addClass('active').html('Now scroll!')  
  131.         },  
  132.         onClose: function() {  
  133.             jQuery('#demoT8').removeClass('active').html('Click me!')  
  134.         }  
  135.     });  
  136.     new jBox('Modal', {  
  137.         attach: jQuery('#demoM1'),  
  138.         height: 200,  
  139.         title: 'I'm a basic jBox modal window',  
  140.         content: '<div style="line-height: 30px;">Try to scroll ...it's blocked.<br>Press [ESC] or click anywhere to close.</div>'  
  141.     });  
  142.     new jBox('Modal', {  
  143.         attach: jQuery('#demoM2'),  
  144.         theme: 'ModalBorder',  
  145.         width: 350,  
  146.         height: 200,  
  147.         blockScroll: false,  
  148.         animation: 'zoomIn',  
  149.         draggable: 'title',  
  150.         content: 'You can move this modal window',  
  151.         title: 'Click here to drag me around',  
  152.         overlay: false  
  153.     });  
  154.     new jBox('Modal', {  
  155.         attach: jQuery('#demoM3'),  
  156.         closeButton: 'box',  
  157.         animation: {  
  158.             open: 'slide:left',  
  159.             close: 'slide:right'  
  160.         },  
  161.         onCreated: function() {  
  162.             this.content.css({  
  163.                 lineHeight: '40px',  
  164.                 padding: '60px 80px',  
  165.                 textAlign: 'center'  
  166.             })  
  167.         },  
  168.         content: 'As with tooltips, you have<br>many options to change appearance and behavior'  
  169.     });  
  170.     new jBox('Modal', {  
  171.         attach: jQuery('#demoM4'),  
  172.         width: 450,  
  173.         height: 250,  
  174.         closeButton: 'title',  
  175.         animation: false,  
  176.         onAjax: function() {  
  177.             this.setTitle('Content is loading…')  
  178.         },  
  179.         onAjaxComplete: function() {  
  180.             this.setTitle('Content loaded')  
  181.         },  
  182.         ajax: 'index.html',  
  183.         reload: true  
  184.     });  
  185.     jQuery('.demo-button-notice').click(function() {  
  186.         jQuery(this).addClass('active').children('.jBox-notice-text').html('Click me again!')  
  187.     }).mouseleave(function() {  
  188.         jQuery(this).removeClass('active').children('.jBox-notice-text').html('Click me!')  
  189.     });  
  190.     jQuery('#demoN1').click(function() {  
  191.         new jBox('Notice', {  
  192.             content: 'Hello, I'm a notice!',  
  193.             position: {  
  194.                 x: 15,  
  195.                 y: 65  
  196.             },  
  197.             zIndex: 12000  
  198.         })  
  199.     });  
  200.     var colorsN2 = ['red', 'green', 'blue', 'yellow'];  
  201.     var currentColorN2 = 0;  
  202.     jQuery('#demoN2').click(function() {  
  203.         new jBox('Notice', {  
  204.             animation: 'flip',  
  205.             position: {  
  206.                 x: 15,  
  207.                 y: 65  
  208.             },  
  209.             content: 'Oooh! They also come in colors!',  
  210.             onInit: function() {  
  211.                 this.options.color = colorsN2[currentColorN2];  
  212.                 currentColorN2++;  
  213.                 (currentColorN2 >= colorsN2.length) && (currentColorN2 = 0)  
  214.             },  
  215.             zIndex: 12000  
  216.         })  
  217.     });  
  218.     var colorsN3 = ['red', 'green', 'blue', 'yellow'];  
  219.     var titlesN3 = ['Oops', 'Well done', 'Reminder', 'Attention'];  
  220.     var contentsN3 = ['Sorry, something went wrong', 'You perfectly clicked a button', 'Don't forget to click the button one more time', 'Take care out there'];  
  221.     var currentColorN3 = 0;  
  222.     jQuery('#demoN3').click(function() {  
  223.         new jBox('Notice', {  
  224.             attributes: {  
  225.                 x: 'left',  
  226.                 y: 'bottom'  
  227.             },  
  228.             theme: 'NoticeBorder',  
  229.             color: 'black',  
  230.             audio: '/plugins/jBox/Source/audio/blob',  
  231.             volume: noticeN3Volume,  
  232.             animation: {  
  233.                 open: 'slide:bottom',  
  234.                 close: 'slide:left'  
  235.             },  
  236.             onInit: function() {  
  237.                 this.options.color = colorsN3[currentColorN3];  
  238.                 this.options.title = titlesN3[currentColorN3];  
  239.                 this.options.content = contentsN3[currentColorN3];  
  240.                 currentColorN3++;  
  241.                 (currentColorN3 >= colorsN3.length) && (currentColorN3 = 0)  
  242.             },  
  243.         })  
  244.     });  
  245.     var colorsN4 = ['black', 'red', 'green', 'blue', 'yellow'];  
  246.     var currentColorN4 = 0;  
  247.     jQuery('#demoN4').click(function() {  
  248.         new jBox('Notice', {  
  249.             autoClose: 10000,  
  250.             attributes: {  
  251.                 x: 'right',  
  252.                 y: 'bottom'  
  253.             },  
  254.             stack: false,  
  255.             animation: {  
  256.                 open: 'tada',  
  257.                 close: 'zoomIn'  
  258.             },  
  259.             title: 'Tadaaa! I'm single!',  
  260.             content: 'Open another notice to close me!',  
  261.             onInit: function() {  
  262.                 this.options.color = colorsN4[currentColorN4];  
  263.                 currentColorN4++;  
  264.                 (currentColorN4 >= colorsN4.length) && (currentColorN4 = 0)  
  265.             },  
  266.         })  
  267.     })  
  268. });  

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