在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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
PHP中使用微秒计算脚本执行时间例子
Nov 19 Javascript
js判断子窗体是否关闭的方法
Aug 11 Javascript
js手动播放图片实现图片轮播效果
Sep 17 Javascript
js在ie下打开对话窗口的方法小结
Oct 24 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
JavaScript变量Dom对象的所有属性
Apr 30 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与XML联手进行网站编程代码实例
2008/07/10 PHP
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
详解Vue前端生产环境发布配置实战篇
2019/05/07 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
基于Python的接口测试框架实例
2016/11/04 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
python实现在线翻译功能
2020/03/03 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
中学生检讨书范文
2014/11/03 职场文书
大学生学年个人总结
2015/02/15 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL