EasyUI使用方法、引入、创建组件、LinkButton、panel、tree、Menu

其他 2018-11-19 16:37:31 阅读次数: 0
版权声明：《==study hard and make progress every day==》 https://blog.csdn.net/qq_38225558/article/details/83856509

第一步：点击去官网下载EasyUI

第二步：项目中导入easyui所需东西

第三步：引入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">
    <!-- 引入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>

第四步：如何使用呢？？？

  ex:怎么创建easyui组件？？

方式①： html创建组件   -->   class="easyui-组件名"

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>html创建组件</title>
        <!-- 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">
        <!-- 引入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>
        <script type="text/javascript">
//            $.parser.auto = false;//禁用html方式创建组件
        </script>
    </head>
    <body>
        <div id="p" class="easyui-panel"
             style="width:500px;height:200px;padding:10px;"
             title="html创建组件"
             iconCls="icon-ok"
             collapsible="true">
            html创建组件    ---》   class="easyui-组件名" <br/>
            title:标题 <br/> iconCls:图标 <br/> collapsible:是否可收缩 <br/> padding:内边距
        </div>
    </body>
</html>

运行效果：

方式②：  js创建组件  -->  $("属性名").组件名({ ... })

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>js创建组件</title>
        <!-- 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">
        <!-- 引入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>
        <script type="text/javascript">
            $(function(){
                $("#panelDiv").panel({
                        title:"js创建组件",
                        iconCls:"icon-ok",
                        collapsible:"true"
                        });
            });
        </script>
    </head>
    <body>
        <div id="panelDiv" style="width:500px;height:200px;padding:10px;">
            js创建组件    ---》   $("属性名").组件名({ ... }) <br/>
            title:标题 <br/> iconCls:图标 <br/>  collapsible:是否可收缩 <br/> padding:内边距
        </div>
    </body>
</html>

运行效果：

常用LinkButton按钮
注意：若要使用button的颜色还需要导入EasyUI的颜色css样式

<link rel="stylesheet" type="text/css" href="../easyui/themes/color.css">

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>LinkButton按钮和事件</title>
		<!-- 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颜色样式 -->
		<link rel="stylesheet" type="text/css" href="../easyui/themes/color.css">
		<!-- 引入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>
		<script type="text/javascript">
			$(function(){
				$(".easyui-linkbutton").on("click",function(){
					if(!$(this).hasClass("l-btn-disabled")){  //判断是否有这个禁用属性
						alert($(this).text());  //如果没有则弹出框
					}
				})
			})
		</script>
	</head>
	<body>
		<!--
			iconCls：图标
			disabled：禁用样式  依然有点击事件
			plain：简洁样式
			size:按钮的大小(small,large)
			iconAlign：图标位置('left','right','top','bottom')
			 data-options="selected:true"  ：选中
		-->
		<div style="margin: 10px;">
			<a href="#" class="easyui-linkbutton" iconCls="icon-ok">xx</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-ok" disabled="true">xx</a>
		</div>

		<div style="margin: 10px;">
			<a href="#" class="easyui-linkbutton" iconCls="icon-ok" plain="true">简洁样式1</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-ok" plain="true">简洁样式2</a>
		</div>
		<div style="margin: 10px;">
			<a href="#" class="easyui-linkbutton" iconCls="icon-large-clipart" size="small">小图标</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-large-clipart" size="large" iconAlign="top">大图标</a>
		</div>

		<!-- 可多选 -->
		<div style="margin: 10px;">
			<a href="#" class="easyui-linkbutton" toggle="true" data-options="selected:true">1</a>
			<a href="#" class="easyui-linkbutton" toggle="true">2</a>
			<a href="#" class="easyui-linkbutton" toggle="true">3</a>
			<a href="#" class="easyui-linkbutton" toggle="true">4</a>
		</div>

		<!-- 单选 -->
		<div style="margin: 10px;">
			<a href="#" class="easyui-linkbutton" toggle="true" group="g1">1</a>
			<a href="#" class="easyui-linkbutton" toggle="true" group="g1">2</a>
			<a href="#" class="easyui-linkbutton" toggle="true" group="g1">3</a>
			<a href="#" class="easyui-linkbutton" toggle="true" group="g1">4</a>
		</div>

		<!-- 只有c1-c8 -->
		<div style="margin:20px 0">
			<a href="#" class="easyui-linkbutton c1" style="width:120px">Button1</a>
			<a href="#" class="easyui-linkbutton c2" style="width:120px">Button2</a>
			<a href="#" class="easyui-linkbutton c3" style="width:120px">Button3</a>
			<a href="#" class="easyui-linkbutton c4" style="width:120px">Button4</a>
			<a href="#" class="easyui-linkbutton c5" style="width:120px">Button5</a>
			<a href="#" class="easyui-linkbutton c6" style="width:120px">Button6</a>
			<a href="#" class="easyui-linkbutton c7" style="width:120px">Button7</a>
			<a href="#" class="easyui-linkbutton c8" style="width:120px">Button8</a>
			<a href="#" class="easyui-linkbutton c9" style="width:120px">Button9</a>
		</div>
		
	</body>
