首页 > 代码库 > 迷你MVVM框架 avalonjs 学习教程9、类名操作
迷你MVVM框架 avalonjs 学习教程9、类名操作
ms-class是avalon用得最多的几个绑定之一，也正因为如此其功能一直在扩充中。根据时期的不同，分为旧风格与新风格两种。
旧风格是指ms-class-xxx=”expr”，*ms-class-aaa-bbb=”expr”*。正如第三节《绑定属性与扫描机制》所讲，一个绑定属性分成三部分，第一部分是ms，第二部分是class，第三部分是第二个-之后的所有字符串，它们被称之为param。上面的xxx与aaa-bbb都是我们要处理里的类名。等号后面的expr是一个表达式，根据它们的真假值决定是添加或移除。不过旧风格的缺点非常明显
- 每个ms-class只能控制一个类名，如果有N个类名其实都是由同一个绑定属性控制的，也不得分开写。
- ms-class后面只能接受全部是小写的类名，因为在HTML 规范中，属性名都只能是小写，你就算大写了，它也会转换为小写 。
- 有些类名，我们想动态生成出来。
因此有了新风格一说。现在不推荐使用旧风格了，不过avalon还是非常有节操地继续支持它。
<!DOCTYPE html><html> <head> <title>旧风格</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <script src="http://www.mamicode.com/avalon.js"> </script> <script> var model = avalon.define({ $id: "ms-class", toggle: true, click: function(e) { model.toggle = !model.toggle } }) </script> <style> .test{ width:100px; height:100px; border:1px solid red; color:red; -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ -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> </body></html>
新风格的格式为ms-class=”class:expr”。其中ms-class也可以带第三个参数（因为属性名不能重要，因此需要加一点“杂质”骗过浏览器），但它只能是数值，根据它们的大小决定执行顺序（也见第三节的扫描机制部分），如ms-class-1=”aaa”,ms-class-2=”bbb”。新风格的属性值由冒号拆分两部分，第一部分是类名，类名中可以使用插值表达式（如ms-class=”width{{w}}: isOk”），第二部分是可选，不写（不写时冒号也不用写了）就默认是添加操作，写时就根据其计算结果决定是添加还是移除（如 者ms-class=”red:1+1”）。
<!DOCTYPE html><html> <head> <title>新风格</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <script src="http://www.mamicode.com/avalon.js"></script> <script> var model = avalon.define({ $id: "ms-class", toggle: true, click: function(e) { model.toggle = !model.toggle } }) </script> <style> .test{ width:100px; height:100px; border:1px solid red; color:red; -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ -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></html>
此外还有两个绑定，ms-active、 ms-hover。它们分别是用来摸拟:active, :hover效果，用法与ms-class一样，都分新旧风格。ms-active只在点击的那一瞬间有效果，ms-hover只在掠过时有效果，失去焦点或离开目标元素就会移除刚才添加的类名。
<!DOCTYPE html><html> <head> <title>ms-class</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://www.mamicode.com/avalon.js"></script> <style> .ms-class div{ display:inline-block; width:200px; height:100px; border: 1px solid black; } .active{ background: black; color: white; } .bgRed { background:palegoldenrod; } .hover{ background: red; color: white; } </style> <script type="text/javascript"> var model = avalon.define({ $id: "test", w: 500, h: 200, bottom: true, num: "00", className: "点我", changeClassName: function() { model.num = (100 * Math.random()).toFixed(0); model.className = this.className } }) </script> </head> <body ms-controller="test" class="ms-class"> <div ms-active="active" >测试:active</div> <div ms-hover="hover" >测试:hover</div> <div ms-class="bgRed width{{w}} height{{h}}" ms-css-width="h"> 类名通过插值表达式生成<br/> {{w}} * {{h}}<br/> <input data-duplex-event="change" ms-duplex="h"> </div> <p><button type="button" ms-class="test{{num}}" ms-click="changeClassName">{{className}}</button></p> </body></html>
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <script src="http://www.mamicode.com/avalon.js"></script> <script> var model = avalon.define({ $id: "test", color: "red", toggle: true, changeToggle: function() { model.toggle = !model.toggle }, switchColor: function() { model.color = model.color === "red" ? "blue" : "red" } }) </script> <style> .ms-class-test{ background:green; width:300px; height:100px; } .c-red{ background: red; } .c-blue{ background: blue; } </style> </head> <body ms-controller="test"> <div class="ms-class-test" ms-hover="c-{{color}}:toggle"> </div> <button ms-click="switchColor"> 点我改变类名</button> <button ms-click="changeToggle"> 点我改变toggle</button> </body></html>
ms-class、 ms-hover、 ms-active涵盖了所有与类名相应的需求，并且使用上比jQuery还简单。最后看一下用它实现斑马线的效果吧。
<!DOCTYPE html><html> <head> <title>ms-class</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <script src="http://www.mamicode.com/avalon.js"></script> <script> avalon.define({ $id: "test", array: avalon.range(0, 14) }) </script> <style> .zebra-table{ border-collapse: collapse; width:400px; border:1px solid black; } .zebra-table td{ border:1px solid black; text-indent: 1em; } .zebra-table .even td{ background:black; color:white; } .zebra-table .hover td{ color: red; font-weight: bolder; } </style> </head> <body ms-controller="test" > <table class="zebra-table"> <tr ms-repeat="array" ms-hover="hover" ms-class="even: $index % 2 == 0"><td>{{$index}}</td><td>{{ new Date - 0 | date("yyyy-MM-dd")}}</td></tr> </table> </body></html>
迷你MVVM框架 avalonjs 学习教程9、类名操作
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。