Alert 提示

文字提示

使用ax-alert类表示提示，默认颜色是黄色（warning）。

这是一个告示。
提醒注意。

                              <div class="ax-alert">这是一个告示。<br />提醒注意。</div>

主题

本框架一共定义了7种主题颜色，使用theme属性来定义，分别是primary，success，danger，warning(默认)，info，text。详细说明和举例如下：

主色。
与系统颜色保持一致。

操作成功！

很危险！

提示注意！

这是一个疑问！

名词解释

浅灰色文字提示

                                    <div class="ax-alert" theme="primary">主色。<br />与系统颜色保持一致。</div>
                                    <div class="ax-break"></div>
                                    <div class="ax-alert" theme="success">操作成功！</div>
                                    <div class="ax-break"></div>
                                    <div class="ax-alert" theme="error">很危险！</div>
                                    <div class="ax-break"></div>
                                    <div class="ax-alert" theme="warning">提示注意！</div>
                                    <div class="ax-break"></div>
                                    <div class="ax-alert" theme="question">这是一个疑问！</div>
                                    <div class="ax-break"></div>
                                    <div class="ax-alert" theme="info">名词解释</div>
                                    <div class="ax-break"></div>
                                    <div class="ax-alert" theme="text">浅灰色文字提示</div>

无边框

提示默认带有边框，使用borderless属性可取消边框。

主色。
与系统颜色保持一致。

错误

                                    <div class="ax-alert" theme="primary" borderless>主色。<br />与系统颜色保持一致。</div>
                                    <div class="ax-break"></div>
                                    <div class="ax-alert" theme="error" borderless>错误</div>

方边

提示默认带有3px的圆角，使用square属性可取消圆角。

主色。
与系统颜色保持一致。

错误

                                    <div class="ax-alert" theme="primary" square>主色。<br />与系统颜色保持一致。</div>
                                    <div class="ax-break"></div>
                                    <div class="ax-alert" theme="error" square>错误</div>

使用关闭按钮

在ax-alert中加入close的属性标签即可。如果需要有点击关闭效果，请实例化。

主色。
与系统颜色保持一致。

错误

                                    <div class="ax-alert" theme="primary">主色。<br />与系统颜色保持一致。<i close></i></div>
                                    <div class="ax-break"></div>
                                    <div class="ax-alert" theme="error">错误<i close></i></div>

使用标题+简介

使用wrapper、caption和content属性标签即可，注意查看html结构。

原始社会

中国的原始社会，起自大约170万年前的元谋人

奴隶社会

公元前16世纪至公元前11世纪的商朝，是奴隶社会的发展时期。商朝的农业、手工业较发达，青铜冶炼和铸造有很高水平。中国有文字可考的历史是从商朝开始的。商纣王统治时，周武王兴兵伐纣，商亡。

                                    <div class="ax-alert" theme="primary">
                                        <div wrapper>
                                            <div caption>原始社会</div>
                                            <div content>中国的原始社会，起自大约170万年前的元谋人</div>
                                        </div>
                                    </div>
                                    <div class="ax-break"></div>
                                    <div class="ax-alert" theme="error">
                                        <div wrapper>
                                            <div caption>奴隶社会</div>
                                            <div content>公元前16世纪至公元前11世纪的商朝，是奴隶社会的发展时期。商朝的农业、手工业较发达，青铜冶炼和铸造有很高水平。中国有文字可考的历史是从商朝开始的。商纣王统治时，周武王兴兵伐纣，商亡。</div>
                                        </div>
                                    </div>

使用小图标

以下例子展示小图标效果，注意查看html结构。

中国的原始社会，起自大约170万年前的元谋人

奴隶社会

                                    <div class="ax-alert" theme="error">
                                        <i class="ax-iconfont ax-icon-close-o-f" icon></i>
                                        <span content>中国的原始社会，起自大约170万年前的元谋人</span>
                                    </div>
                                    <div class="ax-break"></div>
                                    <div class="ax-alert" theme="warning">
                                        <i class="ax-iconfont ax-icon-warning-o-f" icon></i>
                                        <div wrapper>
                                            <div caption>奴隶社会</div>
                                            <div content>公元前16世纪至公元前11世纪的商朝，是奴隶社会的发展时期。商朝的农业、手工业较发达，青铜冶炼和铸造有很高水平。中国有文字可考的历史是从商朝开始的。商纣王统治时，周武王兴兵伐纣，商亡。</div>
                                        </div>
                                    </div>

使用大图标

在有图标前提下，对ax-alert追加notable类表示图标“突出显目”，注意查看html结构。

原始社会

中国的原始社会，起自大约170万年前的元谋人

