开发手册 欢迎您!
软件开发者资料库

Framework7 - 进度条

Framework7进度条 - 从概述,环境,布局,导航栏,工具栏,搜索栏,状态栏,侧面板,内容块,布局网格,叠加层,预加载器,进度条,列表视图,手风琴,卡片,芯片,按钮开始学习Framework7 ,动作按钮,窗体,选项卡,Swiper滑块,照片浏览器,自动完成,选择器,日历,刷新,无限滚动,消息,消息栏,通知,延迟加载,颜色主题,细线,模板概述,自动编译,Template7页面,活动状态,点击保持事件,触摸波纹。

描述

进度条可用于向用户显示资产加载或任务进度.您可以使用进度条类指定进度条.当用户不知道请求的加载过程需要多长时间时,您可以使用 progressbar-infinite 类.

进度条JavaScript API

进度条可以与JavaScript API一起使用,以指定 show hide progress 属性使用以下方法 :

S .No方法描述&安培;参数
1 myApp.setProgressbar(容器,进度,速度)

它设置任务进度的进度条.

  • 容器 : 它是一个字符串或HTML元素,用于定义进度条元素的容器.

  • 进度 : 它以整数格式表示,并定义任务的进度.

  • 速度 : 它以整数格式表示,并指定任务进度的持续时间.

2 myApp.hideProgressbar(包含呃)

它隐藏了进度条.

  • 容器 : 它是一个字符串或HTML元素,用于定义进度条元素的容器.

3 myApp.showProgressbar(包含,进度,颜色)

显示进度条.

  • 容器 : 它是一个字符串或HTML元素,用于定义进度条元素的容器.

  • 进度 : 它以整数格式表示并定义任务的进度.

  • 速度 : 它以整数格式表示,并指定任务进度的持续时间.

示例

以下示例显示动画确定和不确定进度条,以指示Framework7中的活动 :

                           Progress Bar                                                                                                                                                      Progress Bar
                     
                                       Determinate Progress Bar                                                                        

Inline determinate progress bar:

                                                                                    

                                                                                             25%                                 50%                                 75%                                 100%                              

                                                                                 

Loads and hides the determinate progress bar:

                                                         

Start Loading

                                                                                 

Displays the determinate progress bar on top:

                           Start Loading

                                                                                       Infinite Progress Bar                                                                        

Inline infinite progress bar:

                                                      

                                                      

Displays the infinite progress bar in multiple colors:

                                                      

                                                      

Displays the infinite progress bar on top:

                                                      Start Loading

                                                      

Displays the infinite progress bar in multiple colors on top:

                                                      Start Loading

                                                                                       Different types of colored progress bars:                                             
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
                                                                                                                                    

输出

让我们执行以下步骤,看看上面给出的代码如何工作 : 去;

  • 将上面给出的HTML代码保存为服务器根文件夹中的 progress_bar.html 文件.

  • 将此HTML文件打开为http://localhost/progress_bar.html,输出显示如下.

  • 示例显示进度条,指示操作完成流程所需的时间,并显示不同类型的进度条以指示活动.