avalon学习笔记ui篇-datepicker篇

最新推荐文章于 2024-09-16 07:14:29 发布

Lee_Lei0213

最新推荐文章于 2024-09-16 07:14:29 发布

阅读量190

点赞数

文章标签： ui

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

版权

一、介绍

　　首先avalon是我接触的第一个mvvm框架，angularjs也能实现基本同样的功能，但是老外的产物都是比较先进的，他们早已放弃在IE下摸爬滚打，作为大天朝的我们，还是必须要矜矜业业的伺候着IE6，这就是我为什么选择avalon，没用angularjs的原因。官方文档都是老写法，这让我忍不住深深的吐槽正美，好吧，维护一个框架是艰难的，正美加油吧。

二、日历插件篇datepicker

官方文档的参数：

<!DOCTYPE HTML>
<html>
<head>
<meta charset='utf-8'/>
<title>datepicker demo</title>
<script src='avalon.js'></script>
</head>
<body>
<div class="demo-show" ms-controller="demo">
<fieldset style="position: relative; z-index: 2">
<legend>默认配置的单日历框</legend>
<input ms-widget="datepicker"/>
<p>说明：默认情况下，日历显示方式从周一到周日，显示一个月份，输输入域不允许为空，点击next、pre切换月份时，默认切换一个月，并且不可通过下拉框切换月份和年份</p>
</fieldset>
<fieldset style="position: relative; z-index: 1">
<legend>默认配置的单日历框</legend>
<input ms-widget="datepicker" data-datepicker-allow-blank="true"/>
<p>说明：此demo配置allowBlank为true，使得输入域可以为空,与第一个demo做对比</p>
</fieldset>
<script>
require(["datepicker/avalon.datepicker"], function(avalon) {
var model = avalon.define("demo", function(vm) {
})
avalon.scan();
})
</script>
</div>
</body>
</html>

1、首先avalonU使用了requireJS这个模块化管理工具

require(["引用的模块"],function(){
//具体代码
})

2、日历插件依赖了avalonjs和avalon.datepicker.js这两个模块，官方文档，将avalonjs，作为全局依赖的模块

<script src='avalon.js'></script>

avalon.datepicker.js模块的依赖

require(["datepicker/avalon.datepicker"],function(){
//在这里引用了avalon.datepicker模块
})

如果不将avalon设置为全局依赖的模块，那么写法就是

require(["avalon","avalon.datepicker"],function(){
//依赖了avalon.js和avalon.datepicker
})

3、在html引入即可

<input ms-widget="datepicker"/>

将这一行代码插入你所需要的地方，日历插件就会生效。

三、新写法

avalon更新过后，写法发生了一些改变，但是官方ui没有更新。

1、body部分

<head>
<script src='avalon.js'></script>
</head>
<body>
<div ms-controller="datebat">
<input ms-widget="datepicker"/>
</div>
</body>

2、script部分

<script>
1. require(["datepicker/avalon.datepicker"],function(avalon){
2. avalon.ready(function(){
3. var datemodule = avalon.define({
4. $id: 'datebat'
5. });
6. avalon.scan()
7. })
8. })
</script>