WUI v1.1.0

基础说明

开始使用 Getting Started
底层方法 基础支撑
页面元素 规范 / 公共类
模块规范 使用 / 扩展
常见问题 FAQ
更新日志

页面元素

布局 容器 / 栅格 / 后台布局
颜色 主题色 / 内置背景色
图标 字体图标
动画 内置 CSS3 动画
按钮 button 组
表单 form 元素集合
导航 菜单 / 面包屑
选项卡 Tabs 切换
进度条 progress
面板 折叠 / 手风琴
表格 静态 table
徽章 小圆点 / 小边框
时间线 timeline
区块 引用 / 字段集
文字 颜色 / 链接 / 位置
辅助 边距 / 填充 / 横线等

内置模块

弹出层 layer
日期与时间选择 wdate
分页 wpage
模板引擎 wtpl
数据表格 table
表单 form
文件上传 upload
穿梭框 transfer
树形组件 tree
颜色选择器 colorpicker
常用元素操作 element
滑块 slider
评分 rate
轮播 carousel
流加载 flow
工具集 util
简单编辑器 wedit
富文本编辑器 tinymce
下拉菜单 menu
拖动排序 dragsort
自动完成 autocomplete
代码修饰器 code
通知控件 notice
下拉多选控件 xmSelect
滑块验证 sliderVerify
无限级联选择器 cascader
进度条 - 页面元素

进度条可应用于许多业务场景,如任务完成进度、loading 等等,是一种较为直观的表达元素。
依赖加载组件:element




我们进度条提供了两种尺寸及多种颜色的显示风格,其中颜色的选值可参考:背景色公共类。基本元素结构如下
<div class="wui-progress">
    <div class="wui-progress-bar" w-percent="20%"></div>
</div>

<div class="wui-progress">
    <div class="wui-progress-bar wui-bg-orange" w-percent="50%"></div>
</div>

<div class="wui-progress" w-showPercent="true">
    <div class="wui-progress-bar wui-bg-blue" w-percent="80%"></div>
</div>

<div class="wui-progress wui-progress-big" w-showPercent="true">
    <div class="wui-progress-bar wui-bg-cyan" w-percent="30%"></div>
</div>

<div class="wui-progress wui-progress-big" w-showPercent="true" style="width:300px;">
    <div class="wui-progress-bar wui-bg-cyan" w-percent="30%"></div>
</div>

<script>
//注意进度条依赖 element 模块,否则无法进行正常渲染和功能性操作
wui.use('element', function(){
  var element = wui.element;
});
</script>
属性 w-percent :代表进度条的初始百分比,你也可以动态改变进度,详见:进度条的动态操作 进度条的动态操作

正如上述你见到的,当对元素设置了class为 wui-progress-big 时,即为大尺寸的进度条风格。默认风格的进度条的百分比如果开启,会在右上角显示,而大号进度条则会在内部显示。


通过对父级元素设置属性 w-showPercent="yes" 来开启进度比的文本显示,支持:普通数字、百分数、分数
<div class="wui-progress" w-showPercent="true">
  <div class="wui-progress-bar wui-bg-red" w-percent="1/3"></div>
</div>

<div class="wui-progress" w-showPercent="yes">
  <div class="wui-progress-bar wui-bg-red" w-percent="30%"></div>
</div>

<div class="wui-progress wui-progress-big" w-showPercent="yes">
  <div class="wui-progress-bar wui-bg-green" w-percent="50%"></div>
</div>
注意:默认情况下不会显示百分比文本,如果你想开启,对属性w-showPercent设置任意值即可,如:yes。但如果不想显示,千万别设置no或者false,直接剔除该属性即可。


如果短小细长的它不大适合追求激情与视觉冲击的你,那么你完全可以选择大而粗,尽情地销魂于活塞运动。研究表明:上述尺寸刚刚好。
<div class="wui-progress wui-progress-big">
  <div class="wui-progress-bar" w-percent="20%"></div>
</div>

<div class="wui-progress wui-progress-big">
  <div class="wui-progress-bar wui-bg-orange" w-percent="50%"></div>
</div>

<div class="wui-progress wui-progress-big" w-showPercent="true">
  <div class="wui-progress-bar wui-bg-blue" w-percent="80%"></div>
</div>
正如上述你见到的,当对元素设置了class为 wui-progress-big 时,即为大尺寸的进度条风格。默认风格的进度条的百分比如果开启,会在右上角显示,而大号进度条则会在内部显示。

如果你需要对进度条进行动态操作,如动态改变进度,那么你需要阅读:element 模块
<div class="wui-progress wui-progress-big" w-showpercent="true" w-filter="demo">
    <div class="wui-progress-bar wui-bg-red" w-percent="0%"></div>
</div>

<div class="site-demo-button" style="margin-top: 20px; margin-bottom: 0;">
    <button class="wui-btn site-demo-active" data-type="setPercent">设置50%</button>
    <button class="wui-btn site-demo-active" data-type="loading">模拟loading</button>
</div>

<script type="text/javascript">
    wui.use('element', function(){
        var $ = wui.jquery
        ,element = wui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块

        //触发事件
        var active = {
            setPercent: function(){
                //设置50%进度
                element.progress('demo', '50%')
            }
            ,loading: function(othis){
                var DISABLED = 'wui-btn-disabled';
                if(othis.hasClass(DISABLED)) return;

                //模拟loading
                var n = 0, timer = setInterval(function(){
                    n = n + Math.random()*10|0;
                    if(n>100){
                        n = 100;
                        clearInterval(timer);
                        othis.removeClass(DISABLED);
                    }
                    element.progress('demo', n+'%');
                }, 300+Math.random()*1000);

                othis.addClass(DISABLED);
            }
        };

        $('.site-demo-active').on('click', function(){
            var othis = $(this), type = $(this).data('type');
            active[type] ? active[type].call(this, othis) : '';
        });
    });
</script>
© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile