欢迎光临
我们一直在努力

wind.js的使用方法.md

[TOC]

(一)wind.js到底是什么东西呢?

在知道它是什么东西之前?我们先看源码,分析如下,共四大部分,其中最后一部分是从phpwind中借鉴而来!

如果想更深入的了解,自己再分析分析代码即可!

1、core.js

官网:http://headjs.com
作用:
mark

2、head.css3

官网:http://headjs.com
作用:

mark

3、load.js

官网:http://headjs.com
作用:

mark

4、wind.js

说明:来源于 PHPWind核心JS
官网:http://headjs.com
作用:

mark

用来加载各种JS和CSS, 如图:

a.加载JS

mark

都有哪些呢?如下:

//定义常用JS组件别名,使用别名加载
alias     = {
    datePicker: 'datePicker/datePicker',
    jquery: 'jquery',
    colorPicker: 'colorPicker/colorPicker',
    tabs: 'tabs/tabs',
    swfobject: 'swfobject',
    imgready: 'imgready',

    //jquery util plugs
    ajaxForm: 'ajaxForm',
    cookie: 'cookie',
    treeview: 'treeview',
    treeTable: 'treeTable/treeTable',
    draggable: 'draggable',
    validate: 'jquery.validate/jquery.validate',
    'validate-extends': 'jquery.validate/additional-methods',
    artDialog: 'artDialog/artDialog',
    iframeTools: 'artDialog/iframeTools',
    xd: 'xd',//Iframe跨域通信

    noty: 'noty/noty',
    noty3: 'noty3/noty.min',
    jcrop: 'jcrop/js/jcrop',
    ajaxfileupload: 'ajaxfileupload',

    layer: 'layer/layer',
    plupload: 'plupload/plupload.full.min',

    echarts: 'echarts/echarts.min',
    viewer: 'viewer/viewer',
    colorpicker:'colorpicker/js/colorpicker',
    mousewheel: 'jquery.mousewheel/jquery.mousewheel.min',
    bootstrapDatetimePicker: 'bootstrap-datetimepicker/js/bootstrap-datetimepicker',
    dragula: 'dragula/dragula.min',
    imagesloaded: 'masonry/imagesloaded.pkgd.min',
    masonry: 'masonry/masonry.pkgd.min',
    ueditor:'ueditor/ueditor.all.min'
},

b.加载CSS

mark

都有哪些呢?如下:

//CSS路径
alias_css = {
    colorPicker: 'colorPicker/style',
    artDialog: 'artDialog/skins/default',
    datePicker: 'datePicker/style',
    treeTable: 'treeTable/treeTable',
    jcrop: 'jcrop/css/jquery.Jcrop.min',

    layer: 'layer/skin/default/layer',
    viewer: 'viewer/viewer',
    noty3: 'noty3/noty',
    colorpicker: 'colorpicker/css/colorpicker',
    animate: 'animate/animate',
    bootstrapDatetimePicker: 'bootstrap-datetimepicker/css/bootstrap-datetimepicker',
    dragula: 'dragula/dragula.min',
    ueditor:'ueditor/themes/default/css/ueditor'
};

(二)怎样使用 wind.js

1、定义全局变量

<script type="text/javascript">
    //全局变量
    var GV = {
        WEB_ROOT: "/",
        JS_ROOT: "static/js/"
    };
</script>

因为在该JS中引用了 WEB_ROOTJS_ROOT 这两个变量,因此我们需要先定义这两个变量,再引用 wind.js,如图:

mark

2、引入

<script src="/static/js/wind.js"></script>

完整使用如下:

<script type="text/javascript">
    //全局变量
    var GV = {
        WEB_ROOT: "/",
        JS_ROOT: "static/js/"
    };
</script>
<script src="/static/js/wind.js"></script>
未经允许不得转载:NewThink » wind.js的使用方法.md

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址