迷你MVVM框架 avalonjs 學習教程九、類名操做

時間  2019-11-13
標籤 迷你 mvvm 框架 avalonjs 學習 教程 简体版
原文   原文鏈接

ms-class是avalon用得最多的幾個綁定之一，也正由於如此其功能一直在擴充中。根據時期的不一樣，分爲舊風格與新風格兩種。javascript

舊風格是指ms-class-xxx=」expr」，*ms-class-aaa-bbb=」expr」*。正如第三節《綁定屬性與掃描機制》所講，一個綁定屬性分紅三部分，第一部分是ms，第二部分是class，第三部分是第二個-以後的全部字符串，它們被稱之爲param。上面的xxx與aaa-bbb都是咱們要處理裏的類名。等號後面的expr是一個表達式，根據它們的真假值決定是添加或移除。不過舊風格的缺點很是明顯css

  1. 每一個ms-class只能控制一個類名，若是有N個類名其實都是由同一個綁定屬性控制的，也不得分開寫。
  2. ms-class後面只能接受所有是小寫的類名，由於在HTML 規範中，屬性名都只能是小寫，你就算大寫了，它也會轉換爲小寫 。
  3. 有些類名，咱們想動態生成出來。

所以有了新風格一說。如今不推薦使用舊風格了，不過avalon仍是很是有節操地繼續支持它。html

<!DOCTYPE html>
<html>
    <head>
        <title>舊風格</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="avalon.js"> </script>
        <script>
            var model = avalon.define({
                $id: "ms-class",
                toggle: true,
                click: function(e) {
                    model.toggle = !model.toggle
                }
            })
        </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="click">點我</div>
    </body>
</html>

enter image description here

新風格的格式爲ms-class=」class:expr」。其中ms-class也能夠帶第三個參數（由於屬性名不能重要，所以須要加一點「雜質」騙過瀏覽器），但它只能是數值，根據它們的大小決定執行順序（也見第三節的掃描機制部分），如ms-class-1=」aaa」,ms-class-2=」bbb」。新風格的屬性值由冒號拆分兩部分，第一部分是類名，類名中可使用插值表達式（如ms-class=」width{{w}}: isOk」），第二部分是可選，不寫（不寫時冒號也不用寫了）就默認是添加操做，寫時就根據其計算結果決定是添加仍是移除（如 者ms-class=」red:1+1」）。java

<!DOCTYPE html>
<html>
    <head>
        <title>新風格</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="avalon.js"></script>
        <script>
            var model = avalon.define({
                $id: "ms-class",
                toggle: true,
                click: function(e) {
                    model.toggle = !model.toggle
                }
            })
        </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="click">點我</div>
        <div  ms-class="aaa"  ms-class-1="bbb"  ms-class-2="ccc"> 它的名類是aaa bbb ccc   </div>
        <div  ms-class-2="aaa" ms-class="bbb"  ms-class-1="ccc" >  它的名類是bbb ccc aaa   </div>
        <div  ms-class="bbb"  ms-class-1="aaa"  ms-class-2="ccc">  它的名類是bbb aaa ccc   </div>
        <div  ms-class="xxx yyy zzz" >  它的名類是xxx yyy zzz   </div>
        <div  ms-class="XXX YYY ZZZ:true" >  它的名類是XXX YYY ZZZ    </div>

    </body>
</html>

enter image description here

此外還有兩個綁定，ms-active、 ms-hover。它們分別是用來摸擬:active, :hover效果，用法與ms-class同樣，都分新舊風格。ms-active只在點擊的那一瞬間有效果，ms-hover只在掠過期有效果，失去焦點或離開目標元素就會移除剛纔添加的類名。git

<!DOCTYPE html>
<html>
    <head>
        <title>ms-class</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="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 model = avalon.define({
                $id: "test",
                w: 500,
                h: 200,
                bottom: true,
                num: "00",
                className: "點我",
                changeClassName: function() {
                    model.num = (100 * Math.random()).toFixed(0);
                    model.className = this.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 data-duplex-event="change" ms-duplex="h">
        </div>
        <p><button type="button" ms-class="test{{num}}" ms-click="changeClassName">{{className}}</button></p>
    </body>
</html>

enter image description here

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="avalon.js"></script>
        <script>
            var model = avalon.define({
                $id: "test",
                color: "red",
                toggle: true,
                changeToggle: function() {
                    model.toggle = !model.toggle
                },
                switchColor: function() {
                    model.color = model.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="c-{{color}}:toggle"> </div>
        <button ms-click="switchColor"> 點我改變類名</button> <button ms-click="changeToggle"> 點我改變toggle</button>
    </body>
</html>

enter image description here

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

<!DOCTYPE html>
<html>
    <head>
        <title>ms-class</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="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:black;
                color:white;
            }
             .zebra-table .hover td{
                color: red;
                font-weight: bolder;
            }
        </style>
    </head>
    <body ms-controller="test" >
        <table class="zebra-table">
            <tr ms-repeat="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>

enter image description here

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程