在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 相关文章推荐
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
Jan 26 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
Node.js学习之查询字符串解析querystring详解
Sep 28 Javascript
Node.js使用Express.Router的方法
Nov 14 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 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下mysql数据库操作类(改自discuz)
2010/07/03 PHP
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
Bootstrap和Java分页实例第一篇
2016/12/23 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
2020/08/17 Javascript
介绍Python的@property装饰器的用法
2015/04/28 Python
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
python算法表示概念扫盲教程
2017/04/13 Python
python django 增删改查操作 数据库Mysql
2017/07/27 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
初学者学习Python好还是Java好
2020/05/26 Python
Python实现计算图像RGB均值方式
2020/06/04 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
设计师珠宝:Ylang 23
2018/05/11 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
工商学院毕业生个人自我评价
2013/09/19 职场文书
财政专业求职信范文
2014/02/19 职场文书
党员创先争优心得体会
2014/09/11 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
年底个人总结范文
2015/03/10 职场文书