zoukankan      html  css  js  c++  java
  • 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,
    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>





  • 相关阅读:
    N皇后问题
    iPhone中自绘实现步骤
    ObjectiveC利用协议实现回调函数
    iphone实现双缓冲
    JAVA_内部类
    JAVA_ArrayList
    Ant入门
    JAVA_两种比较器的实现
    JAVA_继承内部类
    JAVA_序列化和反序列化
  • 原文地址:https://www.cnblogs.com/Zjingwen/p/4455738.html
Copyright © 2011-2022 走看看