*

 *content seajs+easyui使用

 */

/**

 * 首先来看看在seajs中jquery和jquery插件如何使用

 */

1.jquery.js

define(function(require,exports,module)){

    //原jquery.js代码

    module.exports = $.noConflict(true);

}

2.jquery.combobox.js

依赖关系如下：

jquery.combobox.js    依赖 jquery.combo.js

jquery.combo.js       依赖 jquery.panel.js、jquery.validatebox.js

jquery.validatebox.js 依赖 jquery.tooltip.js

那怎么封装jquery.combobox.js及依赖的插件呢？

1)jquery.combobox.js

define(function(require,exports,module){

    return function($){

        require("plugins/jquery.combo");

        //插件代码

    }

});

2)jquery.combo.js

define(function(require, exports, module) {

    return function($) {

        require("plugins/jquery.validatebox")($);

        require("plugins/jquery.panel")($);

        //原jquery.combo.js代码

    }

});

3)jquery.validatebox.js

define(function(require, exports, module) {

    return function($) {

        require("plugins/jquery.tooltip")($);

        //原jquery.validatebox.js代码

    }

});

4)jquery.panel.js、jquery.tooltip.js

define(function(require, exports, module) {

    return function($) {

        //原jquery.validatebox.js/jquery.panel.js代码

        (function($){

            ......

        })(jQuery);

        //注意此处要把jQuery改为$,要不就在init.js中把实参改为jQuery

    }

});

/**

 * 相关实例

 */

a)index.html

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css"/>

    <link rel="stylesheet" type="text/css" href="themes/icon.css"/>

</head>

<body>

    <select id="sel_refresh">

        <option value="0">不刷新</option>

        <option value="60">1分钟</option>

        <option value="120">2分钟</option>

    </select>

<script type="text/javascript" src="sea.js"></script>

<script type="text/javascript">

seajs.use("./init",function(init){

    init.initPage()

});

</script>

</body>

</html>

b)init.js

define(function(require,exports,module){

    //加载依赖模块

    var $ = require("jquery");

    require("./plugins/jquery.combobox")($);

    //私有属性和方法

    var name = "Benjamin_private";

    var setName = function(name){

        console.log("My name is "+ name);

    }

    //公有属性和方法

    module.exports = {

        name     : "Benjamin_public"

        initPage : function(){

            $("#sel_refresh").combobox({

                width:150,

                onSelect:function(rec){

                    console.log(rec);

                }

            });

        },

        setName : function(name){

            console.log("My name is "+ name);

        }

    }

});

c)jquery.combobox.js及依赖插件代码参见上面

/**

* 问题

*/

a)使用seajs+easyui 时 easyui框架的 jquery.parse.js 基本上每个控件都有用到，所以建议每个控件添加依赖时都增加这个依赖；更改这个文件时要注意，其文件中两个闭包都要更改实参。
b)避免缓存设置
可以在链接后加个时间戳，也可以直接配置
seajs.config({
debug : 2;
});

c)其中的各控件样式文件在此实例中没有设置按模块加载，自己可设置
d)其他问题后续总结补充...

seajs + easyui [转]的更多相关文章

  1. angularjs + seajs构建Web Form前端(三) -- 兼容easyui

    回顾 在上一章中使用了angular实现了ajax form和树形结构,经过以上两章对于angular的大致使用,对于angular也有了初步的认识,接下来的内容只会对angular的一些用法做简单的 ...

  2. angularjs + seajs构建Web Form前端(二)

    回顾 上一篇讲解了引入bootstrap构建一个简单的登录页面,如何让angularjs自动启动并绑定视图,操作过程当中如何使用ui-bootstrap,继而完成简单功能后如何引入seajs后如何使n ...

  3. angularjs + seajs构建Web Form3

    angularjs + seajs构建Web Form前端(三) -- 兼容easyui 回顾 在上一章中使用了angular实现了ajax form和树形结构,经过以上两章对于angular的大致使 ...

  4. bootstrap + angularjs + seajs构建Web Form前端2

    bootstrap + angularjs + seajs构建Web Form前端(二) 回顾 上一篇讲解了引入bootstrap构建一个简单的登录页面,如何让angularjs自动启动并绑定视图,操 ...

  5. seajs使用方法

    必须执行seajs.use()时,才能自动执行预加载项 <script src="/UILib/sea.js"></script> <script s ...

  6. 前端框架 EasyUI （2）页面布局 Layout

    在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...

  7. 前端框架 EasyUI （1）熟悉一下EasyUI

    jQuery EasyUI 官方网站 http://www.jeasyui.com/ .去年新开了个中文网 http://www.jeasyui.net/,不知道是不是官方的,不过看着挺像样.但是,广 ...

  8. 前端框架 EasyUI （0） 重新温习（序言）

    几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...

  9. ASP.NET MVC5+EF6+EasyUI 后台管理系统（1）-前言与目录（持续更新中...）

    开发工具:VS2015(2012以上)+SQL2008R2以上数据库  您可以有偿获取一份最新源码联系QQ:729994997 价格 666RMB  升级后界面效果如下: 任务调度系统界面 http: ...

随机推荐

  1. Swagger+Spring MVC框架学习分享

    [html] view plain copy 最近参与公司接口编写,Android和IOS端都要调用这些接口,需要对接调试,如果没有一个接口文档,管理接口,别人用了接口,也不知道接口怎么用,接口上有什 ...

  2. 10个必备的移动UI设计资源站

    http://www.uisdc.com/10-necessary-mobile-ui-design-resources# 交互设计中如何增加趣味性.提升愉悦http://www.uisdc.com/ ...

  3. Windows Azure 社区新闻综述（#72 版）

    欢迎查看最新版本的每周综述,其中包含有关云计算和 Windows Azure的社区推动新闻.内容和对话. 以下是过去一周基于您的反馈汇集在一起的内容: 文章 ·   在 Windows Azure 移 ...

  4. MZL's xor

    MZL's xor Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/65536K (Java/Other) Total Sub ...

  5. Mac经常使用快捷键

    Mac使用快捷键会节省非常多时间.使用最多的键就是shift键  option键 command键的组合了.当然一下略微用得多一点点,还有非常多快捷键没一一列举了 进入指定文件夹的一些快捷键 进入 A ...

  6. js秒数转换时分秒方法

    今天写一个东西的时候 发现给出的是秒数.实在找不到直接的工具去转换. 就去网上找了个转换方法(有现成的就不写了,以后再简化下代码). function formatSeconds(value) { v ...

  7. this function has none of deterministic, no sql,or reads sql data in its declaration and binary logging is enabled

      原址:http://blog.chinaunix.net/uid-20639775-id-3031821.html   This function has none of DETERMINISTI ...

  8. hihocoder #1260 : String Problem I

    题目链接   时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 我们有一个字符串集合S,其中有N个两两不同的字符串. 还有M个询问,每个询问给出一个字符串w,求有多少S中的 ...

  9. 01-C语言基本知识

    目录: 一.C语言基本知识 二.C语言概述 回到顶部 一.C语言基本知识 1 语言背景 1946年,美国冯·诺依曼第一台计算机. 四大部分:中央处理器(控制器,运算器),存储器,输入设备,输出设备. ...

  10. Eclipse+ADT的环境搭建

    Index: . Java环境变量的设置 . Android环境变量的设置 1.Java环境变量的设置 A.属性名称:JAVA_HOME 属性值:C:\Program Files\Java\jdk1. ...