首页 > 代码库 > 迷你MVVM框架 avalonjs 学习教程10、样式操作
迷你MVVM框架 avalonjs 学习教程10、样式操作
一般情况下我们通过设置类名就可以改变元素的样式，但涉及到动画部分，就一定需要设置内联样式了，因此有了ms-css。*ms-css*的用法为ms-css-样式名="样式值"， 如ms-css-width=”prop”(会自动补px)，ms-css-height=”{{prop}}%”, ms-css-color=”prop”, ms-css-background-color=”prop”, ms-css-font-size=”{{prop}}px”。细细联想，ms-css与ms-class的旧风格、ms-data、ms-attr的用法相仿，属性名接第三个参数作为name，属性值作为value。
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <script src="http://www.mamicode.com/avalon.js"></script> <script> var model = avalon.define({ $id: "test", background: "red" }) model.$watch("background", function(v) { model.background = v }) </script> </head> <body> <div ms-controller="test"> <div style="width:200px; height:50px" ms-css-background="background"> </div> <select ms-duplex="background"> <option value="http://www.mamicode.com/red">红</option> <option value="http://www.mamicode.com/yellow">黄</option> <option value="http://www.mamicode.com/green">绿</option> </select> </div> </body></html>
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://www.mamicode.com/avalon.js" ></script> <script> var model = avalon.define({ $id: "test", percent: 0 }) var a = true var id = setInterval(function() { if (a) { if (model.percent < 100) { model.percent++ } else { a = false } } else { if (model.percent > 0) { model.percent-- } else { a = true } } }, 100) </script> <style> .handerx{ width:20px; height:20px; position: absolute; color:#fff; background: #000; } .sliderx{ width:100%; height:20px; position: relative; } .body{ padding:40px; } </style> </head> <body ms-controller="test" class="body"> <div class="slider" style="background:red;"> <div class="handerx" ms-css-left="{{percent}}%" >{{percent}}</div> <div style="background: greenyellow;height:20px" ms-css-width="{{percent}}%"></div> </div> <div class="sliderx" style="background:#d2d2d2;"> <div style="background: #2FECDC;height:20px" ms-css-width="{{100-percent}}%"></div> </div> </body></html>
<!DOCTYPE html><html> <head> <title>ms-css</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script src="http://www.mamicode.com/avalon.js" ></script> <script> var vm = avalon.define({ $id: "test", w: 100, h: 100, click: function() { vm.w = parseFloat(vm.w) + 10; vm.h = parseFloat(vm.h) + 10; } }) </script> </head> <body> <div ms-controller="test"> <div style=" background: #a9ea00;" ms-css-width="w" ms-css-height="h" ms-click="click"></div> <p>{{ w }} x {{ h }}</p> <p>W: <input type="text" ms-duplex="w" data-duplex-event="change"/></p> <p>H: <input type="text" ms-duplex="h" /></p> </div> </body></html>
ms-css已经在内部帮你处理好兼容问题，如opacity在旧式IE下用滤镜替换， tranform的私有前缀添加什么的。最后要注意一点，属性值不能加入CSS hack与important!
迷你MVVM框架 avalonjs 学习教程10、样式操作
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。