zoukankan      html  css  js  c++  java
  • avalon学习笔记ui篇-如何将avalon默认的amd模型禁止,以及用require重写。

    一、如何禁止avalon自带的amd模型
    1、采用avalon.shim.js这个文件,这个文件删除了原本自带的amd模型,不需要手动删除,修改。
    2、打开avalon.js这个文件,搜索avalon.config,将true改为false。

    二,下载text.js和css.js
    1、因为avalonUI依赖了html文件和css文件。
    2、并且将text.js和css.js,在配置中预加载
    1. priority:['text','css']
    三、完整配置项
    1. require.config({
    2. //baseUrl:'',
    3. paths:{
    4. 'text':'../file/text',
    5. 'css':'../file/css',
    6. 'avalon':'../bower_components/avalon/avalon.shim',
    7. 'datepickers':'../file/datepicker/avalon.datepicker',
    8. 'notice':'../file/notice/avalon.notice'
    9. },
    10. priority:['text','css']
    11. })
    12. require(['../demo/datepicker/app/datepicker_demo'],function(){
    13. })
    四、目录结构
    1、基本所有UI我都下载了下来,所以文件有点大,file中是所有avalonUI组件
    五、html页面加载requirejs和data-main
    1. <script data-main="../../main/datepicker" defer async="true" type="text/javascript" src="../../bower_components/requirejs/require.js"></script>
    1、defer async="true"代表了异步加载,所以不用担心,渲染问题
    六、具体文件书写datepicker_demo
    1. define(['avalon','notice'],function(){
    2. var model = avalon.define("noticeDemo", function(vm) {
    3. vm.$bOpts = {
    4. header: "提示信息title",
    5. content: "提示信息content"
    6. }
    7. vm.changeHeader = function(id) {
    8. var vmodel = avalon.vmodels[id];
    9. vmodel.header = "new notice title"
    10. }
    11. vm.changeContent = function(id) {
    12. var vmodel = avalon.vmodels[id];
    13. vmodel.content = "new notice content, yeap !"
    14. }
    15. vm.toggleType = function(id) {
    16. var typeArr = ["info", "success", "error"];
    17. var noticeVM = avalon.vmodels[id];
    18. var index = Math.floor(Math.random()*3);
    19. noticeVM.type = typeArr[index];
    20. }
    21. vm.toggleNotice = function(id) {
    22. var noticeVm = avalon.vmodels[id];
    23. noticeVm.toggle = !noticeVm.toggle;
    24. }
    25. })
    26. avalon.scan();
    27. })
    七,出现错误以及解决方法
    1、问题
    看到一片404报错很正常,UI组件依赖了很多东西,所以要一一对应目录,进行删减。
    2、解决方法







  • 相关阅读:
    【成本管理】成本核算
    CW23:Work Log
    SQLSERVER数据库连接
    Oracle 创建用户 修改用户密码 授权命令
    CW24:WORK LOG
    ORA12560: TNS: 协议适配器错误的解决方法
    需求工程概述
    日语学习1:送气音和不送气音
    junit测试框架简单应用
    Java之Socket编程
  • 原文地址:https://www.cnblogs.com/Zjingwen/p/4477990.html
Copyright © 2011-2022 走看看