avalon视频学习笔记（四）

二、显示隐藏处理
    含义：效果类似于jquery的toggle，如果它后面跟着的表达式为真值时则显示它所在的元素，为假值时则隐藏。
  1.  <head>
  2.   <meta charset="UTF-8">
  3.   <meta name="Generator" content="EditPlus®">
  4.   <meta name="Author" content="">
  5.   <meta name="Keywords" content="">
  6.   <meta name="Description" content="">
  7.   <title>avalon-visible</title>
  8.   <style type="text/css">
  9. 	div div{
  10. 		width:260px;
  11. 		height:100px;
  12. 	}
  13. 	div.d1{
  14. 		background:red;
  15. 	}
  16. 	div.d2{
  17. 		background:green;
  18. 	}
  19. 	div.d3{
  20. 		background:blue;
  21. 	}
  22.   </style>
  23.   <script type="text/javascript" src="../avalon.min.js"></script>
  24.   <script type="text/javascript">
  25. 	avalon.ready(function(){
  26. 		var vm = avalon.define({
  27. 			$id:'text',
  28. 			currentIndex:1,
  29. 			isShowBox:false,
  31. 			toggle:function(index){
  32. 				vm.currentIndex=index;
  33. 			}
  34. 		});
  36. 		setTimeout(function(){
  37. 			vm.isShowBox=true;
  38. 		},3000);
  40. 		avalon.scan();
  41. 	})
  42.   </script>
  43.  </head>
  44.  <body ms-controller="text">
  45. 	<div ms-visible="isShowBox">
  46. 		<button ms-click="toggle(1)">色块[red]</button>
  47. 		<button ms-click="toggle(2)">色块[green]</button>
  48. 		<button ms-click="toggle(3)">色块[blue]</button>
  49. 		<div class="d1" ms-visible="currentIndex===1"></div>
  50. 		<div class="d2" ms-visible="currentIndex===2"></div>
  51. 		<div class="d3" ms-visible="currentIndex===3"></div>
  52. 	</div>
  53.  </body>





posted @ 2015-04-25 12:32  静文  阅读(156)  评论(0)    收藏  举报