本文主要是介绍提示框插件jBox.js的使用示例，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
请在这里查看示例 ☞ jBox示例
官方实例
jBox最好使用min.js，因为开发版本的notice模块有问题
<!doctype html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="renderer" content="webkit"> <title>demo</title> <link rel="stylesheet" href="css/jBox.css" /> <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="js/jBox.min.js"></script> <style> * {margin: 0; padding: 0;} .c, .d {border: 1px solid red; width: 150px; height: 80px; margin: 0 auto; margin-top: 50px;} .add {border: 2px solid blue;} </style> </head> <body> <button class="b">鼠标悬浮</button> <button class="a">点击打开</button> <button class="e">打开确认框</button> <button class="c">点击关闭</button> <button class="d">鼠标跟随</button> <button class="div3">这里是标题...</button> <button class="div4">这里是内容...</button> <button class="div5">通知...</button> <button class="div1">提示</button> <button class="div2">提示放在这里</button> </body> <script> ;$(function() { //模态 var myModel = new jBox('Modal', { attach: $('.b'), trigger: 'mouseover',//click改成mouseover title: $('.div3'),//可以省略 content: $('.div4'), animation: 'flip', /*ajax: { url: '/servlet/AQ?sysNum=14464304598886414&s=kl', reload: true, success: function(data) { } }, spinner: 'true',*/ onOpen: function(data) { this.setContent('jBox is opening…'); }, onClose: function() { this.setContent('jBox is closing…'); }, }); //打开 $('.a').on('click', function() { myModel.open(); }); //提示 var myModel2 = new jBox('Tooltip', { attach: $('.div2'), trigger: 'click', content: '123123123123<br>wqe<b class="aa">dsfsddsf</b>wqewqewq', target: $('.c'), position: { x: 'left',//控制tip在target的相对位置 y: 'top',//也可以使用数字(最好不用，要不然会固定不动) }, offset: {//控制相对位置 x: -40, y: -20, }, outside: 'x',//'y'/'xy'//控制箭头的指向(要和position配合才能生效) pointer: 'center: 5',//控制箭头的位置 animation: 'flip',//弹出的动画效果 zIndex: 10001, delayOpen: 1000, delayClose: 1000, draggable: $('.aa'),//可以是true/title }); //提示 var myModel4 = new jBox('Tooltip', { attach: $('.div2'), content: 'wwwwwwwwwwwwwww', target: $('.c'), position: { x: 'left',//控制tip在target的相对位置 y: 'top',//也可以使用数字(最好不用，要不然会固定不动) }, outside: 'y',//'y'/'xy'//控制箭头的指向 pointer: 'center: 15',//控制箭头的位置 animation: 'flip',//弹出的动画效果 }); //鼠标跟随 var myModel3 = new jBox('Mouse', { attach: $('.d'), content: '12321421421421421', addClass: 'add', }); //确认框 var myModel5 = new jBox('Confirm', { title: 'qwewq', confirmButton: '12321', confirm: function() { //console.log(1); } }); $('.e').on('click', function() { myModel5.open(); demoNoticeDefault(); }); //提示 var myModel6 = new jBox('Tooltip', { attach: $('.div2'), trigger: 'click', content: '123123123123<br>wqe<b class="bb">dsfsddsf</b>wqewqewq', target: $('.c'), draggable: $('.bb'),//可以是true/title }); function demoNoticeDefault() { new jBox('Notice', { content: 'here!' }); } }); </script>
</html>这篇关于提示框插件jBox.js的使用示例的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
