【easyui学习笔记】1.jQuery EasyUI 入门初窥

来源：互联网发布：233什么意思网络用语编辑：程序博客网时间：2024/05/27 06:56

easyui正如其名，是一个简单易用的前端框架。

学习参考：《jQuery EasyUI 官方API文档中文版》作者：王锦阳 CSDN账号：richie696

API文档下载：EasyUI专题 http://download.csdn.net/album/detail/343

把easyui下载到本地，当做外部资源链接进我们的html文件即可。

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

这里使用相对路径，其中r目录是我存放各种静态资源的地方，不同版本的easyui的css和js名称可能稍有不同，根据各自的情况查看并链接。

然后在我们的html文件中就可以直接使用easyui的各种组件了，比如可折叠的面板：

<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"           title="My Panel" iconCls="icon-save" collapsible="true">       The panel content    </div>

保存html文件后，用浏览器打开它，效果如下：

点击右上角的三角形按钮，可以折叠面板！我们用非常少量的代码实现了很好玩的一个效果，这就是框架的便捷之处了。

我们来简单修改一下它的属性，好直观地感受理解。

1、修改title，改变了这个面板的标题

2、修改iconCls，上面的是icon-save，可以修改为icon-add、icon-edit等，他们的定义在icon.css中，也就是资源链接中的：

<link rel="stylesheet" type="text/css" href="r/jquery-easyui/themes/icon.css">

3、修改collapsible（英文单词 adj.可折叠的）为false，保存文件后刷新网页，可以看到折叠三角消失了，成为了不可折叠的状态。

我的easyui-panel.html文件全文如下：

<head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="r/jquery-easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="r/jquery-easyui/themes/icon.css"><script type="text/javascript" src="r/jquery-easyui/jquery.min.js"></script><script type="text/javascript" src="r/jquery-easyui/jquery.easyui.min.js"></script></head><body><div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"           title="My Panel我的面板" iconCls="icon-save" collapsible="true">       The panel content 你好，easyui！   </div>  </body>

注意：在头部加上编码格式声明，要不然有时会中文乱码（我用Sublime Text 3编辑，默认文件编码为utf-8，但浏览器默认用GBK解码，如果不加声明会中文乱码）。

0 0