Result 结果提示

基本说明

本框架一共定义了五种结果提示,分别是success,error,warning,info和question,该提示一般用操作结果反馈。

  • success 表示成功、结束、完成
  • error 表示错误、有问题
  • warning 表示提醒、注意、警告
  • info 表示信息提示、注意
  • question 表示疑问、求助

ax-result定义了结果提示,通过使用ax-successax-errorax-warningax-infoax-question表示不同结果提示,本演示效果使用了iconfont图标,复制可用。

                                <div class="ax-result ax-success"><i class="ax-iconfont ax-icon-check-o"></i></div>
                                <div class="ax-result ax-error"><i class="ax-iconfont ax-icon-close-o"></i></div>
                                <div class="ax-result ax-warning"><i class="ax-iconfont ax-icon-warning-o"></i></div>
                                <div class="ax-result ax-info"><i class="ax-iconfont ax-icon-info-o"></i></div>
                                <div class="ax-result ax-question"><i class="ax-iconfont ax-icon-question-o"></i></div>
                                <div></div>
                                <div class="ax-result ax-success"><i class="ax-iconfont ax-icon-check-o-f"></i></div>
                                <div class="ax-result ax-error"><i class="ax-iconfont ax-icon-close-o-f"></i></div>
                                <div class="ax-result ax-warning"><i class="ax-iconfont ax-icon-warning-o-f"></i></div>
                                <div class="ax-result ax-info"><i class="ax-iconfont ax-icon-info-o-f"></i></div>
                                <div class="ax-result ax-question"><i class="ax-iconfont ax-icon-question-o-f"></i></div>
                                <div></div>
                                <div class="ax-result ax-success"><i class="ax-iconfont ax-icon-check-o-t"></i></div>
                                <div class="ax-result ax-error"><i class="ax-iconfont ax-icon-close-o-t"></i></div>
                                <div class="ax-result ax-warning"><i class="ax-iconfont ax-icon-warning-o-t"></i></div>
                                <div class="ax-result ax-info"><i class="ax-iconfont ax-icon-info-o-t"></i></div>
                                <div class="ax-result ax-question"><i class="ax-iconfont ax-icon-question-o-t"></i></div>
                        

SVG动画提示

