Content Table
2017-03-16

Semantic Ui 进度条

Semantic Ui 使用 progress 来创建进度条，可以使用 data-percent 或者 data-value + data-total 两种方式计算及显示进度:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="http://cdn.staticfile.org/semantic-ui/2.2.7/semantic.min.js"></script>
    <link  href="http://cdn.staticfile.org/semantic-ui/2.2.7/semantic.min.css" rel="stylesheet">
    <style media="screen">
        body {
            padding: 20px;
        }
    </style>

</head>

<body>
    <!-- [1] 使用百分比的进度条 -->
    <div class="ui olive progress" data-percent="67" id="progress1">
        <div class="bar">
            <div class="progress"></div> <!-- 如果不想显示百分比，去掉这一行 -->
        </div>
    </div>
    <button class="ui secondary button decrease">Decrease</button>

    <div class="ui divider"></div>

    <!-- [2] 自定义完成度的进度条 -->
    <div class="ui purple progress" data-value="0" data-total="20" id="progress2">
        <div class="bar">
            <div class="progress"></div>
        </div>
        <div class="label">Adding Photos</div>
    </div>
    <button class="ui secondary button increase">Increase</button>

    <script type="text/javascript">
        $(document).ready(function() {
            // [3] 初始化进度条
            $('#progress1').progress();
            $('#progress2').progress({
                text: {active: '{value} of {total} done'}
            });

            // [4] 点击修改 progress1 的进度为 22%
            $('.decrease.button').click(function(event) {
                $('#progress1').progress({percent: 22});
            });

            // [5] 点就修改 progress2 完成了 20 个中的 7 个，百分比会自动计算
            $('.increase.button').click(function(event) {
                $('#progress2').progress({
                    value: 7,
                    text: {
                        active: '{value} of {total} done'
                    }
                });
            });
        });
    </script>
</body>

</html>

更多详细信息请参考 https://semantic-ui.com/modules/progress.html#/usage