奴隶社会

                                    <div class="ax-alert" theme="success" notable>
                                        <i class="ax-iconfont ax-icon-check-o-f" icon></i>
                                        <div wrapper>
                                            <div caption>原始社会</div>
                                            <div content>中国的原始社会，起自大约170万年前的元谋人</div>
                                        </div>
                                    </div>
                                    <div class="ax-break"></div>
                                    <div class="ax-alert" theme="question" notable>
                                        <i class="ax-iconfont ax-icon-question-o-f" icon></i>
                                        <div wrapper>
                                            <div caption>奴隶社会</div>
                                            <div content>公元前16世纪至公元前11世纪的商朝，是奴隶社会的发展时期。商朝的农业、手工业较发达，青铜冶炼和铸造有很高水平。中国有文字可考的历史是从商朝开始的。商纣王统治时，周武王兴兵伐纣，商亡。</div>
                                        </div>
                                    </div>

插件使用方法

如果需要对alert执行某些操作，比如更新内容、更换主题或者关闭打开等，此时则需要以插件的形式创建alert实例。插件运行方式有两种：

ax*属性：对ax-alert标签使用axAlert属性即可按默认参数运行插件。
js实例：通过new axAlert('#ID')方式创建实例运行。

直接把内容写在容器里。

HTML JS

                                    <div class="ax-alert" axAlert>直接把内容写在容器里。</div>
                                    <div class="ax-break"></div>
                                    <div class="ax-alert" axAlert="content:'把内容写在content参数里。'"></div>
                                    <div class="ax-break"></div>
                                    <div axAlert="content:'没有ax-alert类也能自己加上。'"></div>
                                    <div class="ax-break"></div>
                                    <div id="jsAlert"></div>

                                            new axAlert('#jsAlert', {
                                                content: '以js的方式创建一个告示。',
                                            });

创建复杂结构

创建复杂结构方式有两种：

alert节点内有html内容，使用wrapper、close、caption和content属性节点，按既定格式构建html节点。
alert节点内没有html内容，使用style、caption、content参数构建复杂结构。

复杂格式

按既定html结构即可初始化

                                <div class="ax-alert" axAlert>
                                    <i class="ax-iconfont ax-icon-check-o-f" icon></i>
                                    <div wrapper>
                                        <div caption>复杂格式</div>
                                        <div content>按既定html结构即可初始化</div>
                                    </div>
                                    <i close></i>
                                </div>
                                <div class="ax-break"></div>
                                <div class="ax-alert" axAlert="theme:'danger',icon:'ax-icon-check-o-f',style:'complex',caption:'从参数创建内容',content:'把内容写在content参数里。',closable:true"></div>

变量和操作方法

本插件有系列内部成员变量和内部操作方法，用户根据这些变量和方法可以自由操作实例，据此可方便与其他组件进行交互。请按下F12按键打开浏览器控制台来观摩以下实例。

内部成员变量如下：

this.shown：浮层显示状态，true或false
this.destroyed：是否销毁状态，true或false
this.targetDom：alert节点
this.wrapper：alert内的[wrapper]节点
this.content：alert内的[content]节点
this.caption：alert内的[caption]节点
this.icon：alert内的[icon]节点
this.close：alert内的[close]节点

内部操作方法如下：

this.update(setting, callback)：更新所有参数，支持两个参数：

setting：必填项，对象类型，用户自定义的参数
callback：选填项，回调函数，无参数：

this.updateContent(html, callback)：更新文本内容，支持两个参数：

html：必填项，字符串类型，更新的内容，支持html标签代码
callback：选填项，回调函数，无参数：

this.show(callback)：显示alert，支持一个参数即callback回调，回调函数无参数。
this.hide(callback)：隐藏alert，支持一个参数即callback回调，回调函数无参数。
this.destroy(callback)：销毁实例，支持回调函数，回调无参数：

全局操作方法如下：

axInstance：每个new实例都会自动加入到全局实例合集当中，通过该方法可获取实例，继而使用实例的内部变量和内部操作方法。关于axInstance使用方法请点击这里。

在回调函数中this均指向实例本身，所以在回调函数中通常可使用如下变量：

this：实例本身
this.targetDom：实例的Dom
this.options：实例的参数

隐藏和打开

使用closable参数显示关闭按钮，点击关闭按钮可隐藏alert；或者通过其他独立的按钮，使用this.hide()方法隐藏；另外可使用this.show()方法再次显示alert。

隐藏显示

HTML JS

                                            <div id="insHide"></div>
                                            <div class="ax-break"></div>
                                            <a href="###" class="ax-btn ax-primary" id="btnHide">隐藏</a>
                                            <a href="###" class="ax-btn ax-primary" id="btnShow">显示</a>

                                            let insHide = new axAlert('#insHide', {
                                                content: '可关闭的告示。',
                                                closable: true,
                                            }),
                                                btnHide = document.querySelector('#btnHide'),
                                                btnShow = document.querySelector('#btnShow');
                                            btnHide.onclick = () => {
                                                insHide.hide();
                                            }
                                            btnShow.onclick = () => {
                                                insHide.show();
                                            }

