<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="avalon.js"></script>
<style>
*{ list-style:none; margin: 0;padding: 0; boder:0;}
.color_cs{ background: #ff9999; width: 400px; height: 400px;}
</style>
</head>
<body>
<div ms-controller="square" style=" background:#99ccff;">
<ul style=" width: 1500px; display: inline-block; ">
<li ms-repeat="model"><div style=" width: 200px; height: 200px; background: #66ffcc; margin: 10px 0 0 10px;float: left; display: block;" ms-click="remove($remove)" ms-mouseover="color_cs:color_change" >{{el}}</div></li>
</ul>
<div>
<input type="button" ms-click="add" value="add">
</div>
</div>
<script>
var i = 3;
avalon.define("square",function(vm){
vm.model = ["1 "," 2"," 3"];
vm.add = function (){
vm.model.push(vm.model[i] = [i+1]);/// push（）是avalon的添加事件
i++;
}
vm.remove = function(rm){///$remove是avalon 的删除事件，指定删除事件
rm();
};
});
</script>
</body>
</html>
1 <html>
2 <head>
3 <title>TODO supply a title</title>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <script src="avalon.js"></script>
7 <style>
8 *{ list-style:none; margin: 0;padding: 0; boder:0;}
9 .bb{ width: 200px; height: 200px; margin: 10px 0 0 10px; float: left; display: block}
10 .dd{ background: #ffcccc;}
11 </style>
12 </head>
13 <body>
14 <div style="background: #d1fcfb;" ms-controller="change">
15 <ul style=" width: 1500px;display: inline-block;"><li ms-repeat="model" ms-mouseover="bb(el)" ms-mouseout="cc(el)" ms-visible="!aa || el == aa" ><div class="bb" ms-class="dd:ff" >{{el}}</div></li></ul>
16 </div>
17 <script>
18 avalon.define("change",function(vm){
19 vm.model = ["1","2","3","4","5","6"];
20 vm.ff = false; //设置ff默认为false
21 vm.aa = ‘‘;
22 vm.bb = function(el){
23 if(vm.aa)
24 vm.aa = ‘‘;
25 else
26 vm.aa = el;
27 vm.ff = true; //当ff为ture时执行class的dd样式....因为ms-class目前不能直接写其他样式，只能写ms-css-width 和ms-css-height，所以
28 } //所以必须设置一个样式才能运行
29
30 vm.cc = function(el){
31 if(vm.aa)
32 vm.aa = ‘‘;
33 else
34 vm.aa = el;
35 vm.ff = false; //当ff为false是恢复原样
36 }
37
38
39 })
40 </script>
41 </body>
42 </html>
时间： 2024-10-19 01:44:30