v1.0核心
v1.0实例
v2.0

Tooltips 提示小窗

Qtip2提示插件 PLUGIN

Qtip2是比较优秀的Jquery提示工具，官方文档齐全，使用方便，详见官网。本框架在原版v3.0.3基础上稍微做了改动以更好使用。

  • 1.框架通过css文件覆盖了原版的默认样式，但是未修改jquery.qtip.css
  • 2.修改了jquery.qtip.js源文件，修改了默认指示箭头的尺寸。
  • 3.修改了modal模式下显示效果，由原版的相对定位改成浏览器绝对居中定位。
  • 4.新增了padding属性，该属性可修改内容的内边距，默认值是'5px 14px'，用法举例：content:{padding:'10px'}。
  • 5.新增了maxWidth属性，该属性可修改容器的最大宽度，默认值是500px，用法举例：content:{maxWidth:'500px'}。
  • 6.增加手机端适配，如果有show参数，那么在手机端的窗口始终是绝对居中的。

基本使用方法如下：

简单使用 使用标题 使用关闭 大段内容
JS HTML 
  • <script src="https://src.axui.cn/v1.0/src/plugins/qtip2/jquery.qtip.min.js" type="text/javascript"></script>
<link href="https://src.axui.cn/v1.0/src/plugins/qtip2/jquery.qtip.css" rel="stylesheet" type="text/css" >
<script type='text/javascript'>
$(document).ready(function () {
   $('#tool01').qtip({
    content: '伟大的中国'
        });
});
</script>
                        
  •                                 <a href="###" class="ax-btn" id="tool01">基本使用</a>

窗口位置

at属性是设置窗口相对目标的位置，比如at: 'bottom right'是指窗口在目标的右下方；my属性是设置窗口指示箭头相对窗口的位置，比如my: 'top left'是指箭头在窗口的左上方。以下简单列举常用位置，设定更多位置请参考官网。

JS HTML 
  • <script src="https://src.axui.cn/v1.0/src/plugins/qtip2/jquery.qtip.min.js" type="text/javascript"></script>
<link href="https://src.axui.cn/v1.0/src/plugins/qtip2/jquery.qtip.css" rel="stylesheet" type="text/css" >
<script type='text/javascript'>
$(document).ready(function () {
     $('#tool05').qtip({
            content: {
                text: '相对目标位置：at: "center center"
    相对窗口位置：my: "center center"'
            },
            position: {
                at: 'center center',
                my: 'center center',
            },
            show:{
                ready: true,
            },
            hide:{
                event: 'click',
            }
        });
        $('#at-c-r').qtip({
            content: {
                text: '相对目标位置：at: "right center"
    相对窗口位置：my: "left center"'
            },
            position: {
                at: 'right center',
                my: 'left center',
            },
            show:{
                ready: true,
            },
            hide:{
                event: 'click',
            }
        });
        $('#at-c-l').qtip({
            content: {
                text: '相对目标位置：at: "left center"
    相对窗口位置：my: "right center"'
            },
            position: {
                at: 'left center',
                my: 'right center',
            },
            show:{
                ready: true,
            },
            hide:{
                event: 'click',
            }
        });
        $('#at-t-c').qtip({
            content: {
                text: '相对目标位置：at: "top center"
    相对窗口位置：my: "bottom center"'
            },
            position: {
                at: 'top center',
                my: 'bottom center',
            },
            show:{
                ready: true,
            },
            hide:{
                event: 'click',
            }
        });
        $('#at-b-c').qtip({
            content: {
                text: '相对目标位置：at: "bottom center"
    相对窗口位置：my: "top center"'
            },
            position: {
                at: 'bottom center',
                my: 'top center',
            },
            show:{
                ready: true,
            },
            hide:{
                event: 'click',
            }
        });
});
</script>
                        
  •                                  <div style="width: 300px;height:160px;margin:100px auto;border:1px solid #ebebeb;position:relative;" id="tool05">
                                    <span id="at-c-r" style="position:absolute;top:50%;right: -1px"></span>
                                    <span id="at-c-l" style="position:absolute;top:50%;left:-1px"></span>
                                    <span id="at-t-c" style="position:absolute;top:-1px;left: 50%"></span>
                                    <span id="at-b-c" style="position:absolute;bottom:-1px;left:50%"></span>
                                </div>

从页面取得内容

使用content: {text: $("#content").html()}方法可以从网页中取得内容。

从网页取得内容
JS HTML 
  • <script src="https://src.axui.cn/v1.0/src/plugins/qtip2/jquery.qtip.min.js" type="text/javascript"></script>
