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

对于视图样式的更新,有以下两种方式:

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类.......

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值