當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

avalon2学习教程04显示隐藏处理

發布時間：2023/12/20 编程问答 19 豆豆

生活随笔收集整理的這篇文章主要介紹了 avalon2学习教程04显示隐藏处理小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

<!DOCTYPE html> <html><head><title>TODO supply a 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: "test",toggle: false,array:[1,2,3,4]})</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 ms-visible="@toggle"><td>1111</td><td>1111</td></tr><tr><td>1111</td><td>1111</td></tr></table><br/><table border="1" ><tr ms-visible="@toggle"><td >aaa</td><td>bbb</td></tr><tr><td ms-visible="@toggle">ccc</td><td>ddd</td></tr></table><table border="1" ><tr ms-for="el in @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> <button style="display:none" class="btn" type="button" ms-visible="@toggle">btn</button> <p><input type="button" ms-click="@toggle = !@toggle" value="click me"></p></body> </html>

這里用到ms-for循環指令及ms-click事件指令，語法與ng沒有二致，不懂可以暫時忽略。

再看它能否處理內聯樣式的干擾：

我們再來一個有用的例子，做一個切換卡。

<!DOCTYPE html> <html><head><title>TODO supply a 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: "test",curIndex: 0, //默認顯示第一個buttons: ['aaa', 'bbb', 'ccc'],panels: ["<div>面板1</div>", "<p>面板2</p>", "<strong>面板3</strong>"]})</script><style>button{margin:1em 3em;}.panel div{height:200px;background: #a9ea00;}.panel p{height:200px;background: green;}.panel strong{display:block;width:100%;height:200px;background: #999;}</style></head><body ms-controller="test" ><div><button ms-for='(i, el) in @buttons' ms-click='@curIndex = i'>{{el}}</button></div><div class='panel' ms-for='(jj, el) in @panels' ms-visible='jj === @curIndex' ms-html='el'></div></body> </html>

總結

以上是生活随笔為你收集整理的avalon2学习教程04显示隐藏处理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

教程