EasyUI的下载与使用

http://www.jeasyui.com/download/index.php

下载以后，我们会得到一个压缩包，解压以后，目录结构是这样的： 

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

• 1
• 2
• 3
• 4

第一个和第二个是主题的css样式文件，上面的代码是使用默认主题，我们也很容易切换到其他主题，只要修改defult即可。 
第三个是jQuery库文件，一般使用EasyUI解压包里面的jQuery文件即可。 
第四个是EasyUI核心和组件的集合js文件，加载这个文件会加载所有的EasyUI组件，就不需要一个个导入组件的js文件了。我们也可以使用EasyUI的EasyLoader插件，这个插件可以帮助我们自定义加载EasyUI模块。

使用EasyUI的组件的方法

一般有两种方式来使用EasyUI组件。

第一种是通过在html元素直接设置class为EasyUI组件预定义的名称即可，EasyUI就会自动在页面加载时为元素渲染样式。

例子：我们来创建一个面板（panel）：

<div class="easyui-panel" style="width:500px;height:200px;padding:10px;"   
    title="我的面板" data-options="iconCls:'icon-ok',collapsible:true">
    我的CSDN博客地址为：
    <a href="http://blog.csdn.net/luoluozlb?viewmode=contents">http://blog.csdn.net/luoluozlb?viewmode=contentsa>
div>

• 1
• 2
• 3
• 4
• 5

效果图： 

第二种是通过js代码来使用EasyUI组件。使用方法：

$('selector').plugin(); 

• 1

即先通过jQuery选定要渲染的元素，然后调用相应的组件即可，这里的plugin是组件的名字。

例子：用js使用EasyUI的面板组件： 
首先是html：

    <div id="my-panel" style="padding:10px;">    
        我的CSDN博客地址为：
        <a href="http://blog.csdn.net/luoluozlb?viewmode=contents">http://blog.csdn.net/luoluozlb?viewmode=contentsa>
    div>

• 1
• 2
• 3
• 4

js代码：

    $('#my-panel').panel({    
        width: 500,    
        height: 150,    
        title: '我的面板',
        collapsible:true,
    });

• 1
• 2
• 3
• 4
• 5
• 6

效果图：