提示框插件jBox.js的使用示例

来源：互联网发布：无锡安镇网络编辑：程序博客网时间：2024/06/05 06:21
请在这里查看示例 ☞ 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>
0 0