avalon对于视图样式的动态更新

来源：互联网发布：阿里云邮企业版登陆编辑：程序博客网时间：2024/05/05 21:48

对于视图样式的更新，有以下两种方式：

1、对css的指定属性进行更新

通过avalon中的ms-css-XXX属性，可以在ms-duplex更新vm对象值的的同时，实现对视图样式中指定属性的动态更新。

代码示例：

<div class="panel1" ms-css-width="weight"><input ms-duplex="weight"></input></div>

通过该段代码，实现通过input输入值的变化，动态改变div标签视图样式的width属性。

2、对标签所使用的css类进行更新

通过avalon中的ms-class属性，可以通过input等控件，动态改变指定标签所属的css类。从而使指定标签具有不同类所定义的不同css样式。

代码示例：

avalon代码：

<script>var model=avalon.define({$id:"test",style:"panel1",change_class:function(e){ model.style=model.style==="panel1"?"panel2":"panel1"}})

html代码：

  <body ms-controller="test"> <div ms-class="{{style}}" ></div><button ms-click="change_class">点我改变类名</button>           </body>

以上代码实现的功能是通过点击button控件，改变div标签的类。点一下变成panel1类，再点一下变成panel2类.......

0 0