配合结果提示,本框架定制了对应的SVG结果动画图标,默认是隐藏,对svg添加ax-result-show可动画显示。基本结构如下:

                            
                             <div class="ax-result">
                                <svg class="svg-success"></svg>
                            </div>
                            
                             <div class="ax-result ax-result-show">
                                <svg class="svg-success"></svg>
                            </div>
                        
                                <div class="ax-result ax-result-show">
                                <svg class="svg-success" xmlns="http://www.w3.org/2000/svg" width="86.6986mm" height="86.6986mm" viewBox="0 0 86.6986 86.6986"><path class="svg-line svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path><path class="svg-line svg-out" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path><path class="svg-line svg-in-1" d="M26.316,42.859L37.9984,54.5414L60.3826,32.1572"></path></svg>
                               </div>
                               <div class="ax-result ax-result-show">
                                   <svg class="svg-error" xmlns="http://www.w3.org/2000/svg" width="86.6986mm" height="86.6986mm" viewBox="0 0 86.6986 86.6986"><path class="svg-line svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path><path class="svg-line svg-out" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path><path class="svg-line svg-in-1" d="M28.774,57.9246L57.9247,28.7739"></path><path class="svg-line svg-in-2" d="M57.9246,57.9246L28.7739,28.7739"></path></svg>
                               </div>
                               <div class="ax-result ax-result-show">
                                   <svg class="svg-warning" xmlns="http://www.w3.org/2000/svg" width="86.6986mm" height="86.6986mm" viewBox="0 0 86.6986 86.6986"><path class="svg-line svg-bg" d="M43.4611 7.24c2.8081,0.0924 4.39,1.7 5.3045,3.1159l17.4543 29.9414 17.3445 29.7538c0.5448,1.0193 1.596,4.0544 0.1109,6.4168 -1.4849,2.3626 -3.6815,2.9155 -5.3768,2.992l-34.9082 0.0002 -34.6892 -0.0002c-1.1636,-0.0421 -4.3433,-0.6583 -5.6666,-3.1131 -1.3232,-2.4549 -0.7085,-4.6157 0.0723,-6.1078l17.454 -29.9417 17.3449 -29.7537c0.6185,-0.977 2.7471,-3.396 5.5554,-3.3036z"></path><path class="svg-line svg-out" d="M43.4611 7.24c2.8081,0.0924 4.39,1.7 5.3045,3.1159l17.4543 29.9414 17.3445 29.7538c0.5448,1.0193 1.596,4.0544 0.1109,6.4168 -1.4849,2.3626 -3.6815,2.9155 -5.3768,2.992l-34.9082 0.0002 -34.6892 -0.0002c-1.1636,-0.0421 -4.3433,-0.6583 -5.6666,-3.1131 -1.3232,-2.4549 -0.7085,-4.6157 0.0723,-6.1078l17.454 -29.9417 17.3449 -29.7537c0.6185,-0.977 2.7471,-3.396 5.5554,-3.3036z"></path><path class="svg-line svg-in-1" d="M43.3493,27.8713L43.3493,57.2858"></path><circle class="svg-circle svg-in-2" cx="43.3492" cy="64.3337" r="2.1166"></circle></svg>
                               </div>
                               <div class="ax-result ax-result-show">
                                   <svg class="svg-info" xmlns="http://www.w3.org/2000/svg" width="86.6986mm" height="86.6986mm" viewBox="0 0 86.6986 86.6986"><path class="svg-line svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path><path class="svg-line svg-out" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path><path class="svg-line svg-in-1" d="M43.3493,65.0602L43.3493,30.9723"></path><circle class="svg-circle svg-in-2" cx="43.3492" cy="23.5856" r="2.1166"></circle></svg>
                               </div>
                               <div class="ax-result ax-result-show">
                                   <svg class="svg-question" xmlns="http://www.w3.org/2000/svg" width="86.6986mm" height="86.6986mm" viewBox="0 0 86.6986 86.6986"><path class="svg-line svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path><path class="svg-line svg-out" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path><path class="svg-line svg-in-1" d="M32.3757 35.7255c-0.2203,-11.823 12.5789,-14.1087 18.4056,-9.4189 5.4663,4.3995 4.7426,12.804 -3.1088,17.9938 -3.0015,1.9839 -3.0003,3.8403 -3.0003,10.1707"></path><circle class="svg-circle svg-in-2" cx="44.6612" cy="60.5502" r="2.1166"></circle></svg>
                               </div>
                       
  •                                         <div class="ax-result">
                                                <svg class="svg-success" viewBox="0 0 86.6986 86.6986">
                                                    <path class="svg-line svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path>
                                                    <path class="svg-line svg-out" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path>
                                                    <path class="svg-line svg-in-1" d="M26.316,42.859L37.9984,54.5414L60.3826,32.1572"></path>
                                                </svg>
                                            </div>
                                            <div class="ax-result">
                                                <svg class="svg-error" viewBox="0 0 86.6986 86.6986">
                                                    <path class="svg-line svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path>
                                                    <path class="svg-line svg-out" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path>
                                                    <path class="svg-line svg-in-1" d="M28.774,57.9246L57.9247,28.7739"></path>
                                                    <path class="svg-line svg-in-2" d="M57.9246,57.9246L28.7739,28.7739"></path>
                                                </svg>
                                            </div>
                                            <div class="ax-result">
                                                <svg class="svg-warning" viewBox="0 0 86.6986 86.6986">
                                                    <path class="svg-line svg-bg" d="M43.4611 7.24c2.8081,0.0924 4.39,1.7 5.3045,3.1159l17.4543 29.9414 17.3445 29.7538c0.5448,1.0193 1.596,4.0544 0.1109,6.4168 -1.4849,2.3626 -3.6815,2.9155 -5.3768,2.992l-34.9082 0.0002 -34.6892 -0.0002c-1.1636,-0.0421 -4.3433,-0.6583 -5.6666,-3.1131 -1.3232,-2.4549 -0.7085,-4.6157 0.0723,-6.1078l17.454 -29.9417 17.3449 -29.7537c0.6185,-0.977 2.7471,-3.396 5.5554,-3.3036z"></path>
                                                    <path class="svg-line svg-out" d="M43.4611 7.24c2.8081,0.0924 4.39,1.7 5.3045,3.1159l17.4543 29.9414 17.3445 29.7538c0.5448,1.0193 1.596,4.0544 0.1109,6.4168 -1.4849,2.3626 -3.6815,2.9155 -5.3768,2.992l-34.9082 0.0002 -34.6892 -0.0002c-1.1636,-0.0421 -4.3433,-0.6583 -5.6666,-3.1131 -1.3232,-2.4549 -0.7085,-4.6157 0.0723,-6.1078l17.454 -29.9417 17.3449 -29.7537c0.6185,-0.977 2.7471,-3.396 5.5554,-3.3036z"></path>
                                                    <path class="svg-line svg-in-1" d="M43.3493,27.8713L43.3493,57.2858"></path>
                                                    <circle class="svg-circle svg-in-2" cx="43.3492" cy="64.3337" r="2.1166"></circle>
                                                </svg>
                                            </div>
                                            <div class="ax-result">
                                                <svg class="svg-info" viewBox="0 0 86.6986 86.6986">
                                                    <path class="svg-line svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path>
                                                    <path class="svg-line svg-out" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path>
                                                    <path class="svg-line svg-in-1" d="M43.3493,65.0602L43.3493,30.9723"></path>
                                                    <circle class="svg-circle svg-in-2" cx="43.3492" cy="23.5856" r="2.1166"></circle>
                                                </svg>
                                            </div>
                                            <div class="ax-result">
                                                <svg class="svg-question" viewBox="0 0 86.6986 86.6986">
                                                    <path class="svg-line svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path>
                                                    <path class="svg-line svg-out" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path>
                                                    <path class="svg-line svg-in-1" d="M32.3757 35.7255c-0.2203,-11.823 12.5789,-14.1087 18.4056,-9.4189 5.4663,4.3995 4.7426,12.804 -3.1088,17.9938 -3.0015,1.9839 -3.0003,3.8403 -3.0003,10.1707"></path>
                                                    <circle class="svg-circle svg-in-2" cx="44.6612" cy="60.5502" r="2.1166"></circle>
                                                </svg>
                                            </div>
                                            <div></div>
                                            <a href="###" class="ax-btn ax-btn-primary" id="get-svg-ani">点我动起来!</a>
                                            <a href="###" class="ax-btn" id="delete-svg-ani">取消</a>
                                            
  •                                             let btnAni = document.querySelector('#get-svg-ani'),
                                                    btnDelete = document.querySelector('#delete-svg-ani'),
                                                    svgAni = document.querySelector('#svg-ani');
                                                btnAni.onclick = function () {
                                                    svgAni.querySelectorAll('.ax-result').forEach(function (item) {
                                                        item.classList.add('ax-result-show');
                                                    });
                                                }
                                                btnDelete.onclick = function () {
                                                    svgAni.querySelectorAll('.ax-result').forEach(function (item) {
                                                        item.classList.remove('ax-result-show');
                                                    });
                                                }
                                            

