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

最新推荐文章于 2023-05-08 08:54:28 发布

apollo315

最新推荐文章于 2023-05-08 08:54:28 发布

阅读量648

点赞数

本文链接：https://blog.youkuaiyun.com/autobyte/article/details/55255028

版权

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

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

API文档下载：EasyUI专题 http://download.youkuaiyun.com/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解码，如果不加声明会中文乱码）。