阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.jBox 中文API文档

      插件 jQuery.jBox 中文API文档 https://github.com/StephanWagner/jBox

      jBox

      jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.

      Demo: https://stephanwagner.me/jBox

      Docs: https://stephanwagner.me/jBox/documentation

      Tooltips

      Create a new instance of jBox Tooltip and attach it to elements:

      new jBox('Tooltip', {
        attach: '.tooltip'
      });
      

      Now elements with class="tooltip" will open tooltips:

      <span class="tooltip" title="My first tooltip">Hover me!</span>
      <span class="tooltip" title="My second tooltip">Hover me!</span>
      

      You can set up modal windows the same way as tooltips. But most of times you’d want more variety, like a title or HTML content:

      new jBox('Modal', {
        width: 300,
        height: 200,
        attach: '#myModal',
        title: 'My Modal Window',
        content: '<i>Hello there!</i>'
      });
      
      <div id="myModal">Click me to open a modal window!</div>
      

      Confirm windows

      Confirm windows are modal windows which requires the user to confirm a click action on an element. Give an element the attribute data-confirm to attach it:

      new jBox('Confirm', {
        confirmButton: 'Do it!',
        cancelButton: 'Nope'
      });
      
      <div onclick="alert('Yay! You did it!')" data-confirm="Do you really want to do this?">Click me!</div>
      <a href="https://stephanwagner.me/jBox" data-confirm="Do you really want to leave this page?">Click me!</a>
      

      Notices

      A notice will open automatically and destroy itself after some time:

      new jBox('Notice', {
       content: 'Hurray! A notice!'
      });
      

      Images

      To create image windows you only need following few lines:

      new jBox('Image');
      
      <a href="/image-large.jpg" data-jbox-image="gallery1" title="My image"><img src="/image.jpg" alt=""></a>
      

      Learn more

      These few examples are very basic. The jBox library is quite powerful and offers a vast variety of options to customize appearance and behavior. Learn more in the documentation: https://stephanwagner.me/jBox/documentation

      目录
      目录