avalon视频学习笔记（七）

最新推荐文章于 2024-10-07 09:24:46 发布

Lee_Lei0213

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量137

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Zjingwen/p/4456490.html

版权

一、属性操作

DOM操作之属性操作：

1、类名操作<div class="active"> ms-class

（1）ms-class

a、ms-class="active" 默认写法，为元素添加active样式

b、ms-class="active:isOk" isOK值为true，添加active，为false，删除active

c、ms-class=“width{{w}}:isOK” 类名中可以使用插值表达式

d、ms-class="red:1+1" 根据计算结果决定添加或删除red

e、ms-class="aaa bbb ccc" 添加多个样式，结果是aaa bbb ccc

f、ms-class-1="aaa" ms-class-2="bbb" 添加多个样式，根据ms-class-后面的数值大小，决定执行顺序

g、ms-class-2="bbb" ms-class="aaa" ms-class-1="ccc" 添加多个样式，结果是aaa ccc bbb

h、ms-class="xxx yyy zzz:true" 添加多个样式，结果是xxx yyy zzz

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

（2）绑定属性ms-active，ms-hover

a、ms-active、ms-hover分别是用来模拟：avtice，：hover效果，用法与ms-class一样

b、ms-active只在点击的那那一瞬间有效果

c、ms-hover只在掠过时有效果，失去焦点或者离开目标元素就会移除刚才添加的类名

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

2、表单value属性操作<input value="active" /> ms-duplex

3、元素固有属性处理<div id="grid" name="grid"> ms-attr

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

4、元素自定义属性管理<div data-url="x.html"> ms-hred

5、元素布尔属性的操作<input readonly="true"> ms-src

来自为知笔记(Wiz)

转载于:https://www.cnblogs.com/Zjingwen/p/4456490.html