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

最新推荐文章于 2021-09-12 19:03:50 发布
最新推荐文章于 2021-09-12 19:03:50 发布
阅读量607 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/autobyte/article/details/55255028
版权

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解码，如果不加声明会中文乱码）。

apollo315
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
easyui 主页布局
04-11
<div class="easyui-layout" <div data-options="region:'north'" <div data-options="region:'south',split:true" <div data-options="region:'east',split:true,title:'East',collapsible:true" <table id="tt" class="easyui-propertygrid" data-options=" url: 'propertygrid_data1.json', method: 'get', showGroup: true, fit: true, border: false "> </table> </div> <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'" </div> </div>
EasyUI 学习笔记
04-22
### JavaScript 和 jQuery 知识点 #### JavaScript 对象 ...以上是EasyUI的学习笔记，详细介绍了JavaScript和jQuery的基础知识，EasyUI框架的优势、如何学习和使用EasyUI以及搭建开发环境的具体步骤。
easyUI panel设置其默认为折叠状态 并且可展开，并在pannel的右上角设置按钮
weixin_42424269的博客
01-03 7517
1.默认状态为折叠 我们需要在data-options中设置两个值 collapsible:true,collapsed:true 设置后就可实现折叠的效果 2.在右上角设置按钮 dataoptios="tools:'#indentityInfoEdit'" &lt;div id="indentityInfoEdit"&gt; &lt;a href="#" class="i...
easyui的折叠面板的使用
CLX_Dream的博客
09-03 2590
easyui创建一个可折叠的面板非常的方便，只需要写一个&lt;div&gt;&lt;/div&gt;标记并使用easyui自带的css样式即可。 一、引入easyui的样式文件和js文件 &lt;link rel="stylesheet" type="text/css" href="../js/themes/default/easyui.css"&gt; &lt;link rel=&q
EasyUI中Accordion折叠面板的简单使用
BADAO_LIUMANG_QIZHI的博客
06-17 925
场景 效果 容器选项 名称 类型 描述 默认值 width number 折叠面板（Accordion）容器的宽度。 auto height number 折叠面板（Accordion）容器的高度。 auto fit boolean 设置为 true，就使折叠面板（Accordion）容器的尺寸适应它的父容器。...
JQuery EasyUI(13)
Roger_CoderLife的博客
02-17 330
第十三章：Window（窗口）组件 学习要点： 加载方式 属性列表 事件列表 方法列表 一、加载方式： 1.class加载方式 2.JS调用 二、属性列表： 窗口属性扩展自Panel(面板)，窗口新增或重新定义的属性如下： Window属性 属性名 值 说明 title stri...
EasyUI学习笔记
11-26
一、EasyUI的目录结构 ...6.jquery.easyui.min.js：easyui的主要js文件(必须的) 7.jquery.min.js：是jquery2.0版本(在上课过程中，会使用1.x版本，因为2.0对低版本浏览器兼容性不好)(jquery是必须的，本课程使用1.x)
easyUI学习笔记简书1
08-08
在"EasyUI 学习笔记简书1"中，主要介绍了 EasyUI 的边框布局（Border Layout）。 边框布局是 EasyUI 提供的一种常见布局模式，它将页面划分为五个区域：east（东）、west（西）、north（北）、south（南）和 center...
JQueryEasyUI学习笔记（十一）源码
04-09
在本篇jQuery EasyUI的学习笔记中，我们将深入探讨如何实现右键菜单以及冻结列的功能，这对于构建用户交互丰富的Web应用程序至关重要。jQuery EasyUI是一个基于jQuery的UI库，它提供了大量的预定义组件，使得开发者...
JQueryEasyUI学习笔记（十）源码
04-08
**jQuery EasyUI 学习笔记（十）：深入源码** 在Web开发中，jQuery EasyUI是一个基于jQuery的UI框架，它提供了丰富的组件和便捷的API，帮助开发者快速构建交互式的用户界面。本篇笔记主要关注jQuery EasyUI的源码...
Collapsible-Frame-Layout:可折叠展开的框架布局
05-18
可折叠框架布局 可以折叠/展开的框架布局 去做 转换为.aar 检测重力==顶部还是底部
jquery easyui属性汇总
xiaowei20091124的专栏
07-09 712
CSS类定义： 1、div easyui-window        生成一个window窗口样式。       属性如下：                    1)modal:是否生成模态窗口。true[是] false[否]                    2)sha
easyUI 属性总结
狼魂之力
07-30 1856
1、div easyui-window 生成一个window窗口样式。 属性如下： 1)modal:是否生成模态窗口。true[是] false[否] 2)shadow:是否显示窗口阴影。true[显示] false[不显示] 2、div easyui-panel 生成一个面板。 属性如下: 1)title:该标题文本显示在面板头部。 2)iconCls:在面板上通过一个CSS类显示16x16图标。 3)width:设置面板宽度。默认auto。 4)height:设置面板高
easyui入门
m0_54067126的博客
09-12 133
一.简介 why：快速开发 what：html4+jQuery的快速开发的前端框架 where：后端开发管理界面 常用控件：layout、tree、tabs、datagrid、form、messager、combobox 二、下载程序库并导入easyui的css和javascript到eclipse项目中去 1.相对路径（api中有） <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
jQuery EasyUI中window/dialog 窗口折叠和展开方法（显示）
motrsky的专栏
10-29 3571
在jQuery的EasyUI中新窗口或消息框是通过class="easyui-window"和class="easyui-dialog"定义，并可以通过其collapsible、minimizable、maximizable、closable、closed分别控制其可折叠按钮、最小最大化窗口、关闭按钮及可关闭窗口的显示与否。那如何在JavaScript中动态控制窗口(dialog/window)的折
EasyUI常用组件（基础）
qq_43154385的博客
10-13 688
--------------------------------------------------------------------------------------------------------------- [版权申明：本文系作者原创，转载请注明出处] 文章出处：http://blog.csdn.net/sdksdk0/article/details/51914553 作者：朱培 ID：sdksdk0 ------------------------------------------..
EasyUI-没有折叠按钮的布局
dxm809的博客
03-24 836
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scri...
easyui 常用的属性
狼魂之力
07-29 325
fit:true/false （自适应大小） closable:true/false（是否在头部显示关闭按钮） maximizable:true/false(是否显示最大化按钮) minimizable:true/false(是否显示最小化按钮) split:true/false(是否分割) border:true/false(边框) collapsible:true/false(是否可以折叠 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值