在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法


Posted in Javascript onSeptember 11, 2015

easyUI是jquery的一个插件,是民间的插件。easyUI使用起来很方便,里面有网页制作的最重要的三大方块:javascript代码、html代码和Css样式。我们在导入easyUI库后,可以直接复制粘贴里面的代码,从而简单轻便地初步设置网页。

首先导入easyUI函数库:

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">  
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">  
<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>  
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

项目代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>欢迎来到后台管理界面</title>
    <link rel="stylesheet" type="text/css" href="plugin/themes/icon.css" />
    <link rel="stylesheet" type="text/css" href="plugin/themes/default/easyui.css" />
  </head>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="plugin/easyloader.js"></script>
  <script type="text/javascript" src="plugin/locale/easyui-lang-zh_CN.js"></script>
  <script type="text/javascript">
    $(function() {
      $('#tt').tabs('add', {
        title: '查看',
        content: 'Tab Body',
        closable: true,
        tools: [{
          iconCls: 'icon - mini - refresh',
          handler: function() {
            alert('refresh');
          }
        }]
      });
    });
  </script>
  <body class="easyui-layout">
    <div data-options="region:'north',split:true" style="height:100px;">
      <div>
        <h1>拓胜公司后台管理系统</h1></div>
    </div>
    <div data-options="region:'south',split:true" style="height:60px;">
      <div style="margin: auto; width: 400px ; padding: 20px; font-size: 20px;">Copyright ©拓胜公司 版权所有</div>
    </div>
    <div data-options="region:'west',title:'系统管理',split:true" style="width:240px;">
      <div id="aa" class="easyui-accordion">
        <div title="管理员管理" style="padding: 10px;">
          <ul>
            <li><a href="#">添加</a></li>
            <li><a href="#">查看</a></li>
            <li><a href="#">修改</a></li>
            <li><a href="#">删除</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div data-options="region:'center',title:'编辑区 '" style="padding:5px;background:#eee;">
      <div id="tt" class="easyui-tabs" ">
    <div title="添加 " data-options="closable:true " style="overflow:auto;padding:20px;display:none; ">
      tab1
    </div>
    <div title="删除 " data-options="closable:true " style="overflow:auto;padding:20px;display:none; ">
      tab2
    </div>
  </div>
</div>
</body>
</html>

上面代码没有任何的问题,但是却出现如下错误:

在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法

发生的错误:easyUImini.js库出现了问题,但是函数库是别人写好了,测试过的,里面理论下是不可能会有错误的。

通过种种的尝试,发现加入alert(11)后,浏览器就不报错了,javascript代码也能顺利的执行:

<script type="text/javascript">
    $(function() {
      alert(11);
      $('#tt').tabs('add', {
        title: '查看',
        content: 'Tab Body',
        closable: true,
        tools: [{
          iconCls: 'icon - mini - refresh',
          handler: function() {
            alert('refresh');
          }
        }]
      });
    });
  </script>

而我们把jQuery代码改为window.onload()后,代码依然正常运行:

<script type="text/javascript">
  window.onload=function(){
    $('#tt').tabs('add', {
        title: '查看',
        content: 'Tab Body',
        closable: true,
        tools: [{
          iconCls: 'icon - mini - refresh',
          handler: function() {
            alert('refresh');
          }
        }]
      });
  }
  </script>

总结为:

1、window.onload()和$(function(){})的区别

A)window.onload()是等到页面所有元素加载完毕后(包括dom和javascript),再执行里面的函数代码

B)$(function(){})是等到页面的dom元素加载完毕后,再执行里面的函数代码

2、因为我们是用easyUI来开发,事先导入了javascript代码,但是利用$(function(){})后,javascript还没加载完毕,所以

jquery.easyui.min.js库就会报错了。所以在我们利用 easyUI开发项目的时候记得不要使用$(function(){}),而建议去使用window.onload()。

以上就是本文给大家介绍的在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法,希望大家喜欢。

Javascript 相关文章推荐
js 浮动层菜单收藏
Jan 16 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
Mar 10 Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
Javascript拓展String方法小结
Jul 08 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
Javascript中封装window.open解决不兼容问题
Sep 28 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
Apr 10 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
layui按条件隐藏表格列的实例
Sep 19 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 Javascript
JavaScript实现算术平方根算法-代码超简单
Sep 11 #Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 #Javascript
jQuery超精致图片轮播幻灯片特效代码分享
Sep 10 #Javascript
手机端转盘抽奖代码分享
Sep 10 #Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 #Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
Sep 10 #Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 #Javascript
You might like
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
用js解决数字不能换行问题
2010/08/10 Javascript
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
小程序实现多个选项卡切换
2020/06/19 Javascript
朴素贝叶斯算法的python实现方法
2014/11/18 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
软件配置管理有什么好处
2015/04/15 面试题
提高EJB性能都有哪些技巧
2012/03/25 面试题
大学生职业生涯规划书的基本内容
2014/01/06 职场文书
优秀食品类广告词
2014/03/19 职场文书
护理专科毕业自荐信范文
2014/04/21 职场文书