</html>

运行效果：

如何自定义LinkButton插件？？

panel基础容器

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>panel基础容器</title>
		<!-- 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颜色样式 -->
		<link rel="stylesheet" type="text/css" href="../easyui/themes/color.css">
		<!-- 引入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>
		<script type="text/javascript">
			//$.fn.panel.defaults.title = "修改标题";
			$.fn.panel.defaults.loadingMessage ="加载中...";
			$(function(){ })
		</script>
		<style type="text/css">
			.myPanel{
				position: absolute;
			}
		</style>
	</head>
	<body>
		<!--
			注意panel只能在div中使用，因为div是块元素(div,h1,p)   行内元素(span,a)
			 minimizable="true"  最小化
			 maximizable="true"  最大化
			 closable="true"     关闭
			 去掉title之后，panel导航窗就不会显示！！
    		 loadingMessage:加载信息
    		 href:引入另一个页面body中的内容  不会引入js中内容所以自然不会有js中的效果
    		 fit="true"  自动填充父容器
		-->
		<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
			 title="标题" iconCls="icon-save" collapsible="true"
			 minimizable="true"
			 maximizable="true"
			 closable="true"
			 data-options="tools:'#tt'"
			 href="04_linkbutton按钮.html"
			 left="100px"
			 cls="myPanel">
			panel是一个基础容器
		</div>
		<div id="tt">
			<a href="javascript:void(0)" class="icon-add" onclick="javascript:alert('add')"></a>
			<a href="javascript:void(0)" class="icon-edit" onclick="javascript:alert('edit')"></a>
			<a href="javascript:void(0)" class="icon-cut" onclick="javascript:alert('cut')"></a>
			<a href="javascript:void(0)" class="icon-help" onclick="javascript:alert('help')"></a>
		</div>
	</body>
</html>

运行效果：  (注意：这里我的href里面也就是容器里面包含了另外一个页面的效果哦~~)

panel基础容器属性

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>属性</title>
		<!-- 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颜色样式 -->
		<link rel="stylesheet" type="text/css" href="../easyui/themes/color.css">
		<!-- 引入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>
	</head>
	<body>
		<!--
			方式1： <标签 属性名="属性值" 属性名="属性值"...>
				    属性值：只能写字符串(里面不能是json，也是不能是方法)
		-->
		<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
			 title="标题" iconCls="icon-save" collapsible="true">
			panel是一个基础容器
		</div>
		<br />
		<!--
			方式2： data-options="属性名:属性值,属性名:属性值,..."
		 -->
		<div class="easyui-panel" style="padding:10px;width:400px;"
			 data-options="title:'右上角工具',iconCls:'icon-save',
				tools:[{
					iconCls:'icon-save',
					handler:function(){
						alert('save');
					}
				},{
					iconCls:'icon-remove',
					handler:function(){
						alert('delete');
					}
				}]" >
			panel是一个基础容器
		</div>
		<br /><br />
		<!-- 方式3:混用 -->
		<div class="easyui-panel" iconCls="icon-ok" data-options="title:'混用'" style="padding:10px;width:400px;">
			panel是一个基础容器
		</div>
	</body>
</html>

运行效果：

