标签：style blog color io ar sp div on cti
<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>
标签：style blog color io ar sp div on cti
原文地址：http://www.cnblogs.com/yinglin/p/4036334.html
