jquery自动检测排查问题效果代码。
代码语言:html
所属分类:布局界面
代码描述:jquery自动检测排查问题效果代码。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> html, body { margin: 0; padding: 0; height: 100%; } body { background: #fff } .btn { display: inline-block; background: #6089fb; padding: 10px 17px; color: #fff; border-radius: 5px; cursor: pointer; margin: 50px; } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(238, 238, 238, 0.5); display: table; z-index: 100; } .modal .modal-content { font-family: 'Microsoft YaHei', sans-serif; display: table-cell; vertical-align: middle; text-align: center; } .modal .modal-content .check-box { display: inline-block; background: #fff; border: 1px solid #e0e0e0; box-shadow: 0 2px 15px #c4c4c4; padding: 60px; min-width: 400px; box-sizing: border-box; } .modal .modal-content .check-box .check-list { list-style: none; margin: 0; padding: 0; } .modal .modal-content .check-box .check-list li { padding: 0 50px; margin-bottom: 30px; font-size: 14px; line-height: 22px; color: #999; text-align: left; } .modal .modal-content .check-box .check-list li .check-icon { width: 22px; height: 22px; background: url("//repo.bfw.wiki/bfwrepo/image/6077e88c7aa7c.png") no-repeat center; color: #fff; display: block; float: left; margin-right: 23px; text-align: center; } .modal .modal-content .check-box .check-list li.checking { color: #ff8c00; } .modal .modal-content .check-box .check-list li.checking .check-icon { background: url("//repo.bfw.wiki/bfwrepo/image/6077e8b0cc79e.png") no-repeat left center; } .modal .modal-content .check-box .check-list li.checked { color: #666; } .modal .modal-content .check-box .check-list li.checked .check-icon { background: url("//repo.bfw.wiki/bfwrepo/image/6077e8629ccb9.png") no-repeat left center; } .modal .modal-content .check-box .check-list li .check-text { max-width: 300px; white-space: normal; overflow: hidden; display: block; word-break: break-all; } .modal .modal-content .check-box .check-bottom { padding-top: 12px; } .modal .modal-content .check-box .check-bottom .check-btn { display: inline-block; width: 100%; height: 36px; line-height: 36px; background: #e5e5e5; font-size: 16px; color: #aaa; text-align: center; border-radius: 5px; cursor: not-allowed; } .modal .modal-content .check-box .check-bottom .check-btn.active { background: #6089fb; color: #fff; cursor: pointer; } </style> </head> <body> <a class="btn" onClick="AutoCheck.run(checkConfig);">执行检测</a> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script> <script> (function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define([], factory); } else if (typeof exports === 'object') { // Node. Does not work with strict CommonJS, but // only CommonJS-like environments that support module.exports, // like Node. module.exports = factory(); } else { // Browser globals (root is window) root.AutoCheck = factory(); } }(this, function () { var Check = function (checkConfig) { this.id = 'autoCheckModal'; this.isShowFinalBtn = checkConfig['isShowFinalBtn'] === 'undefined'?true: checkConfig['isShowFinalBtn']; this.finalBtnText = checkConfig['finalBtnText']; this.checkList = checkConfig['checkList']; this.callback = checkConfig['callback']; this.curStep = 0; this.curStatus = 'checking'; this.isAutoRunCallback = checkConfig['isAutoRunCallback'] === 'undefined'?false: checkConfig['isAutoRunCallback']; this.timeGap = checkConfig['timeGap']; }; Check.prototype.run = function () { if (this.checkList && this.checkList instanceof Array && this.checkList.length > 0) { this.createHtml(); this.doCheck(); } }; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0