<head><meta charset="UTF-8"><title>avalon-class</title><script type="text/javascript" src="../avalon.min.js"></script><script type="text/javascript">avalon.ready(function () {avalon.define({$id:"ms-class",});avalon.scan();})</script><style>.aaa{color:blue;border:1px solid blue;}</style></head><body ms-controller="ms-class"><div ms-class="aaa" ms-class-1="bbb" ms-class-2="ccc">它的类名是 aaa bbb ccc</div><div ms-class-2="aaa" ms-class="bbb" ms-class-1="ccc">它的类名是 bbb ccc aaa</div><div ms-class="bbb" ms-class-1="aaa" ms-class-2="ccc">它的类名是bbb aaa ccc</div><div ms-class="xxx yyy zzz">它的类名是xxx yyy zzz</div><div ms-class="XXX YYY ZZZ:true">它的类名是XXX YYY ZZZ</div></body>
<head><meta charset="UTF-8"><title>avalon-class</title><script type="text/javascript" src="../avalon.min.js"></script><script type="text/javascript">avalon.ready(function () {var model = avalon.define({$id:"ms-class",toggle: true,click:function (e) {model.toggle = !model.toggle}});avalon.scan();})</script><style>.test{width: 100px;height: 100px;border: 1px solid red;color: red;-webkit-user-select: none;-moz-user-select: none;-o-user-select: none;user-select: none;}.aaa{color:blue;border:1px solid blue;}</style></head><body ms-controller="ms-class"><div class="test" ms-class="aaa:toggle" ms-click="click">点我</div><div ms-class="aaa" ms-class-1="bbb" ms-class-2="ccc">它的类名是 aaa bbb ccc</div><div ms-class-2="aaa" ms-class="bbb" ms-class-1="ccc">它的类名是 bbb ccc aaa</div><div ms-class="bbb" ms-class-1="aaa" ms-class-2="ccc">它的类名是bbb aaa ccc</div><div ms-class="xxx yyy zzz">它的类名是xxx yyy zzz</div><div ms-class="XXX YYY ZZZ:true">它的类名是XXX YYY ZZZ</div></body>
<head><meta charset="UTF-8"><title>avalon-activ-hover</title><script type="text/javascript" src="../avalon.min.js"></script><script type="text/javascript">avalon.ready(function () {var model = avalon.define({$id:"test",color:"red",toggle:true,changeToggle:function () {model.toggle=!model.toggle},swichColor:function () {model.color = model.color === "red" ? "blue" :"red"}});avalon.scan();})</script><style>.active{background: black;color: white;}.ms-class-test{background: green;width: 300px;height: 100px;border: 1px solid black;}.c-red{background: red;}.c-blue{background: blue;}</style></head><body ms-controller="test"><div ms-active="active">测试：active</div><div class="ms-class-test" ms-hover="c-{{color}}:toggle"></div><button ms-click="swichColor">点击我改变类名</button><button ms-click="changeToggle">点击我改变toggle</button></body>
<head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus?"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>avalon-attr</title> <script type="text/javascript" src="../avalon.min.js"></script> <script type="text/javascript"> avalon.ready(function(){ avalon.define({ $id:‘attr‘, textModel:"star", t1:true, age:20, r1:true, sex:"男", s1: true, c1: true, path:"http://hotel.qunar.com", id:"a01_chongqing", name:"a01_chongqing", src:"camel.png", title:"avalon is great" }); avalon.scan(); }) </script> </head> <body> <form ms-controller="attr"> <h2>布尔属性绑定（ms-attr-disabled，ms-attr-readonly）</h2> <label>姓名</label> <input ms-duplex="textModel" ms-attr-disabled="t1"/> <label>年龄</label> <input ms-duplex="age" ms-attr-readonly="r1"/> <label>性别</label> <div> <label><input type="radio" ms-duplex-string="sex" value="男"/>男</label> <label><input type="radio" ms-duplex-string="sex" value="女" />女</label> <br /> <label>工作</label> <select> <option value="IT" ms-attr-selected="s1">IT</option> <option value="销售">销售</option> <option value="产品">产品</option> </select> <br /> <label>兴趣爱好</label> <label><input type="checkbox" ms-attr-checked="c1" value="option1" />篮球</label> <label><input type="checkbox" ms-attr-checked="c1" value="option2" />足球</label> <label><input type="checkbox" value="option3" />羽毛球</label> <br /> <h2>字符串属性绑定（ms-attr-id，ms-attr-name，ms-attr-title，ms-src，ms-href，ms-attr-data-url）</h2> <a ms-href="{{path}}">酒店</a> <a ms-attr-id="{{id}}" ms-attr-name="{{name}}" ms-href="{{path}}/city/chongqing_city/">重庆酒店</a> <br /> <img ms-src="{{src}}" ms-attr-title="{{title}}" /> </div> </form>- </body>
原文：http://www.cnblogs.com/Zjingwen/p/4456490.html