Content Table
2017-03-25

Semantic Ui 的 Behavior 和 Settings

学习 Semantic Ui 的时候，不少组件的文档里都有 behavior 和 settings，例如 Dimmer, Form Validation, Transition, Tab, Dropdown等，相信不少同学对 behavior 和 settings 应该怎么用摸不着头脑。

Behavior 就是行为，和函数是一回事，写个函数不就好了？但是 Semantic Ui 里偏偏不这样，而是传入 behavior 的名字，然后内部去调用。

Settings(设置) 更是不知道什么时候用啊，既然是设置，那么逻辑上就应该在 behavior 被调用之前先行设置好，这样在 behavior 被调用的时候才会生效，如果在 behavior 被调用后才使用 settings，那么就没有意义了。

从参数上就可以区分是 Settings 还是 Behavior:

  • Settings: 参数是一个 JSON 对象

  • Behavior: 第一个参数是一个字符串，behavior 的名字，后面是其他参数，例如

    1
    $('.dropdown').dropdown('set selected', 2);

下面就以 card 中使用 dimmer 为例，介绍 behavior 和 settings 的使用:

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">
    <link href="http://cdn.staticfile.org/semantic-ui/2.2.7/semantic.min.css" rel="stylesheet">
    <style media="screen">
        body {
            font-family: 'Arial';
            padding: 50px;
        }
        .dimmer {
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div class="ui two column grid">
        <div class="ui column">
            <div class="ui card" id="one">
                <div class="ui image dimmerable">
                    <img src="http://tupian.enterdesk.com/2016/gha/02/1902/02.jpg.200.150.jpg">
                    <div class="ui dimmer">
                        <div class="content">
                            <div class="center">天之道，损有馀而补不足，是故虚胜实，不足胜有馀。其意博，其理奥，其趣深。天地之像分，阴阳之侯烈，变化之由表，死生之兆章。</div>
                        </div>
                    </div>
                </div>
                <div class="extra content">九阴真经</div>
            </div>
        </div>

        <div class="ui column">
            <div class="ui card" id="two">
                <div class="ui image dimmerable">
                    <img src="http://tupian.enterdesk.com/2015/gha/12/1202/02.jpg.200.150.jpg">
                    <div class="ui dimmer">
                        <div class="content">
                            <div class="center">运气导行、移宫使劲的法门，悟性高者7年可成，差一点的14年才能练成。</div>
                        </div>
                    </div>
                </div>
                <div class="extra content">乾坤大挪移</div>
            </div>
        </div>

        <script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
        <script src="http://cdn.staticfile.org/semantic-ui/2.2.7/semantic.min.js"></script>
        <script>
            // 鼠标进入 dimmerable 上时显示 dimmer
            $(document).on('mouseenter', '.ui.dimmerable', function() {
                $('.ui.dimmer', this).dimmer('show');
            });

            // 鼠标离开 dimmerable 上时隐藏 dimmer
            $(document).on('mouseleave', '.ui.dimmerable', function() {
                $('.ui.dimmer', this).dimmer('hide');
            });

        </script>
</body>

</html>

页面显示时 dimmer 是隐藏起来的，当鼠标鼠标进入 dimmerable 上时响应 mouseenter 事件显示 dimmer: $('.ui.dimmer', this).dimmer('show')，其中 show 就是 dimmer 的 behavior（show 和 hide 是很多组件默认的 behavior），望文生义，使用 behavior dimmer('hide') 就是隐藏 dimmer，这就是 behavior 的使用。Dimmer 的 behavior 通过 dimmer() 函数来调用，Dropdown 的 behavior 通过 dropdown() 函数来调用，具体的参考帮助文档。

不过上面显示和隐藏 dimmer 的动画效果有些单调，阅读 dimmer 的帮助文档，可以看到 Settings 中有 transition（动画效果），不过 dimmer 文档的 Definition, Examples, Usage, Settings 中找遍了都没有看到介绍 transition 怎么使用呢。如果想用 drop 的动画效果显示 dimmer 应该怎么办呢？

1
$('.ui.dimmer', this).dimmer({transition: 'drop'}).dimmer('show');

上面的代码就是 settings 的使用，大家有没有注意到，settings 是一个 JSON 对象，作为 dimmer() 函数的参数，虽然 behavior 使用的时候也是使用 dimmer() 函数，但是参数是一个字符串，虽然函数是同一个，但通过参数的类型来判断使用的是 settings 还是 behavior。

Settings 有 2 种使用方式，局部的设置和全局的设置:

  • 局部设置: 上面的例子中就是使用了局部的 settings，只会对选择器匹配的元素生效，局部设置会覆盖全局设置。如下的代码分别对 #one 和 #two 中的 dimmer 使用不同的 settings:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    $(document).on('mouseenter', '#one .ui.dimmerable', function() {
        $('.ui.dimmer', this).dimmer({
            transition: 'drop',
            duration: 800,
            opacity: 0.2
        }).dimmer('show');
    });

    $(document).on('mouseenter', '#two .ui.dimmerable', function() {
        $('.ui.dimmer', this).dimmer({
            transition: 'scale',
            duration: 200
        }).dimmer('show');
    });

  • 全局设置: 使用 $.fn.dimmer.settings 进行 dimmer 的全局设置:

    1
    2
    3
    4
    5
    6
    7
    8
    $.fn.dimmer.settings.transition = 'vertical flip';
    $.fn.dimmer.settings.opacity = 0.3;
    $.fn.dimmer.settings.duration = 800;

    // 鼠标进入 dimmerable 上时显示 dimmer
    $(document).on('mouseenter', '.ui.dimmerable', function() {
        $('.ui.dimmer', this).dimmer('show');
    });

到此相信大家对 behavior 和 settings 的使用已经掌握的差不多了，至于每个组件都有哪些 behavior 和 settings，就需要大家花时间去阅读 Semantic Ui 的帮助文档了。