Home > Others

Avalon Learning Notes UI Chapter-datepicker Chapter

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

First, Introduction

First Avalon is my first contact with the MVVM framework, ANGULARJS can also achieve the basic same function, but the products of foreigners are more advanced, they have already given up in IE, as the big celestial us, or must RTHK RTHK industry to serve the IE6, That's why I chose Avalon and didn't angularjs. Official documents are old wording, which makes me can not help but deep spit groove is beautiful, well, maintenance of a framework is difficult, is the United States refueling bar.

Second, calendar plugin Chapter DatePicker

Parameters for official documents:

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

1, first Avalonu use of REQUIREJS this modular management tool

 
   
  
    
  
    
   
  1. require(["引用的模块"],function(){
    2. 
  
    
   
  2. //具体代码
    3. 
  
    
   
  3. })
    4.
2.The Calendar plugin relies on the AVALONJS and avalon.datepicker.js two modules, the official document, which will be avalonjs as a globally dependent module 
 
   
  
    
  
    
   
  1. <script src=‘avalon.js‘></script>
    2.
dependency of the Avalon.datepicker.js module 
 
   
  
    
  
    
   
  1. require(["datepicker/avalon.datepicker"],function(){
    2. 
  
    
   
  2. //在这里引用了avalon.datepicker模块
    3. 
  
    
   
  3. })
    4.
        If Avalon is not set to a globally dependent module, then the notation is 
 
   
  
    
  
    
   
  1. require(["avalon","avalon.datepicker"],function(){
    2. 
  
    
   
  2. //依赖了avalon.js和avalon.datepicker
    3. 
  
    
   
  3. })
    4.
3, in the introduction of HTML can 
 
   
  
    
  
    
   
  1. <input ms-widget="datepicker"/>
    2.
Insert this line of code where you need it, and the calendar plugin will take effect.
Iii. new wording after the Avalon update, the wording changed, but the official UI was not updated.
1. HTML notation 
  
 
    
   
  
  1. 
  
  2. Basics.html
    3. 
   
  
  3. 
  
  4. <!DOCTYPE html>
    5. 
   
  
  5. 
  
  6. <html>
    7. 
   
  
  7. 
  
  8. <head lang="en">
    9. 
   
  
  9. 
  
  10.  <meta charset="UTF-8">
    11. 
   
  
  11. 
  
  12.  <title></title>
    13. 
   
  
  13. 
  
  14. </head>
    15. 
   
  
  15. 
  
  16. <body>
    17. 
   
  
  17. 
  
  18.  <div ms-controller="datebat">
    19. 
   
  
  19. 
  
  20.  <input ms-widget="datepicker"/>
    21. 
   
  
  21. 
  
  22.  </div>
    23. 
   
  
  23. 
  
  24. </body>
    25. 
   
  
  25. 
  
  26. <script src="bower_components/requirejs/require.js" data-main="Basicsmain.js" defer async="true"></script>
    27. 
   
  
  27. 
  
  28. </html>
    29.
2. JS notation 
 
   
  
    
  
    
   
  1. Basics.js
    2. 
  
    
   
  2. require([‘avalon‘,‘avalon-date‘],function(avalon){
    3. 
  
    
   
  3.  avalon.ready(function(){
    4. 
  
    
   
  4.  var datemodule = avalon.define({
    5. 
  
    
   
  5.  $id: ‘datebat‘
    6. 
  
    
   
  6.  });
    7. 
  
    
   
  7.  avalon.scan()
    8. 
  
    
   
  8.  })
    9. 
  
    
   
  9. })
    10.
3. Require configuration 
 
   
  
    
  
    
   
  1. //Basicsmain.js
    2. 
  
    
   
  2. require.config({
    3. 
  
    
   
  3.  paths : {
    4. 
  
    
   
  4.  ‘avalon‘ : ‘bower_components/avalon/min/avalon.min‘,
    5. 
  
    
   
  5.  ‘avalon-date‘ : ‘bower_components/avalononiui/datepicker/avalon.datepicker‘
    6. 
  
    
   
  6.  }
    7. 
  
    
   
  7. });
    8. 
  
    
   
  8. require([
    9. 
  
    
   
  9.  ‘app/Basics.js‘
    10. 
  
    
   
  10. ]);//require我不是很熟悉，希望大神不要吐槽，哈哈哈哈
    11.
Four, the use of Avalonui, the required preparation work 1, quoting Avalonjs.
2, reference the corresponding UI, the Avalonui JS
3, using Requirejs dependent module.
4, do not use the old wording, perhaps the day is not happy, the old wording deleted, then the tragedy. 5, download Good Avalonui, this UI is a bit large.    I haven't found the optimization method yet. 6. Download Avalon.
7, download Requirejs.
Gitcafe Code Address: Https://gitcafe.com/Zjingwen/demo.gitspecific location inDEMO/2015/4/28/thecalendaravalon, I slightly modified the following CSS effect a little different.
<---2015/4/28 to be continued--->




From for notes (Wiz)

Avalon Learning Notes UI Chapter-datepicker Chapter

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
chapter 7 chapter test b geometry walden chapter 1 all chapter books precalculus chapter 3 chapter 10 nervous system chapter 11 sociology cay chapter 16

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More