avalon2學習教程07類名處理

時間 2019-11-10

標籤 avalon2 avalon 學習教程處理简体版

原文原文鏈接

avalon2的類名操做涉及到ms-class,ms-active,ms-hover，但用法也全變了，行爲相似於前兩節說的ms-attr,ms-css，目的是將相同行爲集中在一塊兒定義。javascript

因爲ms-class,ms-active, ms-hover語法很類似，咱們就以ms-class爲例吧。css

ms-class能夠對應vm中的一個字符串屬性，裏面能夠有空格（一個空格就是一個類名嘛）html

vm.classes = "aaa bbb ccc"
<div ms-class="@classes"></div>

顯然這不夠靈活，咱們有時須要在某個場合添加某類名，到另外一個場合就要移除它。因而從咱們React的classSet與Classnames插件中涉取靈感，讓它支持更復雜的數據型。好比布爾對象（鍵名爲類名，值爲布爾的對象，值決定是否添加與移除），還有一維數組，裏面能夠是null, 字符串，布爾，布爾對象，我會根據其真假值或布爾對象的值的真假，合併成一組類名。java

如下安利一下React的Classnames插件
https://github.com/JedWatson/classnamesgit

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

avalon2則是這樣用的github

<div ms-class="[@aaa, @bbb, {xxx:false, yyy: true, zzz: @toggle}, '222']"></div>

若是還不明白，能夠翻看avalon2的源碼，ms-class的自由度之高，絕對不遜於1.*的新舊風格！web

<!DOCTYPE html>
<html>
    <head>
        <title>新風格</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="./dist/avalon.js"></script>
        <script>
            var vm = avalon.define({
                $id: "ms-class",
                toggle: true,
                aaa: 'xxx',
                bbb: 'yyy',
                ccc: 'zzz'
            })
        </script>
        <style>
            .test{
                width:100px;
                height:100px;
                border:1px solid red;
                color:red;
                -webkit-user-select: none;  /* Chrome all / Safari all */
                -moz-user-select: none;     /* Firefox all */
                -ms-user-select: none;      /* IE 10+ */
                -o-user-select: none;
                user-select: none;          
            }
            .aaa{
                color:blue;
                border:1px solid blue;
            }
        </style>
    </head>
    <body ms-controller="ms-class">
        <div class="test" ms-class="{aaa:@toggle}" ms-click="@toggle = !@toggle">點我</div>
        <div  ms-class="'aaa bbb ccc'"> 它的名類是aaa bbb ccc   </div>
        <div  ms-class="[@aaa,@bbb,@ccc]" >  它的名類是xxx yyy zzz   </div>
        <div  ms-class="[@aaa, @toggle ? @bbb: @ccc]">  它的名類是xxx yyy  </div>
     

    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <title>ms-class</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="./dist/avalon.js"></script>
        <style>
            .ms-class div{
                display:inline-block;
                width:200px;
                height:100px;
                border: 1px solid  black;
            }
            .active{
                background: black;
                color: white;
            }
            .bgRed {
                background:palegoldenrod;
            }
            .hover{
                background: red;
                color: white;
            }
        </style>
        <script type="text/javascript">
            var vm = avalon.define({
                $id: "test",
                w: 500,
                h: 200,
                num: "00",
                className: "點我",
                changeClassName: function(e) {
                    vm.num = (100 * Math.random()).toFixed(0);
                    vm.className = e.target.className
                }
            })
        </script>
    </head>
    <body ms-controller="test" class="ms-class">
        <div ms-active="'active'" >測試:active</div>
        <div ms-hover="'hover'" >測試:hover</div>
        <div ms-class="['bgRed', 'width'+@w, 'height'+@h]" ms-css="{width: @h}">
            類名經過插值表達式生成<br/>
            {{@w}} * {{@h}}<br/>
            <input  ms-duplex="@h | change">
        </div>
        <p><button type="button" ms-class="'test'+@num" ms-click="@changeClassName">{{@className}}</button></p>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="./dist/avalon.js"></script>
        <script>
            var vm = avalon.define({
                $id: "test",
                color: "red",
                toggle: true,
    
                switchColor: function() {
                    vm.color = vm.color === "red" ? "blue" : "red"
                }
            })
        </script>
        <style>
            .ms-class-test{
                background:green;
                width:300px;
                height:100px;
            }
            .c-red{
                background: red;
            }
            .c-blue{
                background: blue;
            }
        </style>
    </head>
    <body ms-controller="test">
        <div class="ms-class-test" ms-hover="[@toggle ? 'c-'+@color: '']"> </div>
        <button ms-click="@switchColor"> 點我改變類名</button>
        <button ms-click="@toggle = !@toggle"> 點我改變toggle</button>
    </body>
</html>

ms-class、 ms-hover、 ms-active涵蓋了全部與類名相應的需求，而且使用上比jQuery還簡單。最後看一下用它實現斑馬線的效果吧。數組

<!DOCTYPE html>
<html>
    <head>
        <title>ms-class</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="./dist/avalon.js"></script>
        <script>
            avalon.define({
                $id: "test",
                array: avalon.range(0, 14)
            })
        </script>
        <style>
            .zebra-table{
                border-collapse: collapse;
                width:400px;
                border:1px solid black;
            }
            .zebra-table td{
                border:1px solid black;
                text-indent: 1em;
            }
            .zebra-table .even td{
                background:#ddd;
                color:white;
            }
             .zebra-table .hover td{
                color: red;
                font-weight: bolder;
            }
        </style>
    </head>
    <body ms-controller="test" >
        <table class="zebra-table">
            <tr ms-for="($index, el ) in @array" ms-hover="'hover'" ms-class="{even: $index % 2 == 0}">
                <td>{{$index}}</td>
                <td>{{ new Date - 0 | date("yyyy-MM-dd")}}</td>
            </tr>
        </table>
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。