标签：style blog http color io ar strong sp div
avalon是一个迷你的mvvm框架，兼容IE6，如果你只打算兼容IE10与标准浏览器，那么下avalon.modern.js。并且体积比较小，下面就举两个例子介绍avalon。
效果如下，点击add按钮可实现蓝色 方块的添加，并且方块上面的数字也有所增加，在方块上点击便可实现该对应的方块删除，点击delete按钮最末端的方块消失。
在head 部分导入avalon，并设定方块样式。
|
1
2
3
4
5
6
7
8
9
10
|
<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中代码
|
1
2
3
4
5
6
7
8
9
10
11
|
<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" /> <input type="button" ms-click="dd" value="delete" /> </div> </div> |
ms-controlles 设置作用域，就是设置avalon效果实现范围, 在avalon中，有两个绑定作用域的属性，分别是ms-controller, ms-important
ms-repeat 循环绑定,在例子中用于循环数组
{{el}} 显示数组内容
ms-click 为单击实现事件
$remove 为点击删除该指定元素事件，等于直接导入remove()方法
不但有点击事件的绑定属性，还有其他的属性,详情可点击这里
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
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();方法 i++; } vm.remove = function(rm){ // 点击指定方块删除 rm(); }; vm.dd = function(){ //点击删除事件 vm.model.pop(); //导入pop();方法 i--; } }); |
|
1
2
3
4
|
<div style="background: #d1fcfb;" ms-controller="change"> <ul style=" width: 1500px;display: inline-block;"><li ms-repeat="model" ms-click="bb(el)" ms-visible="!aa || el == aa" ><div class="bb" >{{el}}</div></li></ul> </div> |
ms-visible 用判断来显示和隐藏，ms-if也可以做出同样的效果，但是ms-if的作用是把不满足的元素删除，而ms-visible只是隐藏而已。
|
1
2
3
4
5
6
7
8
9
10
|
avalon.define("change",function(vm){ vm.model = ["1","2","3","4","5","6"]; //默认显示六个方块 vm.aa = ‘‘; //aa初始化状态，显示全部方块 vm.bb = function(el){ if(vm.aa) vm.aa = ‘‘; else vm.aa = el; //否则显示指定方块 } |
标签：style blog http color io ar strong sp div
原文地址：http://www.cnblogs.com/yinglin/p/4040955.html