更新内容

使用this.updateContent(html,callback)方法可更新alert内容。

更新内容

HTML JS

                                    <div id="insContent"></div>
                                    <div class="ax-break"></div>
                                    <a href="###" class="ax-btn ax-primary" id="btnContent">更新内容</a>

                                            let insContent = new axAlert('#insContent', {
                                                content: '伟大的中国。',
                                            }),
                                                btnContent = document.querySelector('#btnContent');
                                            btnContent.onclick = () => {
                                                insContent.updateContent('宏伟壮阔的的大中国。', () => {
                                                    console.log('更新了内容！')
                                                })
                                            }

更新参数

使用this.update(setting,callback)方法可更新alert参数包括内容。

更新参数

HTML JS

                                            <div id="insSetting"></div>
                                            <div class="ax-break"></div>
                                            <a href="###" class="ax-btn ax-primary" id="btnSetting">更新参数</a>

                                            let insSetting = new axAlert('#insSetting', {
                                                content: '伟大的中国。',
                                            }),
                                                btnSetting = document.querySelector('#btnSetting');
                                            btnSetting.onclick = () => {
                                                insSetting.update({
                                                    content: '宏伟壮阔的的大中国。',
                                                    theme: 'danger',
                                                    closable: true,
                                                    iconShow:true,
                                                }, () => {
                                                    console.log('更新了参数！')
                                                })
                                            }

清空内容

使用this.clear(callback)方法可清空alert内容，可通过this.init()再次初始化还原。

清空内容初始化

HTML JS

                                    <div id="insClear"></div>
                                    <div class="ax-break"></div>
                                    <a href="###" class="ax-btn ax-primary" id="btnClear">清空内容</a>
                                    <a href="###" class="ax-btn ax-primary" id="initClear">初始化</a>

                                            let insClear = new axAlert('#insClear', {
                                                content: '伟大的中国。',
                                            }),
                                                btnClear = document.querySelector('#btnClear'),
                                                initClear = document.querySelector('#initClear');
                                            btnClear.onclick = () => {
                                                insClear.clear(() => {
                                                    console.log('清空了内容！')
                                                })
                                            }
                                            initClear.onclick = () => {
                                                insClear.init();
                                            }

销毁实例

通过使用this.destroy(callback)方法销毁实例，支持回调函数，回调无参数；销毁后可通过init初始化重新启用。

销毁后将不能再使用关闭功能以及show、hide、update和updateContent方法。

销毁初始化

HTML JS

                                    <div id="insDestroy"></div>
                                    <div class="ax-break"></div>
                                    <a href="###" class="ax-btn ax-primary" id="btnDestroy">销毁</a>
                                    <a href="###" class="ax-btn ax-primary" id="btnInit">初始化</a>

            let insDestroy = new axAlert('#insDestroy', { content: '伟大的中国',closable:true }),
                btnDestroy = document.querySelector('#btnDestroy'),
                btnInit = document.querySelector('#btnInit');
            btnDestroy.onclick = function () {
                insDestroy.destroy(function () {
                    alert('销毁了实例！')
                });
            }
            btnInit.onclick = function () {
                insDestroy.init();
            }

在创建实例的时候会自动添加到全局实例合集当中；如果填写了实例名insName，那么可通过axInstance方法进行销毁实例。关于axInstance使用方法请点击这里。

销毁big实例销毁small实例查看实例合集重新启用

HTML JS

                                    <div axAlert='insName:"big",content:"big实例",closable:true'></div>
                                    <div class="ax-break"></div>
                                    <div class="ax-btn ax-primary" axAlert='insName:"small",content:"small实例",closable:true'></div>
                                    <div class="ax-break"></div>
                                    <a href="###" class="ax-btn ax-primary" id="destroyBig">销毁big实例</a>
                                    <a href="###" class="ax-btn ax-primary" id="destroySmall">销毁small实例</a>
                                    <a href="###" class="ax-btn ax-primary" id="viewAll">查看实例合集</a>
                                    <a href="###" class="ax-btn ax-primary" id="initAll">重新启用</a>

                                            let destroyBig = document.querySelector('#destroyBig'),
                                                destroySmall = document.querySelector('#destroySmall'),
                                                viewAll = document.querySelector('#viewAll'),
                                                initAll = document.querySelector('#initAll');
                                            destroyBig.onclick = function () {
                                                axInstance.destroy('big');
                                            }
                                            destroySmall.onclick = function () {
                                                axInstance.destroy('small');
                                            }
                                            viewAll.onclick = function () {
                                                //只查看有name的实例合集
                                                console.log(axInstance.data.filter(i => i.name && i.type === 'alert'));
                                            }
                                            initAll.onclick = function () {
                                                //重新初始化以启用
                                                let items = axInstance.data.filter(i => (i.name === 'big' || i.name === 'small') && i.type === 'alert');
                                                items.forEach(i => {
                                                    i.instance.init();
                                                });
                                            }

