easyui学习的第一天

1.easyui的认识

1.1easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合

(1) 开发者不需要编写复杂的JavaScript，也不需要对css样式有深入的了解，开发者只有需要了解一些简单的html标签。–完成页面的构建

(2) 学习方法 copy+edit 官网里面有很多示例

(3) Easyui是属于前端框架

1.2 easyui的理解

easyui他是前端框架，快速的构建页面

easyui学习的时候，很容易上手，只需会基本的css html jquery js都OK

1.3 easyui怎么使用(掌握)

步骤：

​ (1)下载easyui
http://www.jeasyui.net/ 中文网
(2) 在页面引入对应easyui的文件

	    <!-- easyui的样式主题文件 -->
		<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
		<!-- easyui的系统图标-->   
		<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
		<!-- easyui依赖的jquery库-->   
		<script type="text/javascript" src="easyui/jquery.min.js"></script>
		<!-- easyui的插件库-->      
		<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
		<!-- easyui的汉化包 -->
		<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

1.4 easyui的组件的创建方式(掌握)

(1)通过HTML来创建 — class=“easyui-组件名”

(2)通过js代码来创建

​ $("#p1").panel({

​ title:‘标题’

​ })

1.5 easyui加载原理–了解

最终还是调用js的方式来创建，$(“#p”).panel({json参数});

底层通过$.parser.auto=true;调用$.parser.parse()方法,进行解析，循环页面获取所需要创建的组件元素，调用组件方法，使用easyUI拼接出html

1.6 easyui常用组件

panel – 面板

组件在定义的时候，就把属性设置好，不要加载完 在去修改属性

​ title:标题
​ padding：内容距离边框距离
​ iconCls：图标
​ collapsible：true显示折叠按钮
​ minimizable：最小化
​ maximizable：最大化
​ closable：关闭按钮
​ tools:引入工具 比如引入 add和save图标
​ fit:自适应父容器 设置为true 宽度和高度没有效果
​ href:加载文件内容

• accordion 可折叠标签
• combobox 组合框
• menu 菜单
• dialog 对话框
• tabs 标签
• validatebox 验证框
• datagrid 数据表
• window 窗口
• tree 树

---

作者：南下Debugging
来源：CSDN
原文：https://blog.csdn.net/u012369153/article/details/53471038
版权声明：本文为博主原创文章，转载请附上博文链接！

style="width: 300px; height: 200px; padding: 10px;" 
				iconCls="icon-save"
				collapsible="false"
				minimizable="true"
				maximizable="true"
				closable="false"
				tools="#tt"
				fit="false"
				loadingMessage="加载中..."
				href=""

linkbutton – 按钮

	iconCls:按钮图标
	toggle：为true时允许用户切换其状态是被选中还是未选择 结合group来使用 在一组里面只能选中一个
	group：分组
    plain：简洁的效果
    iconAlign：图标的位置
    data-options：可以设置组件的属性
    disabled：禁用
    <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>  
		<a href="#" class="easyui-linkbutton" iconCls='icon-remove' toggle="true" onclick="alert('删除....');">删除</a>
		<a href="#" class="easyui-linkbutton" iconCls='icon-edit' plain="true" iconAlign="right" id="editBtn">编辑</a>
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',disabled:true" id="cutBtn">剪切</a>
		
	 <div style="padding:5px;border:1px solid #ddd;">
		<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 1</a>
		<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 2</a>
		<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2'">Button 3</a>
		<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2'">Button 4</a>
		<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2'">Button 5</a>
	</div>
		

menu – 菜单

tree --树型菜单
树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。

树控件数据格式化
每个节点都具备以下属性：
id：节点ID，对加载远程数据很重要。
text：显示节点文本。
state：节点状态，‘open’ 或 ‘closed’，默认：‘open’。如果为’closed’的时候，将不自动展开该节点。
checked：表示该节点是否被选中。
attributes: 被添加到节点的自定义属性。
children: 一个节点数组声明了若干节点。
一些案例：

[{    
    "id":1,    
    "text":"Folder1",    
    "iconCls":"icon-save",    
    "children":[{    
        "text":"File1",    
        "checked":true   
    },{    
        "text":"Books",    
        "state":"open",    
        "attributes":{    
            "url":"/demo/book/abc",    
            "price":100    
        },    
        "children":[{    
            "text":"PhotoShop",    
            "checked":true   
        },{    
            "id": 8,    
            "text":"Sub Bookds",    
            "state":"closed"   
        }]    
    }]    
},{    
    "text":"Languages",    
    "state":"closed",    
    "children":[{    
        "text":"Java"   
    },{    
        "text":"C#"   
    }]    
}]  

1.7 组件的三要素（掌握）----属性、方法、事件

１.7.1 属性

属性：用来描述组件的信息，比如title，closable

属性的注意事项：

​ (1)属性在使用，在创建的时候去指定属性，创建完之后修改属性 不能达到预期的效果

​ (2) 属性都是有默认的值，一般不会去修改默认，要改的话，在创建的时候去指定属性

​ （3）属性创建方式

​ a.可以直接在标签上面 写 属性名=“属性值”

			  b.通过data-options这个里面进行指定属性  ，data-options tools:[{},{}],就不要放到data-options外面

​ c. a和b结合起来使用

​ d.通过js在创建的时候指定

1.7.2 方法

什么情况下是调用方法、

​ $("#id").panel(‘open’)；

​ $("#id").panel(‘close’)；

​ $("#id").panel('refresh‘)；

什么情况下创建组件

$("#id").panel({参数})

1.7.3 事件

怎么给组件添加事件

​ $("#tree").tree({

​ 事件名:function(){}

​ onClick:function(node){

​ alert(node.text);

​ }

​ })