迷你MVVM框架 avalonjs 学习教程5、显示隐藏控制
今天的主角是ms-visible，它的效果类拟于jQuery的toggle，如果它后面跟着的表达式为真值时则显示它所在的元素，为假值时则隐藏。不过显示不是 display:none这么简单，众所周知，display拥有inline, inline-block, block, list-item, table, table-cell等十来个值，比如用户之前是让此LI元素表示inline-block，实现水平菜单效果，你直接display:block就会撑破布局。因此元素之前是用什么样式显示，需要保存下来，当表达式转换为真值时再还原。
这里说一些技术内幕。很早以前，我迷恋HTML5的一些新特性，使用一个叫hidden的新元素属性，但发现它的优先级太低了，最终放弃。也尝试使用过一个“display:none!important”的类名实现隐藏，不过如果元素本来就是隐藏，我就无法实现显示了，因此也放弃了。
再说，想再得元素在没隐藏的样式也没有这么轻松，我们首先判断它是否display:none，否就可以立即保存当前display值，是就先通过另一种方式隐藏它，将元素的display置为空字符串，取得display值，然后还原。
"visible": function(data, vmodels) {
var elem = avalon(data.element)
var display = elem.css("display")
if (display === "none") {
var style = elem[0].style
var visibility = elem.css("visibility")
style.display = ""
style.visibility = "visible"
data.display = elem.css("display")
style.visibility = visibility
} else {
data.display = display
}
parseExprProxy(data.value, vmodels, data)
},
先来一个直观的例子：
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="avalon.js"></script>
<script >
var model = avalon.define({
$id: "test",
toggle: false,
array:[1,2,3,4]
})
setTimeout(function() {
model.toggle = true
}, 3000) </script>
<style>
table{
width:300px;
border-collapse: collapse;
border:1px solid red;
}
td {
padding:5px;
border:1px solid red;
}
.menu{
display:inline-block;
*display:inline;
*zoom:1;
width:140px;
padding:5px 20px;
text-align: center;
margin-left:1em;
border: 1px solid greenyellow;
}
.btn{
padding:5px 20px;
margin-left:1em;
display: inline-block;
}
</style>
</head>
<body ms-controller="test" >
<table ms-visible="toggle" border="1" >
<tr><td>1111</td><td>1111</td></tr>
<tr><td>1111</td><td>1111</td></tr>
</table>
<br/>
<table border="1" >
<tr><td ms-visible="toggle">test</td><td>2222</td></tr>
<tr><td>2222</td><td>2222</td></tr>
</table>
<table border="1" >
<tr ms-repeat="array"><td ms-visible="toggle">{{el}}</td><td ms-visible="toggle">{{el+10}}</td></tr>
</table>
<div style="display:none" class="menu" ms-visible="toggle">item</div> <div style="display:none" class="menu" ms-visible="toggle">item</div>
<button style="display:none" class="btn" type="button" ms-visible="toggle">btn</button>
<button style="display:none" class="btn" type="button" ms-visible="toggle">btn</button>
</body>
</html>
上面提到表达式，是指属性值可以存在加减乘除运算与函数。我们再看以下例子：
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="avalon.js"></script>
<script >
var model = avalon.define({
$id: "test",
num:5
})
</script> </head>
<body ms-controller="test" >
<div ms-visible="10 - num > 0">{{num}}</div>
<input data-duplex-event="change" ms-duplex="num">
</body>
</html>
最后我们做一个实用的例子——切换卡——来结束本章节吧。
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="avalon.js"></script>
<script >
var model = avalon.define({
$id: "test",
currentIndex: 0,
toggle: function(index) {
model.currentIndex = index
}
})
</script>
<style>
button{
width:150px;
height:30px;
line-height: 30px;
text-align: center;
}
.ms-tabs{
border:1px solid violet;
width: 430px;
padding:5px;
height: 200px;
}
</style> </head>
<body ms-controller="test" >
<button ms-click="toggle(0)">触发器1</button>
<button ms-click="toggle(1)">触发器2</button>
<button ms-click="toggle(2)" >触发器3</button>
<div class="ms-tabs" ms-visible="currentIndex === 0">切换卡1<br/>其他内容</div>
<div class="ms-tabs" ms-visible="currentIndex === 1">切换卡2<br/>及司徒正美</div>
<div class="ms-tabs" ms-visible="currentIndex === 2">切换卡3<br/>最后一个了</div>
</body>
</html>
迷你MVVM框架 avalonjs 学习教程5、显示隐藏控制的更多相关文章
- 迷你MVVM框架 avalonjs 学习教程19、avalon历史回顾
avalon最早发布于2012.09.15,当时还只是mass Framework的一个模块,当时为了解决视图与JS代码的分耦,参考knockout开发出来. 它的依赖收集机制,视图扫描,绑定的命名d ...
- 迷你MVVM框架 avalonjs 学习教程18、一步步做一个todoMVC
大凡出名的MVC,MVVM框架都有todo例子,我们也搞一下看看avalon是否这么便宜. 我们先从react的todo例子中扒一下HTML与CSS用用. <!doctype html> ...
- 迷你MVVM框架 avalonjs 学习教程3、绑定属性与扫描机制
在MVVM框架中,你都会看到页面定了许多奇怪的属性,比如knockout的data-☆,angular的ng-☆,avalon的ms-☆,此外还有一些只写文本节点上的双花括号,它们统称为指令.ms-☆ ...
- 迷你MVVM框架 avalonjs 学习教程1、引入avalon
avalon是国内最强大的MVVM框架,没有之一,虽然淘宝KISSY团队也搞了两个MVVM框架,但都无疾而终.其他的MVVM框架都没几个.也只有外国人与像我这样闲的架构师才有时间钻研这东西.我很早之前 ...
- 迷你MVVM框架 avalonjs 学习教程11、循环操作
avalon是通过ms-repeat实现对一组数据的批量输出.这一组数据可以是一个数组,也可以是一个哈希(或叫对象).我们先从数组说起吧. 第二节就说,凡是定义在VM中的数组,如果没有以$开头或者没放 ...
- 迷你MVVM框架 avalonjs 学习教程4、数据填充
MVVM是前端的究极解决方案,你们可能用过jQuery,但那个写的代码不易维护:你们可以听过说requirejs与seajs,传说中的模块开发,加载器,但它们的最终目标是打包:你们可能听过unders ...
- 迷你MVVM框架 avalonjs 学习教程20、路由系统
SPA的成功离开不这三个东西,分层架构,路由系统,储存系统.分层架构是我们组织复杂代码的关键,这里特指MVVM的avalon:路由系统是将多个页面压缩在一个页面的关键:储存系统特指本地储存,是安全保存 ...
- 迷你MVVM框架 avalonjs 学习教程16、过滤器
avalon的过滤器是参考自angular与rivets.它也被称做管道文本过滤器,它的处理对象只能是文本(字符串),它只能用在文本绑定中,并且只能是双花括号形式.下面是各大家的过滤器比较: rive ...
- 迷你MVVM框架 avalonjs 学习教程2、模块化、ViewModel、作用域
一个项目是由许多人分工写的,因此必须要合理地拆散,于是有了模块化.体现在工作上,PM通常它这为某某版块,某某频道,某某页面.某一个模块,必须是包含其固有的数据,样式,HTML与处理逻辑.在jQuery ...
随机推荐
- PHP:第五章——字符串加密及校验函数
<?php header("Content-Type:text/html;charset=utf-8"); //1.md5——计算字符中的散列值 //对一段信息(Messag ...
- WebApi用Post的方式提交Json时，获取不到值或不进对应方法的问题
又是一个通宵,终于搞明白了. 被WebApi坑得好惨. 之前用各种方法Post上来,有时可以读到结构,但没值,有时直接就是一个Null,有时连方法都没进就跑了,只是来控制器里看了一下…… 最后好友说还 ...
- Mac iStat Menu 注册码
9185-4915-3252-3716-0000 1574-5977-7956-8062-0000 6015-5448-3282-4975-0000 9665-5955-6856-2071-0000 ...
- Nvidia Driver
https://www.if-not-true-then-false.com/2015/fedora-nvidia-guide/ https://javacodes.cn/322.html https ...
- Java中常用的日期操作方法
日常项目当中经常会用到操作日期,抽出时间总结了一下,欢迎和大家多多沟通学习,如有任何改进意见和建议,我的QQ是1243672,欢迎联系哦. /** * 日期操作类 * 开发公司:北京东达悦科技有限公司 ...
- linux磁盘分区格式化-fdisk命令工具
本文主要讲述使用fdisk工具对磁盘进行分区和格式化的方法 首先要明确分区是针对磁盘进行的操做,磁盘分区会创建分区表,类似vda,sda的是磁盘,vda1,sda1的是分区 1.查看磁盘分区状态 1. ...
- 博客（第0次作业）—— New Starting Point
一．最理想的师生关系是健身教练和学员的关系,在这种关系中你期望获得来自老师的那些帮助? 正如文章中所说,这些学员的想法得足够强烈, 他/她才会花钱去参加这样的健身活动,每一个来学习的学生, 都是想学 ...
- query更多的筛选用法
比较操作符$eq : = 写法:db.class0.find({age:{$eq:18}},{name:1,_id:0}); 查找年龄等于18$lt :<$lte : <=$gt : & ...
- @Transactional、Spring的声明式事务
传送门 一.Spring的声明式事务 需要在xml文件中配置 <!--配置事务管理器类--> <bean id="transactionManager" clas ...
- org.springframework.orm.hibernate3.HibernateTemplate
当session中出现两个相同标示的(相同主键)的对象,一个是持久态,一个是瞬时态,想更新瞬时态对象到数据库,如果不做处理,则报出异常,session中出现两个相同标示的不同对象异常.处理方法.(业务 ...