一、引入必要文件
<!--1.0引入jQuery核心库--> <script src="jquery-easyui-1.4.4/jquery.min.js"></script> <!--2.0引入jQuery EasyUI核心库--> <script src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script> <!--3.0引入EasyUI中文提示信息--> <script src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script> <!--4.0引入EasyUI核心UI文件CSS--> <link href="jquery-easyui-1.4.4/themes/default/easyui.css" rel="stylesheet" /> <!--5.0引入EasyUI图标文件--> <link href="jquery-easyui-1.4.4/themes/icon.css" rel="stylesheet" />
二、加载EasyUI组件方式
1.方式一:使用class方式加载
<div class="easyui-dialog" title="class赋值加载" style="400px;height:200px;"></div>
2.方式二:使用js调用加载(推荐)
<div id="box" title="JS加载" style=" 200px;height:100px;left:100px;"></div> <script> $(function() { $("#box").dialog(); }) </script>
3.方式三:使用easyload.js智能加载(按需加载)
<script src="../Scripts/jquery-easyui-1.4.4/jquery.min.js"></script> <script src="../Scripts/jquery-easyui-1.4.4/easyloader.js"></script> <script> //要用到哪个组件,给哪个对象添加属性 easyloader.load("dialog",function() { $("#box").dialog(); }) </script> <div id="box" title="JS加载" style=" 200px;height:100px;left:100px;"></div>
三、parser解析器(UI渲染解析器)
1.取消自动渲染
<div id="box" class="easyui-dialog" title="JS加载" style=" 200px;height:100px;left:100px;">内容</div> <script> //放$(function(){}外),取消自动渲染 $.parser.auto = false; $(function () { }); </script>
2.解析所有UI组件
<div id="box" class="easyui-dialog" title="JS加载" style=" 200px;height:100px;left:100px;">内容</div> <script> $.parser.auto = false; $(function () { $.parser.parse(); }); </script>
3.解析制定UI组件
<div id="box"> <div class="easyui-dialog" title="JS加载" style=" 200px;height:100px;left:100px;"> 内容 </div> </div> <script> $.parser.auto = false; $(function () { //必须设置父类容器,才可解析 $.parser.parse("#box"); }); </script>
<div id="box"> <div class="easyui-dialog" title="JS加载" style=" 200px;height:100px;left:100px;"> 内容 </div> </div> <script> $.parser.auto = false; $(function () { //如果注释掉就没有弹窗 $.parser.parse("#box"); }); //UI解析完毕后,弹窗 $.parser.onComplete = function () { alert("UI解析完毕"); } </script>
四、设置属性
1.方式一:通过标签属性设置
<div class="easyui-resizable" data-options="maxWidth:400,maxHeight:200" style="height: 100px; background:cyan"></div>
2.方式二:通过js(推荐)
<div id="box" style="height: 100px; background:cyan"></div> <script> $(function() { $("#box").resizable({ maxWidth: 400, maxHeight: 200 }); }) </script>
五、设置默认值
所有的组件都可以设置全局默认值
$.fn.panel.defaults.height = 150;