avalon学习笔记ui篇-datepicker篇

一、介绍

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

二、日历插件篇datepicker

    官方文档的参数：

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

    1、首先avalonU使用了requireJS这个模块化管理工具
  1. require(["引用的模块"],function(){
  2. //具体代码
  3. })
    2、日历插件依赖了avalonjs和avalon.datepicker.js这两个模块，官方文档，将avalonjs，作为全局依赖的模块
  1. <script src='avalon.js'></script>
        avalon.datepicker.js模块的依赖
  1. require(["datepicker/avalon.datepicker"],function(){
  2. //在这里引用了avalon.datepicker模块
  3. })
        如果不将avalon设置为全局依赖的模块，那么写法就是
  1. require(["avalon","avalon.datepicker"],function(){
  2. //依赖了avalon.js和avalon.datepicker
  3. })
    3、在html引入即可
  1. <input ms-widget="datepicker"/>
    将这一行代码插入你所需要的地方，日历插件就会生效。
三、新写法
    avalon更新过后，写法发生了一些改变，但是官方ui没有更新。
    1、body部分
  1. <head>
  2.     <script src='avalon.js'></script>
  3. </head>
  4. <body>
  5.     <div ms-controller="datebat">
  6.         <input ms-widget="datepicker"/>
  7.     </div>
  8. </body>
    2、script部分
  1. <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. })
  2. </script>
四、使用avalonUI，所需要的准备工作
    1、引用avalonjs。
    2、引用对应UI，的avalonUI的js
    3、使用requirejs依赖模块,不过在avalon中，已经内置了amd模块。
    4、不要用老写法，说不定那天正美不开心，把老写法删了，那么就悲剧了。
    5、下载好avalonui，这个ui有点大。我还没找到优化方法。
    6、下载avalon。
    7、下载requirejs。
（如果打开过慢，或者打不开，原因你懂得。）

    





posted @ 2015-04-28 21:48  静文  阅读(531)  评论(0)  编辑  收藏  举报