二、显示隐藏处理
含义:效果类似于jquery的toggle,如果它后面跟着的表达式为真值时则显示它所在的元素,为假值时则隐藏。
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>avalon-visible</title>
<style type="text/css">
div div{
width:260px;
height:100px;
}
div.d1{
background:red;
}
div.d2{
background:green;
}
div.d3{
background:blue;
}
</style>
<script type="text/javascript" src="../avalon.min.js"></script>
<script type="text/javascript">
avalon.ready(function(){
var vm = avalon.define({
$id:'text',
currentIndex:1,
isShowBox:false,
toggle:function(index){
vm.currentIndex=index;
}
});
setTimeout(function(){
vm.isShowBox=true;
},3000);
avalon.scan();
})
</script>
</head>
<body ms-controller="text">
<div ms-visible="isShowBox">
<button ms-click="toggle(1)">色块[red]</button>
<button ms-click="toggle(2)">色块[green]</button>
<button ms-click="toggle(3)">色块[blue]</button>
<div class="d1" ms-visible="currentIndex===1"></div>
<div class="d2" ms-visible="currentIndex===2"></div>
<div class="d3" ms-visible="currentIndex===3"></div>
</div>
</body>