<link href="https://src.axui.cn/v1.0/src/plugins/qtip2/jquery.qtip.css" rel="stylesheet" type="text/css" >
<script type='text/javascript'>
$(document).ready(function () {
    $('#tool06').qtip({
            content: {
                text: $("#content").html(),
                padding:'0 14px'
            },
            position: {
                at: 'right top',
                my: 'left top',
            },
            show:{
                event: 'click',
            },
            hide:{
                event: 'click',
            }
        });
});
</script>
                        
  •                         <a href="###" class="ax-btn" id="tool06">页面居中弹窗</a>
<div style="display: none;" id="content">
                            <div class="ax-comment">

                                <div class="ax-item">
                                    <a href="###" class="ax-avatar" style="background-image: url(https://src.axui.cn/v1.0/examples/images/head01.jpg)"></a>
                                    <div class="ax-text">
                                        <div class="ax-row01 ax-row"><div class="ax-col"><a href="###" class="ax-name">李旺</a></div><i class="ax-floor">1楼</i></div>
                                        <div class="ax-reply"><a href="###">@张纯阳</a>：<span>对于很多中国人来说在任何一个领域只要不是第一那就是垃圾。</span><div class="ax-reply"><a href="###">@方志华</a>：<span>可就这么落后的航母除了美国以外还有谁能完全独立完成(航母本身加舰载机加武器弹药加后勤保障)？ </span><div class="ax-reply"><a href="###">@李敏</a>：<span>抬头看世界，如今各国，林林总总，有几个抗揍。放眼望乾坤，前途无量，有几个国家，总有一天要挨揍。 </span></div></div></div>
                                        <div class="ax-row02"><span>大家有没有发现，我们在看待中国的实力时，不是单纯的和一个国家做对比，而是和除了中国以外的所有国家比较。仿佛中国在个个方面都是第一时，中国人才能说认可我们的国家牛X。</span></div>
                                        <div class="ax-row03 ax-row"><div class="ax-col"><span class="ax-time">1小时前</span></div><a href="###" class="ax-action ax-action-reply">回复</a><a href="###" class="ax-action ax-action-good"><span class="ax-iconfont ax-icon-good-fill"></span>51</a><a href="###" class="ax-action ax-action-bad"><span class="ax-iconfont ax-icon-bad-fill"></span>34</a></div>
                                    </div>
                                </div>

                            </div>
                        </div>

页面居中弹窗

使用show: {modal: true}方法可以让窗口脱离原定位变成绝对居中带遮罩的弹窗。

页面居中弹窗
JS HTML 
  • <script src="https://src.axui.cn/v1.0/src/plugins/qtip2/jquery.qtip.min.js" type="text/javascript"></script>
<link href="https://src.axui.cn/v1.0/src/plugins/qtip2/jquery.qtip.css" rel="stylesheet" type="text/css" >
<script type='text/javascript'>
$(document).ready(function () {
  $('#tool07').qtip({
            content: {
                text: $("#content").html(),
                padding:'0 14px'
            },
            position: {
            },
            show: {
                event: 'click',
                modal: true
            },
            hide: {
                event: 'click'
            },
            style: {
                tip: false,
            },

        });
});
</script>
                        
  •                         <a href="###" class="ax-btn" id="tool07">页面居中弹窗</a>
<div style="display: none;" id="content">
                            <div class="ax-comment">

                                <div class="ax-item">
                                    <a href="###" class="ax-avatar" style="background-image: url(https://src.axui.cn/v1.0/examples/images/head01.jpg)"></a>
                                    <div class="ax-text">
                                        <div class="ax-row01 ax-row"><div class="ax-col"><a href="###" class="ax-name">李旺</a></div><i class="ax-floor">1楼</i></div>
                                        <div class="ax-reply"><a href="###">@张纯阳</a>：<span>对于很多中国人来说在任何一个领域只要不是第一那就是垃圾。</span><div class="ax-reply"><a href="###">@方志华</a>：<span>可就这么落后的航母除了美国以外还有谁能完全独立完成(航母本身加舰载机加武器弹药加后勤保障)？ </span><div class="ax-reply"><a href="###">@李敏</a>：<span>抬头看世界，如今各国，林林总总，有几个抗揍。放眼望乾坤，前途无量，有几个国家，总有一天要挨揍。 </span></div></div></div>
                                        <div class="ax-row02"><span>大家有没有发现，我们在看待中国的实力时，不是单纯的和一个国家做对比，而是和除了中国以外的所有国家比较。仿佛中国在个个方面都是第一时，中国人才能说认可我们的国家牛X。</span></div>
                                        <div class="ax-row03 ax-row"><div class="ax-col"><span class="ax-time">1小时前</span></div><a href="###" class="ax-action ax-action-reply">回复</a><a href="###" class="ax-action ax-action-good"><span class="ax-iconfont ax-icon-good-fill"></span>51</a><a href="###" class="ax-action ax-action-bad"><span class="ax-iconfont ax-icon-bad-fill"></span>34</a></div>
                                    </div>
                                </div>

                            </div>
                        </div>
温馨提示
本框架的popup弹窗也可以使用tooltips场景。详见Popup。