监听事件

本插件有若干监听方法，以on为关键字，参数中监听格式为：new instance({onShow:function(){}})；实例后监听格式是：instance.on('show',function(){})。在参数中监听和实例后监听效果相同。具体事件说明如下：

onInit 初始化后执行，无参数
onShow/show 打开窗口前执行，无参数
onHide/hide 窗口隐藏前执行，无参数
onUpdate/update 参数更新前执行，无参数
onUpdateContent/updateContent 内容更新后执行，无参数
onDestroy/destroy 销毁后执行，无参数

演示实例显示结果使用了console.log方法，请按下F12按键打开开发者工具中的“控制台”查看监听效果。

隐藏显示更新内容更新参数销毁初始化

HTML JS

                                            <div id="insOn"></div>
                                            <div class="ax-break"></div>
                                            <a href="###" class="ax-btn ax-primary" id="hideOn">隐藏</a>
                                            <a href="###" class="ax-btn ax-primary" id="showOn">显示</a>
                                            <a href="###" class="ax-btn ax-primary" id="contentOn">更新内容</a>
                                            <a href="###" class="ax-btn ax-primary" id="settingOn">更新参数</a>
                                            <a href="###" class="ax-btn ax-primary" id="destroyOn">销毁</a>
                                            <a href="###" class="ax-btn ax-primary" id="initOn">初始化</a>

                                            let insOn = new axAlert('#insOn', {
                                                content: '伟大的中国。',
                                                onInit: () => {
                                                    console.log('初始化了！')
                                                }
                                            }),
                                                hideOn = document.querySelector('#hideOn'),
                                                showOn = document.querySelector('#showOn'),
                                                settingOn = document.querySelector('#settingOn'),
                                                contentOn = document.querySelector('#contentOn'),
                                                destroyOn = document.querySelector('#destroyOn'),
                                                initOn = document.querySelector('#initOn');
                                            hideOn.onclick = () => {
                                                insOn.hide();
                                            }
                                            showOn.onclick = () => {
                                                insOn.show();
                                            }
                                            contentOn.onclick = () => {
                                                insOn.updateContent('宏伟壮阔的的大中国。');
                                            }
                                            settingOn.onclick = () => {
                                                insOn.update({
                                                    content: '宏伟壮阔的的大中国。',
                                                    theme: 'danger',
                                                    closable: true,
                                                    iconShow: true,
                                                });
                                            }
                                            destroyOn.onclick = () => {
                                                insOn.destroy();
                                            }
                                            initOn.onclick = () => {
                                                insOn.init();
                                            }
                                            insOn.on('hide', () => {
                                                console.log('隐藏了！')
                                            }).on('show', () => {
                                                console.log('显示了！')
                                            }).on('updateContent', () => {
                                                console.log('内容更新了！')
                                            }).on('update', () => {
                                                console.log('参数更新了！');
                                            }).on('destroy', () => {
                                                console.log('销毁了！')
                                            });

参数选项

                                insName: '',//实例名称，对axInstance有用
                                caption: '',//告示标题，html或纯文本
                                content: '',//告示内容，html或纯文本，可使用p和br标签
                                theme: 'warning',//主题风格，可填primary、secondary、success、danger、warning、info或light，默认warning主题
                                borderless: false,//是否显示边框，默认false显示，可选择true不显示
                                square: false,//是否是方角，默认false非方角即圆角，可选择true方角
                                className: '',//其他样式类，多个用英文逗号或空格分开
                                closable: false,//是否出现关闭按钮并可关闭，默认false不可关闭，可选择true可关闭
                                style: 'simple',//alert的结构风格，默认simple风格即只有一个DIV包裹；可选择complex风格，可实现带图标多行告示
                                icon: '',//图标class类，比如可填ax-icon-warning
                                iconShow: true,//是否显示图标，默认true显示，可选择false显示，当然如果icon参数为空也不会显示图标
                                notable: false,//是否凸显图标，默认false，可选择true凸显（大图标）
                                display: '',//显示的方式，相对display:none，可以填block、flex、inline-flex、inline或inline-block，如果不填将按容器自身的display方式显示
                                breakpoints: {},//使用断点以适配终端，详情查看ax-utils-other.php页面
                                onInit: '',//回调函数，初始化后执行，无参数
                                onShow: '',//回调函数，开始显示后执行，无参数
                                onHide: '',//回调函数，开始关闭后执行，无参数
                                onUpdate: '',//回调函数，参数更新后执行，无参数
                                onUpdateContent: '',//回调函数，内容更新后执行，无参数
                                onDestroy: '',//回调函数，销毁后执行，无参数

以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"