Framework7 - 进度条
说明
进度条可用于向用户显示资产加载或任务进度。您可以使用 progressbar 类指定进度条。当用户不知道请求的加载过程需要多长时间时,您可以使用 progressbar-infinite 类。
进度条 JavaScript API
进度条可以与 JavaScript API 一起使用,通过使用以下方法指定 show、hide 和 progress 属性 −
S.No | 方法 | 描述和参数 |
---|---|---|
1 | myApp.setProgressbar (container , progress, speed) | 设置任务进度的进度条。
|
2 | myApp.hideProgressbar (container) | 隐藏进度条。
|
3 | myApp.showProgressbar (contai ner, progress, color) | 它显示进度条。
|
示例
以下示例显示动画确定和不确定的进度条以指示 Framework7 中的活动 −
<!DOCTYPE html> <html> <head> <meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" /> <meta name = "apple-mobile-web-app-capable" content = "yes" /> <meta name = "apple-mobile-web-app-status-bar-style" content = "black" /> <title>Progress Bar</title> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" /> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" /> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css" /> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css" /> </head> <body> <div class = "views"> <div class = "view view-main"> <div class = "pages"> <div data-page = "home" class = "page navbar-fixed"> <div class = "navbar"> <div class = "navbar-inner"> <div class = "center">Progress Bar</div> </div> </div> <div class = "page-content"> <div class = "content-block-title">Determinate Progress Bar</div> <div class = "content-block"> <div class = "content-block-inner"> <p>Inline determinate progress bar:</p> <div class = "progressbar-inline"> <p><span data-progress = "10" class = "progressbar"></span></p> <p class = "buttons-row"> <a href = "#" data-progress = "25" class = "button button-raised">25%</a> <a href = "#" data-progress = "50" class = "button button-raised">50%</a> <a href = "#" data-progress = "75" class = "button button-raised">75%</a> <a href = "#" data-progress = "100" class = "button button-raised">100%</a> </p> </div> <p>Loads and hides the determinate progress bar:</p> <div class = "progressbar-load-hide"> <p><a href = "#" class = "button button-raised">Start Loading</a></p> </div> <p>Displays the determinate progress bar on top:</p> <p class = "progressbar-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p> </div> </div> <div class = "content-block-title">Infinite Progress Bar</div> <div class = "content-block"> <div class = "content-block-inner"> <p>Inline infinite progress bar:</p> <p><span class = "progressbar-infinite"></span></p> <p>Displays the infinite progress bar in multiple colors:</p> <p><span class = "progressbar-infinite color-multi"></span></p> <p>Displays the infinite progress bar on top:</p> <p class = "progressbar-infinite-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p> <p>Displays the infinite progress bar in multiple colors on top:</p> <p class = "progressbar-infinite-multi-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p> </div> </div> <div class = "content-block-title">Different types of colored progress bars:</div> <div class = "list-block"> <ul> <li class = "item-content"> <div class = "item-inner"> <div data-progress = "5" class = "progressbar color-red"></div> </div> </li> <li class = "item-content"> <div class = "item-inner"> <div data-progress = "10" class = "progressbar color-pink"></div> </div> </li> <li class = "item-content"> <div class = "item-inner"> <div data-progress = "20" class = "progressbar color-deeppurple"></div> </div> </li> <li class = "item-content"> <div class = "item-inner"> <div data-progress = "30" class = "progressbar color-blue"></div> </div> </li> <li class = "item-content"> <div class = "item-inner"> <div data-progress = "40" class = "progressbar color-cyan"></div> </div> </li> <li class = "item-content"> <div class = "item-inner"> <div data-progress = "50" class = "progressbar color-green"></div> </div> </li> <li class = "item-content"> <div class = "item-inner"> <div data-progress = "60" class = "progressbar color-lime"></div> </div> </li> <li class = "item-content"> <div class = "item-inner"> <div data-progress = "70" class = "progressbar color-amber"></div> </div> </li> <li class = "item-content"> <div class = "item-inner"> <div data-progress = "80" class = "progressbar color-deeporange"></div> </div> </li> <li class = "item-content"> <div class = "item-inner"> <div data-progress = "90" class = "progressbar color-gray"></div> </div> </li> <li class = "item-content"> <div class = "item-inner"> <div data-progress = "100" class = "progressbar color-black"></div> </div> </li> </ul> </div> </div> </div> </div> </div> </div> <script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script> <script> var myApp = new Framework7({ material: true }); var $$ = Dom7; $$('.progressbar-inline .button').on('click', function () { var progress = $$(this).attr('data-progress'); var progressbar = $$('.progressbar-inline .progressbar'); myApp.setProgressbar(progressbar, progress); }); $$('.progressbar-load-hide .button').on('click', function () { var container = $$('.progressbar-load-hide p:first-child'); //it doesn't load if another progresbar is loading if (container.children('.progressbar').length) return; myApp.showProgressbar(container, 0); var progress = 0; function simulateLoading() { setTimeout(function () { var progressBefore = progress; progress += Math.random() * 20; myApp.setProgressbar(container, progress); if (progressBefore < 100) { simulateLoading(); } else myApp.hideProgressbar(container); }, Math.random() * 200 + 200); } simulateLoading(); }); $$('.progressbar-overlay .button').on('click', function () { var container = $$('body'); if (container.children('.progressbar, .progressbar-infinite').length) return; myApp.showProgressbar(container, 0, 'orange'); var progress = 0; function simulateLoading() { setTimeout(function () { var progressBefore = progress; progress += Math.random() * 20; myApp.setProgressbar(container, progress); if (progressBefore < 100) { simulateLoading(); } //hides the progressbar else myApp.hideProgressbar(container); }, Math.random() * 200 + 200); } simulateLoading(); }); $$('.progressbar-infinite-overlay .button').on('click', function () { var container = $$('body'); if (container.children('.progressbar, .progressbar-infinite').length) return; myApp.showProgressbar(container, 'yellow'); setTimeout(function () { myApp.hideProgressbar(); }, 3000); }); $$('.progressbar-infinite-multi-overlay .button').on('click', function () { var container = $$('body'); if (container.children('.progressbar, .progressbar-infinite').length) return; myApp.showProgressbar(container, 'multi'); setTimeout(function () { myApp.hideProgressbar(); }, 3000); }); </script> </body> </html>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述 HTML 代码保存为服务器根文件夹中的 progress_bar.html 文件。
以 http://localhost/progress_bar.html 的形式打开此 HTML 文件,输出如下所示。
该示例显示进度条,指示操作完成过程需要多长时间,并显示不同类型的进度条以指示活动。