panel基础容器方法：

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>方法</title>
		<!-- 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颜色样式 -->
		<link rel="stylesheet" type="text/css" href="../easyui/themes/color.css">
		<!-- 引入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>
		<script type="text/javascript">
			$(function(){
				/*
				 元素.组件() --> 创建组件
				 元素.组件({key:value,key:value}) --> 创建组件，加上相应的属性
				 元素.组件("方法名",...) --> 调用组件方法
				 */
				$("#ctBtn").on("click",function(){
					$("#myPanel").panel("setTitle","标题修改了");
				})
				$("#refreshBtn").on("click",function(){
					$("#myPanel").panel("refresh","/04_linkbutton_属性.html");
				})
				$("#openBtn").on("click",function(){
					$("#myPanel").panel("open");
				})
				$("#closeBtn").on("click",function(){
					$("#myPanel").panel("close");
				})
			})
		</script>
	</head>
	<body>
		<a id="ctBtn" href="javascript:;" class="easyui-linkbutton">修改title</a>
		<a id="refreshBtn" href="javascript:;" class="easyui-linkbutton">刷新</a>
		<a id="openBtn" href="javascript:;" class="easyui-linkbutton">open</a>
		<a id="closeBtn" href="javascript:;" class="easyui-linkbutton">close</a>
		<div id="myPanel" class="easyui-panel" href="04_linkbutton按钮.html"
			 title="标题" iconCls="icon-ok" style="padding:10px;width:400px;height:280px;">
			panel是一个基础容器
		</div>
	</body>
</html>

运行效果：

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

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>tree</title>
		<!-- 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颜色样式 -->
		<link rel="stylesheet" type="text/css" href="../easyui/themes/color.css">
		<!-- 引入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>
		<script type="text/javascript">
			$(function(){
				$("#tt").tree({
					url:'../json/tree_data.json',
					animate:true,
					//把点击的节点交给我们
					onClick:function(node){
						if(node.url){
							//代表是子菜单
							console.table(node.text,node.url)
						}
					}
				})
			})
		</script>
	</head>
	<body>
		<ul id="tt"></ul>
	</body>
</html>

运行效果：

Menu菜单组件通常用于快捷菜单。他是构建其他菜单组件的必备基础组件。比如：menubutton和splitbutton。它还可以用于导航和执行命令。

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>menu</title>
		<!-- 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颜色样式 -->
		<link rel="stylesheet" type="text/css" href="../easyui/themes/color.css">
		<!-- 引入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>
		<script type="text/javascript">
			$(function(){
				//绑定页面的右键菜单事件
				$(document).bind('contextmenu',function(e){
					e.preventDefault(); //阻止事件冒泡
					$("#mm").menu("show",{  /*调用'show'方法显示菜单*/
						left: e.pageX,
						top: e.pageY
					});
				});
			})
		</script>
	</head>
	<body>
		<div id="mm" class="easyui-menu" style="width:120px;">
			<div onclick="alert('1')">New</div>
			<div>
				<span>Open</span>
				<div style="width:150px;">
					<div data-options="iconCls:'icon-ok'"><b>Word</b></div>
					<div data-options="iconCls:'icon-ok'">Excel</div>
					<div data-options="iconCls:'icon-ok'">PowerPoint</div>
				</div>
			</div>
			<div data-options="iconCls:'icon-save'">Save</div>
			<div class="menu-sep"></div><!--分割线-->
			<div>Exit</div>
		</div>
	</body>
</html>

运行效果：

更多使用可参考EasyUI文档来使用，文档上使用方法很清楚的哦~~

点击进入EasyUI教程

猜你喜欢

转载自blog.csdn.net/qq_38225558/article/details/83856509
今日推荐
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
周排行
计算机组成与设计（七）—— 除法器
Integer Approximation(分治+枚举)
大话数据库索引
windows10系统JDK的配置及下载地址
mysql实现秒值转换中原六仔平台搭建
Codeforces Round #556 (Div. 1)
百练1064 网线主管
Codeforces 995F Cowmpany Cowmpensation
子集生成之增量构造法，位向量法，二进制法
ERROR: cmd.exe failed with args /c "/APK\gradle\rungradle.bat...
每日归档
更多
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022