EasyUI入门

最新推荐文章于 2025-04-13 18:13:13 发布

梦里花落知多少、

最新推荐文章于 2025-04-13 18:13:13 发布

阅读量239

点赞数

分类专栏： jquery入门文章标签： Jquery easyui

本文链接：https://blog.youkuaiyun.com/primarykey123/article/details/96509628

版权

jquery入门专栏收录该内容

4 篇文章

订阅专栏

1，初步认识 Easyui
就是基于jquery做界面的框架，上手容易，学习方式copy+edit
（1）导入相应的文件
在这里插入图片描述
（2）搭建环境

2.创建组件【Easyui可以通过HTML或JavaScript创建组件】

（1)通过html创建组件
	原理：最终还是调用js的方式来创建，$(“#p”).panel({json参数});
<div class="easyui-panel" style="width: 500px;height: 300px;"   title="瓜皮"  iconCls = "icon-remove" collapsible = "true">
			<a>顶你个肺</a>
			
</div>

（2)通过js创建组件
<script type="text/javascript">
				$(function() {
					//获取p2标签,把他变成easyui面板组件.
					$("#mydiv").panel({
						//面板属性   ,需要深恶么属性就按格式添加
						title : "你的面板",
						iconCls : "icon-remove"
						
					});
				});
</script>
<body>
<div id="mydiv" style="width: 500px;height: 300px;">
			<a>一闪一闪亮晶晶</a>
</div>
</body>

3.支持创建组件的所有名称
在这里插入图片描述
（1）【Linkbutten】组件的创建【按钮】
属性:
iconCls:图标;
disabled:是否禁用;
plain:true时显示简洁效果,其实就是没有背景;
iconAlign:按钮图标位置;可以选值为left,right;默认为:left;
toggle: 是否可以选中效果.
group : 分组,一般与toggle配合使用,达到单选效果;

$(function(){
				/*给指定的按钮绑定事件*/
				$("#first").on("click",function(){
					alert("不错不错")
					
				})
				
				$("#cutBtn").on("click",function(){
					//组件的disabled禁用属性,无法控制事件.
					if($(this).hasClass("l-btn-disabled")){//判断按钮是否有禁用样式.
						alert("没有反应")	
					}
				});

			})
			
		</script>
	</head>
			
			 
	<body>
		<a href="#" class="easyui-linkbutton" iconAlign="top" 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" id="first" data-options="toggle:true,group:'g1',iconAlign:'top'">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" id="last" data-options="toggle:true,group:'g2'">Button 5</a>
		</div>

	</body>

上面代码的效果
（2）【panel】组件【面板】，属性及其方法
panel面板使用div创建
class=“easyui-panel”
panel属性:
title:面板的标题;
style:面板的样式;
iconCls:面板标题的图标;
collapsible:定义是否显示可折叠按钮。
minimizable:定义是否显示最小化按钮。
maximizable:定义是否显示最大化按钮。
closable:定义是否显示关闭按钮。
tools : 自定义工具按钮. 参数是一个选择器,代表选择器获取元素中的内容就是工具按钮.
fit:设置为true的时候面板大小"将自适应父容器"; 简单理解: 父容器多大,我就多大. 使用了该属性后,我们设置宽高将失效.
href: 从URL读取远程数据并且显示到面板; 一般用于加载动态的内容比较有用. (只加载body里面内容) 一旦设置,那么面板标签中内容会被覆盖掉.
closed : 设置面板是否显示.
loadingMessage:加载远程数据的时候在面板内显示一条消息。

	$("#btn1").click(function(){
					//点击btn1实现打开功能
					$("#mydiv").panel('open')
					//alert(666)
				})
				$("#btn2").click(function(){
					//点击btn1实现关闭功能
					$("#mydiv").panel('close')
					//alert(666)
				})
				$("#btn3").click(function(){
					//点击btn1实现打开功能
					$("#mydiv").panel('refresh','yyy.txt')
					//alert(666)
				})
<a href="javascript:void(0)" id="btn1"  class="easyui-linkbutton"  iconCls="icon-ok" >打开</a>
<a href="javascript:void(0)" id="btn2" class="easyui-linkbutton"   iconCls="icon-remove">关闭</a>
<a href="javascript:void(0)" id="btn3" class="easyui-linkbutton"  iconCls="icon-reload">刷新</a>

<!-- 通过js的方法创建组件，并且添加属性 -->
<div id="mydiv" style="width: 500px;height: 300px;">
	<h1>富贵险中求</h1>
</div>

在这里插入图片描述
4.组件三要素【属性，方法，事件】【tree】组件
属性，方法都已经在上述使用过了，现在来重点使用注册事件

<script type="text/javascript">
$(function() {
	//组件注册事件的写法与属性一模一样.
	$('#tree').tree({
		//属性和事件
		animate:true,
		这一步开始注册事件    注意需要使用“，”分隔开不同的属性或事件
		onClick: function(node){
			alert(node.text);  // 在用户点击的时候提示
		}
	});
});
</script>
<body>
 	<ul id="tree" data-options="url:'tree-data1.json'" ></ul>
</body>

5.【menu】组件和右键点击事件【菜单】
菜单组件创建后默认隐藏，需要通过方法 show 来显示

<script type="text/javascript">
				$(function() {
					//contextmenu 右键菜单
					$(document).on('contextmenu',function(event){
						//enent   事件对象
						event.preventDefault(); //阻止浏览器默认事件
						
						$("#mm").menu('show',{
							left:event.pageX,
							top:event.pageY
						})
					})
				});
			</script>
	</head>
		
			<!--在菜单被创建的时候它是隐藏和不可见的。调用'show'方法显示菜单。 --> 
	<body>
				<!--
	创建了一个被隐藏的菜单. 菜单需要我们通过js调用显示. 
	-->
	<div id="mm" class="easyui-menu" style="width: 120px;">
		<div onclick="javascript:alert('new')">New</div>
		<div>
			<span>Open</span>
			<div style="width: 150px;">
				<div>
					<span>M1</span>
					<div style="width: 120px;">
							<div>sub1</div>
							<div>sub2</div>
							<div>sub3</div>
						</div>
					</div>
				</div>

		
	</body>