SVG过渡

使用axResult(elem,state)函数可实现结果动态提示,实现从检查状态到结果的过渡,支持三种结果过渡:成功、失败、提示和问题。axResult函数有两个参数:

  • elem:是指ax-result的ID或者Dom
  • state:是指指定呈现的结果,可填:success、error、info和question
  •                                     <div class="ax-row ax-split">
                                            <div class="ax-col ax-col-6">
                                                <div class="ax-result" id="goSuccess">
                                                    <svg viewBox="0 0 86.6986 86.6986">
                                                        <path class="svg-line svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path>
                                                    </svg>
                                                </div>
                                                <div class="ax-break"></div>
                                                <a href="###" class="ax-btn ax-btn-primary" id="btnSuccess">过渡成功</a>
                                            </div>
                                            <div class="ax-col ax-col-6">
                                                <div class="ax-result" id="goError">
                                                    <svg viewBox="0 0 86.6986 86.6986">
                                                        <path class="svg-line svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path>
                                                    </svg>
                                                </div>
                                                <div class="ax-break"></div>
                                                <a href="###" class="ax-btn ax-btn-primary" id="btnError">过渡失败</a>
                                            </div>
                                            <div class="ax-col ax-col-6">
                                                <div class="ax-result" id="goInfo">
                                                    <svg viewBox="0 0 86.6986 86.6986">
                                                        <path class="svg-line svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path>
                                                    </svg>
                                                </div>
                                                <div class="ax-break"></div>
                                                <a href="###" class="ax-btn ax-btn-primary" id="btnInfo">过渡通知</a>
                                            </div>
                                            <div class="ax-col ax-col-6">
                                                <div class="ax-result" id="goQuestion">
                                                    <svg viewBox="0 0 86.6986 86.6986">
                                                        <path class="svg-line svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path>
                                                    </svg>
                                                </div>
                                                <div class="ax-break"></div>
                                                <a href="###" class="ax-btn ax-btn-primary" id="btnQuestion">过渡问题</a>
                                            </div>
                                        </div>
                                            
  •                                             let btnSuccess = document.querySelector('#btnSuccess');
                                                btnSuccess.onclick = function(){
                                                    axResult('#goSuccess','success');
                                                }
                                                let btnError = document.querySelector('#btnError');
                                                btnError.onclick = function(){
                                                    axResult('#goError','error');
                                                }
                                                let btnInfo = document.querySelector('#btnInfo');
                                                btnInfo.onclick = function(){
                                                    axResult('#goInfo','info');
                                                }
                                                let btnQuestion = document.querySelector('#btnQuestion');
                                                btnQuestion.onclick = function(){
                                                    axResult('#goQuestion','question');
                                                }
                                            

字符小提示

本提示图标并非iconfont或者图片,而是用纯html字符制作的,兼容性最强,使用最简单。更多特殊字符请参见特殊字符

  • 操作成功!
  • 操作错误!
  • 信息提示!
  • 警告!
  • 有问题?
                                    <li><i class="ax-ace ax-ace-success"></i> 操作成功!</li>
                                    <div class="ax-break"></div>
                                    <li><i class="ax-ace ax-ace-error"></i> 操作错误!</li>
                                    <div class="ax-break"></div>
                                    <li><i class="ax-ace ax-ace-info"></i> 信息提示!</li>
                                    <div class="ax-break"></div>
                                    <li><i class="ax-ace ax-ace-warning"></i> 警告!</li>
                                    <div class="ax-break"></div>
                                    <li><i class="ax-ace ax-ace-question"></i> 有问题?</li>