首页 > 其他 > 详细

avalon视频学习笔记(四)

时间:2015-04-25 13:29:06      阅读:178      评论:0      收藏:0      [点我收藏+]
二、显示隐藏处理
    含义:效果类似于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,
  30. toggle:function(index){
  31. vm.currentIndex=index;
  32. }
  33. });
  34. setTimeout(function(){
  35. vm.isShowBox=true;
  36. },3000);
  37. avalon.scan();
  38. })
  39. </script>
  40. </head>
  41. <body ms-controller="text">
  42. <div ms-visible="isShowBox">
  43. <button ms-click="toggle(1)">色块[red]</button>
  44. <button ms-click="toggle(2)">色块[green]</button>
  45. <button ms-click="toggle(3)">色块[blue]</button>
  46. <div class="d1" ms-visible="currentIndex===1"></div>
  47. <div class="d2" ms-visible="currentIndex===2"></div>
  48. <div class="d3" ms-visible="currentIndex===3"></div>
  49. </div>
  50. </body>





avalon视频学习笔记(四)

原文:http://www.cnblogs.com/Zjingwen/p/4455738.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!