首页 > Web开发 > 详细

jQuery Easy UI学习(1)——如何使用easyui,导入js顺序

时间:2014-02-01 15:23:20      阅读:682      评论:0      收藏:0      [点我收藏+]



一、首先在WebRoot目录下创建js文件夹,导入压缩好的完整的easy-ui的js包。

二、在HTML的页面中导入easy ui 的js
 1、一次导入所有js:(建议用这种)
<1>.引用jQuery的js文件
<script type="text/javascript" src="../js/jquery-easyui-1.3.5/jquery.min.js"></script>
<2>.引用Easy UI的Js文件
<script type="text/javascript" src="../js/jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
<3>.导入Easy UI的主题Css文件
<link rel="stylesheet" href="../js/jquery-easyui-1.3.5/themes/default/easyui.css" type="text/css"></link>
<4>.导入Easy UI的图标Css文件
<link rel="stylesheet" href="../js/jquery-easyui-1.3.5/themes/icon.css" type="text/css"></link>
<5>.引用Easy UI的国际化文件         以下为让它显示中文
<script type="text/javascript" src="../js/jquery-easyui-1.3.5/locale/easyui-lang-zh_CN.js"></script>
<6>.页面上加上UTF-8编码
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<7>.使用组件(以dialog为例)
<script type = "text/javascript" charset = "UTF-8">
 $(function(){
  $(‘#dd‘).dialog({
   modal:true
  });
 });
</script>
<body>
<div id = "dd" title = "My Dialog" style = "width:400px;height:200px;">Dialog</div>
</body>

或使用class添加组件:(这一个同时可用于单个导入)
 
<script type = "text/javascript" charset = "UTF-8">
 $(function());
</script>
<body>
<div id = "dd" class = "easyui-dialog" title = "My Dialog" style = "width:400px;height:200px;">Dialog</div>
</body>

2、导入单个js:
<1>.引用jQuery的Js文件
<script type="text/javascript" src="../js/jquery-easyui-1.3.5/jquery.min.js"></script>
<2>.引用easyLoader.js
<script type="text/javascript" src="../js/jquery-easyui-1.3.5/easyloader.js"></script>
<3>.使用组件(同上例)
<script type = "text/javascript" charset = "UTF-8">
 $(function(){
  easyloader.load(‘dialog‘,function(){
   $(‘#dd‘).dialog({
    modal : true
   });
  });
 });
/* easyloader可以换成using */
</script>


  如果要加载两个组件的话,使用数组:
  
<script type = "text/javascript" charset = "UTF-8">
   $(function(){
    easyloader.load([‘dialog‘,‘messager‘],function(){
     $(‘#dd‘).dialog({
      modal : true
     });
     $.messager.alert(‘Title‘,‘load ok‘);
    });
   });
  </script>





jQuery Easy UI学习(1)——如何使用easyui,导入js顺序

原文:http://blog.csdn.net/frightingforambition/article/details/18888177

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!