迷你MVVM框架 avalonjs 學習教程五、顯示隱藏控制

時間 2019-11-13

標籤迷你 mvvm 框架 avalonjs 學習教程顯示隱藏控制简体版

原文原文鏈接

今天的主角是ms-visible，它的效果類擬於jQuery的toggle，若是它後面跟着的表達式爲真值時則顯示它所在的元素，爲假值時則隱藏。不過顯示不是 display:none這麼簡單，衆所周知，display擁有inline, inline-block, block, list-item, table, table-cell等十來個值，好比用戶以前是讓此LI元素表示inline-block，實現水平菜單效果，你直接display:block就會撐破布局。所以元素以前是用什麼樣式顯示，須要保存下來，當表達式轉換爲真值時再還原。javascript

這裏說一些技術內幕。很早之前，我迷戀HTML5的一些新特性，使用一個叫hidden的新元素屬性，但發現它的優先級過低了，最終放棄。也嘗試使用過一個「display:none!important」的類名實現隱藏，不過若是元素原本就是隱藏，我就沒法實現顯示了，所以也放棄了。css

再說，想再得元素在沒隱藏的樣式也沒有這麼輕鬆，咱們首先判斷它是否display:none，否就能夠當即保存當前display值，是就先經過另外一種方式隱藏它，將元素的display置爲空字符串，取得display值，而後還原。html

"visible": function(data, vmodels) {
    var elem = avalon(data.element)
    var display = elem.css("display")
    if (display === "none") {
        var style = elem[0].style
        var visibility = elem.css("visibility")
        style.display = ""
        style.visibility = "visible"
        data.display = elem.css("display")
        style.visibility = visibility
    } else {
        data.display = display
    }
    parseExprProxy(data.value, vmodels, data)
},

先來一個直觀的例子：java

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="avalon.js"></script>
        <script >
            var model = avalon.define({
                $id: "test",
                toggle: false,
                array:[1,2,3,4]
            })
            setTimeout(function() {
                model.toggle = true
            }, 3000)

        </script>
        <style>
            table{
                width:300px;
                border-collapse: collapse;
                border:1px solid red;
            }
            td {
                padding:5px;
                border:1px solid red;
            }
            .menu{
                display:inline-block;
                *display:inline;
                *zoom:1;
                width:140px;
                padding:5px 20px;
                text-align: center;
                margin-left:1em;
                border: 1px solid greenyellow;
            }
            .btn{
                padding:5px 20px;
                margin-left:1em;
                display: inline-block;
            }
        </style>
    </head>
    <body ms-controller="test" >
        <table ms-visible="toggle" border="1" >
            <tr><td>1111</td><td>1111</td></tr>
            <tr><td>1111</td><td>1111</td></tr>
        </table>
        <br/>
        <table border="1" >
            <tr><td ms-visible="toggle">test</td><td>2222</td></tr>
            <tr><td>2222</td><td>2222</td></tr>
        </table>
          <table border="1" >
            <tr ms-repeat="array"><td ms-visible="toggle">{{el}}</td><td ms-visible="toggle">{{el+10}}</td></tr>
        </table>
        <div style="display:none" class="menu" ms-visible="toggle">item</div>  <div style="display:none" class="menu" ms-visible="toggle">item</div>
        <button style="display:none" class="btn" type="button" ms-visible="toggle">btn</button> 
        <button style="display:none" class="btn" type="button" ms-visible="toggle">btn</button> 
    </body>
</html>

上面提到表達式，是指屬性值能夠存在加減乘除運算與函數。咱們再看如下例子：函數

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="avalon.js"></script>
        <script >
            var model = avalon.define({
                $id: "test",
                num:5
            })
        </script>

    </head>
    <body ms-controller="test" >
        <div ms-visible="10 - num > 0">{{num}}</div>
        <input data-duplex-event="change" ms-duplex="num">
    </body>
</html>

最後咱們作一個實用的例子——切換卡——來結束本章節吧。佈局

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="avalon.js"></script>
        <script >
            var model = avalon.define({
                $id: "test",
                currentIndex: 0,
                toggle: function(index) {
                    model.currentIndex = index
                }
            })
        </script>
        <style>
            button{
                width:150px;
                height:30px;
                line-height: 30px;
                text-align: center;
            }
            .ms-tabs{
                border:1px solid violet;
                width: 430px;
                padding:5px;
                height: 200px;
            }
        </style>

    </head>
    <body ms-controller="test" >
        <button ms-click="toggle(0)">觸發器1</button> 
        <button ms-click="toggle(1)">觸發器2</button>
        <button ms-click="toggle(2)" >觸發器3</button>
        <div class="ms-tabs" ms-visible="currentIndex === 0">切換卡1<br/>其餘內容</div>
        <div class="ms-tabs" ms-visible="currentIndex === 1">切換卡2<br/>及司徒正美</div>
        <div class="ms-tabs" ms-visible="currentIndex === 2">切換卡3<br/>最後一個了</div>
    </body>
</html>

相關標籤/搜索

每日一句

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