Framework7新版学习笔记之 滑动进度条

一:滑动进度条

滑动进度条是指:可以拖动来改变进度值的控件,例如:音量设置、亮度设置等。

二:定义滑动进度条

1:单边滑块进度条

滑块从0~max进行滑动,滑块所处位置就是进度值。

<div class="range-slider range-slider-init" id="进度条id">
       <input type="range" min="0" max="100" step="1" value="初始值">
</div>

2:双边滑块进度条(一般用于获得范围值)

进度条有两个滑块,进度值由 右边 减去 左边 得到。

 <div
          id="进度条id"
          class="range-slider range-slider-init color-green"
          data-label="true"
          data-dual="true"
          data-min="最小值"
          data-max="最大值"
          data-step="1"
          data-value-left="左边滑块初始值"
          data-value-right="右边滑块初始值">
</div>

三:在js中监听滑块变化事件,获取滑块值

1:单边滑块值

var slider = app.range.get(‘#进度条‘);

var range_value = slider.value;//获取进度值

2:双边滑块范围值

$$(‘#进度条‘).on(‘range:change‘, function (e, range) {
  var range_value = range.value[0] - range.value[1];
});

原文地址:https://www.cnblogs.com/ygj0930/p/8460641.html

时间: 2024-10-08 08:16:50

Framework7新版学习笔记之 滑动进度条的相关文章

Android学习笔记_76_Android ProgressBar 进度条

android 进度条的样式  例1:(默认样式(中等圆形))Xml代码 <ProgressBar      android:id="@+id/progressBar1"     android:layout_width="wrap_content"      android:layout_height="wrap_content"      /> 例2:(超大圆形)Xml代码 <ProgressBar      android

Framework7新版学习笔记之 进度条

一:定义进度条 <span data-progress="进度值" class="progressbar" id="进度条id" color-xx></span> 二:在js中改变进度值 app.progressbar.set('#进度条', 进度值); 三:无限加载进度条 <span class="progressbar-infinite color-multi"></span>

Framework7新版学习笔记之 数据表格

一:数据表格 F7旧版中还没有table布局,类似于表格的布局是通过row类.col-xx类模拟出来的. 在新版的F7中,推出了table布局,用于展示数据表格. 二:定义表格 <div class="data-table"> <table> <thead>//表格头:首行,定义了每列列名 <tr> <th class="列类型-cell">列名</th> ... </thead>

Framework7新版学习笔记之 自动补全输入框(AutoComplete)

一:自动补全输入框 我们可以定义一种具有自动补全功能的输入框,预先设定一些可选值作为自动补全内容.当用户输入可选值的部分内容时,就会在下面自动列出匹配的选项,点击即可自动填充对应的选项. 二:定义自动补全输入框 <div class="item-input-wrap"> <input id="autocomplete-dropdown" type="text" placeholder="提示文本"> &

Framework7新版学习笔记之 角标

一:角标 F7提供了一种微型控件--角标,常用语消息条数显示.点餐数量显示等. 二:使用角标 在需要添加角标的标签之间包含: ...<span class="badge color-xx">角标内容</span>... 原文地址:https://www.cnblogs.com/ygj0930/p/8460430.html

Framework7新版学习笔记之 升级版悬浮按钮

一:悬浮按钮 悬浮按钮是一种有着特殊UI效果的按钮,它看起来就像悬浮在界面之上一样. 悬浮按钮点击时通常会展开一系列的选项按钮,十分酷炫. 新版F7中的悬浮按钮不仅仅是Material Design特有了,而是一种通用的UI控件. 二:悬浮按钮种类 1)按照它在界面中的位置来分类: fab-right-bottom fab-center-bottom fab-left-bottom fab-right-center fab-center-center fab-left-center fab-ri

Framework7新版学习笔记之 时间轴

一:时间轴 新版F7提供了时间线组件,用于创建一种时间轴效果到UI控件. 二:分类 时间轴有三种样式:垂直时间轴.水平时间轴.日历时间轴. 三: 原文地址:https://www.cnblogs.com/ygj0930/p/8460647.html

Framework7新版学习笔记之 开关控件

一:开关控件 新版F7增加了开关控件,在界面中提供一个开关按钮,点击它进行 打开/关闭. 二:定义开关控件并自动初始化 <label class="toggle color-xx toggle-init"> <input type="checkbox"> <span class="toggle-icon"></span> </label> 三:在js中获取开关值 var toggle =

Framework7新版学习笔记之 Toast提醒

一:Toast 在Android中,Toast是用来进行一些短暂的消息提醒的. F7把这个效果进行了封装,用F7开发的app无论在ios还是android运行都可以使用toast效果了. 二:在js中创建Toast var toast = app.toast.create({ text: '提醒信息内容', closeTimeout: 消息停留时间, }); 更多风格的Toast:http://framework7.io/docs/toast.html 三:在js中控制Toast的显示 toas