Shortcut 快捷工具
简介
Shortcut部件是一组快捷工具按钮，通过该部件可快速进行一些操作，比如回到顶部。当向下一定高度之后（本框架定义的默认值是400px），Shortcut部件会升起返回顶部的按钮。
Shortcut的父子节点顺序为ul-li-a；Shortcut内置了几个固有元素，即image、loader、social、totop和pop。基本结构如下：
<ul axShortcut>
<li image><a href="###" style="background-image: url(https://src.axui.cn/v2.0/public/images/head01.jpg)"></a><span class="ax-dot"></span><span pop>24小时客服</span></li>
<li loader><a></a></li>
<li><a href="###" class="ax-iconfont ax-icon-bell"></a><span class="ax-badge">5</span></li>
<li social><a href="###" class="ax-iconfont ax-icon-share"></a><span pop><a href="###" class="ax-iconfont ax-icon-wechat-f"></a><a href="###" class="ax-iconfont ax-icon-weibo-f"></a><a href="###" class="ax-iconfont ax-icon-facebook-f"></a><a href="###" class="ax-iconfont ax-icon-twitter-f"></a></span></li>
<li><a href="###" class="ax-iconfont ax-icon-qrcode"></a><span pop><img src="https://src.axui.cn/v2.0/public/images/qrcode.png"></span></li>
<li totop><a href="###" class="ax-iconfont ax-icon-totop"></a></li>
</ul>
使用方法
插件运行方式有两种：
- ax*属性：对标签使用
axShortcut属性即可按默认参数运行插件。 - js实例：通过
new axShortcut('#ID')方式创建实例运行。
因为页面通常只会有一个shortcut，所以使用属性激活插件即可，js实例不再举例。
大尺寸
通过size参数设置按钮尺寸，默认为md即38px宽高的按钮，可设为lg即可变为56px宽高的按钮。
<ul axShortcut="size:'lg'">
<li image><a href="###" style="background-image: url(https://src.axui.cn/v2.0/public/images/head01.jpg)"></a><span class="ax-dot"></span><span pop>24小时客服</span></li>
<li loader><a></a></li>
<li><a href="###" class="ax-iconfont ax-icon-bell"></a><span class="ax-badge">5</span></li>
<li social><a href="###" class="ax-iconfont ax-icon-share"></a><span pop><a href="###" class="ax-iconfont ax-icon-wechat-f"></a><a href="###" class="ax-iconfont ax-icon-weibo-f"></a><a href="###" class="ax-iconfont ax-icon-facebook-f"></a><a href="###" class="ax-iconfont ax-icon-twitter-f"></a></span></li>
<li><a href="###" class="ax-iconfont ax-icon-qrcode"></a><span pop><img src="https://src.axui.cn/v2.0/public/images/qrcode.png"></span></li>
<li totop><a href="###" class="ax-iconfont ax-icon-totop"></a></li>
</ul>
直角方形按钮
通过参数shape设置按钮外形，使用shape:square类表示正方形的按钮。
<ul axShortcut="shape:'square'">
<li image><a href="###" style="background-image: url(https://src.axui.cn/v2.0/public/images/head01.jpg)"></a><span class="ax-dot"></span><span pop>24小时客服</span></li>
<li loader><a></a></li>
<li><a href="###" class="ax-iconfont ax-icon-bell"></a><span class="ax-badge">5</span></li>
<li social><a href="###" class="ax-iconfont ax-icon-share"></a><span pop><a href="###" class="ax-iconfont ax-icon-wechat-f"></a><a href="###" class="ax-iconfont ax-icon-weibo-f"></a><a href="###" class="ax-iconfont ax-icon-facebook-f"></a><a href="###" class="ax-iconfont ax-icon-twitter-f"></a></span></li>
<li><a href="###" class="ax-iconfont ax-icon-qrcode"></a><span pop><img src="https://src.axui.cn/v2.0/public/images/qrcode.png"></span></li>
<li totop><a href="###" class="ax-iconfont ax-icon-totop"></a></li>
</ul>
圆形按钮
通过参数shape设置按钮外形，使用shape:round类表示圆形按钮。
<ul axShortcut="shape:'round'">
<li image><a href="###" style="background-image: url(https://src.axui.cn/v2.0/public/images/head01.jpg)"></a><span class="ax-dot"></span><span pop>24小时客服</span></li>
<li loader><a></a></li>
<li><a href="###" class="ax-iconfont ax-icon-bell"></a><span class="ax-badge">5</span></li>
<li social><a href="###" class="ax-iconfont ax-icon-share"></a><span pop><a href="###" class="ax-iconfont ax-icon-wechat-f"></a><a href="###" class="ax-iconfont ax-icon-weibo-f"></a><a href="###" class="ax-iconfont ax-icon-facebook-f"></a><a href="###" class="ax-iconfont ax-icon-twitter-f"></a></span></li>
<li><a href="###" class="ax-iconfont ax-icon-qrcode"></a><span pop><img src="https://src.axui.cn/v2.0/public/images/qrcode.png"></span></li>
<li totop><a href="###" class="ax-iconfont ax-icon-totop"></a></li>
</ul>
焦点按钮
使用ax-focus类表示焦点按钮。
<ul axShortcut>
<li image class="ax-focus"><a href="###" style="background-image: url(https://src.axui.cn/v2.0/public/images/head01.jpg)"></a><span class="ax-dot"></span><span pop>24小时客服</span></li>
<li loader><a></a></li>
<li><a href="###" class="ax-iconfont ax-icon-bell"></a><span class="ax-badge">5</span></li>
<li social><a href="###" class="ax-iconfont ax-icon-share"></a><span pop><a href="###" class="ax-iconfont ax-icon-wechat-f"></a><a href="###" class="ax-iconfont ax-icon-weibo-f"></a><a href="###" class="ax-iconfont ax-icon-facebook-f"></a><a href="###" class="ax-iconfont ax-icon-twitter-f"></a></span></li>
<li><a href="###" class="ax-iconfont ax-icon-qrcode"></a><span pop><img src="https://src.axui.cn/v2.0/public/images/qrcode.png"></span></li>
<li totop><a href="###" class="ax-iconfont ax-icon-totop"></a></li>
</ul>
所在位置
通过参数placement设置快捷工具栏所在位置，默认为right-bottom，可选择right-center、left-center和left-bottom。
<ul axShortcut="placement:'left-center'">
<li image><a href="###" style="background-image: url(https://src.axui.cn/v2.0/public/images/head01.jpg)"></a><span class="ax-dot"></span><span pop>24小时客服</span></li>
<li loader><a></a></li>
<li><a href="###" class="ax-iconfont ax-icon-bell"></a><span class="ax-badge">5</span></li>
<li social><a href="###" class="ax-iconfont ax-icon-share"></a><span pop><a href="###" class="ax-iconfont ax-icon-wechat-f"></a><a href="###" class="ax-iconfont ax-icon-weibo-f"></a><a href="###" class="ax-iconfont ax-icon-facebook-f"></a><a href="###" class="ax-iconfont ax-icon-twitter-f"></a></span></li>
<li><a href="###" class="ax-iconfont ax-icon-qrcode"></a><span pop><img src="https://src.axui.cn/v2.0/public/images/qrcode.png"></span></li>
<li totop><a href="###" class="ax-iconfont ax-icon-totop"></a></li>
</ul>
边距
快捷工具栏的四周边距默认是14px，可通过参数gap设置边距，边距单位可为px、rem或calc()。可通过gap.side设置两侧边距；可通过gap.bottom设置底边距；可通过gap.top设置顶边距。
<ul axShortcut="gap:{side:'calc((100vw - 80rem)/2)',bottom:'5rem'}">
<li image><a href="###" style="background-image: url(https://src.axui.cn/v2.0/public/images/head01.jpg)"></a><span class="ax-dot"></span><span pop>24小时客服</span></li>
<li loader><a></a></li>
<li><a href="###" class="ax-iconfont ax-icon-bell"></a><span class="ax-badge">5</span></li>
<li social><a href="###" class="ax-iconfont ax-icon-share"></a><span pop><a href="###" class="ax-iconfont ax-icon-wechat-f"></a><a href="###" class="ax-iconfont ax-icon-weibo-f"></a><a href="###" class="ax-iconfont ax-icon-facebook-f"></a><a href="###" class="ax-iconfont ax-icon-twitter-f"></a></span></li>
<li><a href="###" class="ax-iconfont ax-icon-qrcode"></a><span pop><img src="https://src.axui.cn/v2.0/public/images/qrcode.png"></span></li>
<li totop><a href="###" class="ax-iconfont ax-icon-totop"></a></li>
</ul>
参数选项
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new axShortcut('#id',{
insName: '',//实例名称，字符串格式；如果填写了实例名称，那么该实例会被添加到实例合集当中，通过axInstance方法可获取本实例，详细请查看：ax-utils-instance.php
shape: '',//快捷菜单子菜单外形，默认为空即是radius即3px的圆角，可选择round原型或square方形
placement: 'right-bottom',//所处位置，默认右下角即right-bottom，可选择right-center，left-center和left-bottom
gap:{
side:'',//两侧边距，默认为空即是1.4rem（14px），可以填px值或rem值甚至使用calc()值
bottom:'',//底部边距，默认为空即是1.4rem（14px），可以填px值或rem值甚至使用calc()值
top:'',//顶部边距，默认为空即不设置，可以填px值或rem值甚至使用calc()值
},
size: '',//设置尺寸，默认为空即为md，可设置lg
threshold: 400,//显示“回到顶部”按钮的滚动距离，默认400，可自定义
scrollTo: 0,//点击返回按钮是回到哪里，默认为0即返回浏览器顶部，可以自定义一个距离顶部的数值，或者定义一个节点
onInit: '',//回调函数，初始化后执行，无参数，但可使用内部变量，this.targetDom/this.children/this.totop
breakpoints: {},//使用断点以适配终端，详情查看ax-utils-other.php页面
});
以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"
