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

今天的主角是ms-visible，它的效果类拟于jQuery的toggle，如果它后面跟着的表达式为真值时则显示它所在的元素，为假值时则隐藏。不过显示不是 display:none这么简单，众所周知，display拥有inline, inline-block, block, list-item, table, table-cell等十来个值，比如用户之前是让此LI元素表示inline-block，实现水平菜单效果，你直接display:block就会撑破布局。因此元素之前是用什么样式显示，需要保存下来，当表达式转换为真值时再还原。

TODO supply a title

var vm = avalon.define({

$id: "test",

toggle: false,

array:[1,2,3,4]

})

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;

}

1111	1111
1111	1111

aaa	bbb
ccc	ddd

{{el}}

{{el+10}}

item

btn

这里用到ms-for循环指令及ms-click事件指令，语法与ng没有二致，不懂可以暂时忽略。

再看它能否处理内联样式的干扰：

TODO supply a title

var vm = avalon.define({

$id: "test",

toggle: true

})

div div{

flex:1;

margin: 20px;

height: 30px;

background: #a9ea00;

}

click me

我们再来一个有用的例子，做一个切换卡。

TODO supply a title

var vm = avalon.define({

$id: "test",

curIndex: 0, //默认显示第一个

buttons: ['aaa', 'bbb', 'ccc'],

panels: ["

面板1

", "

面板2

", " 面板3"]

})

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;

}

{{el}}