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

最新推荐文章于 2024-05-13 10:08:25 发布

vcxiaohan2

最新推荐文章于 2024-05-13 10:08:25 发布

阅读量6.9k

点赞数

分类专栏： jQuery插件

本文链接：https://blog.csdn.net/u011500781/article/details/50769850

版权

jQuery插件专栏收录该内容

29 篇文章 0 订阅

订阅专栏

请在这里查看示例 ☞ 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>

vcxiaohan2

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
提示框插件jBox.js的使用示例

jBox * {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;} 鼠
复制链接

扫一扫