EasyUI入门（LinkButton，Tabs）

最新推荐文章于 2023-04-21 08:43:08 发布

乔你那熊色

最新推荐文章于 2023-04-21 08:43:08 发布

阅读量944

点赞数

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

本文链接：https://blog.csdn.net/qq_41160264/article/details/83044653

版权

easyui入门专栏收录该内容

4 篇文章 0 订阅

订阅专栏

今天在来按照文档上的Demo写一下效果。

一.LinkButton(按钮)

按钮组件使用超链接按钮创建。它使用一个普通的<a>标签进行展示。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态和折叠/展开以适应它的文本标签。

1.创建按钮

其实在页面中显示一个组件的方式有两种，一种是在html标签中用data-options属性来定义组件的各种属性设置。我们也可以写javascript，通过标签选择器和对应的方法来创建（我暂时理解为“方法”）。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI入门</title>
<!-- 在head中引入必要的js文件和css文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>

<script type="text/javascript">
   $(function(){
	   $('#btn2').linkbutton({    
		    iconCls: 'icon-save'   
		});
   });
</script>	
</head>
<body>
	<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">按钮大小根据文本长度自动扩展</a>    
    <a id="btn2" href="#">按钮大小根据文本长度自动扩展</a>
</body>
</html>

页面效果：

2.处理按钮的点击

也就是为按钮绑定点击事件。这里呢，为按钮绑定点击事件有3种方式，一种是通过href属性来指定按钮点击后跳转的页面。二是通过在标签中的为onclick事件指定js处理函数。三是通过标签选择器和bind方法为该标签捆绑点击事件。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI入门</title>
<!-- 在head中引入必要的js文件和css文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>

<script type="text/javascript">
	$(function(){    
	    $('#btn').bind('click', function(){    
	        alert('按钮被点击');    
	    });    

   });
</script>	
</head>
<body>
	<a href="1.jsp" class="easyui-linkbutton" data-options="iconCls:'icon-search'">点击进入1.jsp页面</a>  
	<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'"   
        onclick="javascript: $(function(){     alert('嘻嘻嘻');    });">easyui</a>
    <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>  
</body>
</html>

这里需要注意一下onclick中的javascript说明后面要执行的代码是javascript代码，所以我们只需要在里面写javascript代码即可，文档上的demo中是： onclick="javascript:alert('easyui')"；说明点击后提示easyui，但是我改成了 onclick="javascript: $(function(){ alert('嘻嘻嘻'); });" 仍然能提示“嘻嘻嘻”字样。

二.Tabs（选项卡）

1. 通过标签创建选项卡

通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给<div/>标签添加一个类ID'easyui-tabs'。每个选项卡面板都通过子<div/>标签进行创建，用法和panel(面板)相同。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI入门</title>
<!-- 在head中引入必要的js文件和css文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>

<script type="text/javascript">

</script>	
</head>
<body>
	<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">   
	    <div title="Tab1" style="padding:50px;display:none;">   
	        tab1 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111   
	    </div>   
	    <div title="Tab2" data-options="closable:true" style="overflow:scroll;padding:20px;display:none;">   
	        tab2 222222222222222222222222222222222222222222222222222222222222222222222222222222222222222  1
	        1
	        1   
	    </div>   
	    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">   
	        tab3    
	    </div>   
	</div> 
	<div style="width:250px;height:100px;background-color: red;overflow:auto">
		11112222222222333333333333333222 4444444444444444444444444444444444444444444444444444444
	</div>  
</body>
</html>

这里需要注意的几点是：div的padding属性有4种写法，

padding:10px; 意思是上下左右值全是10px。
padding:5px 10px; 意思是上下为5px，左右为10px。
padding:1px 2px 3px 4px; 这个写法意思是：上为1px，右为2px，下为3px，左为4px。
padding:5px 10px 7px; 这种写法意思是：上为5px，左右为10px，下为7px。

我们可以简单记：padding后面4个值定义的顺序分别为：上右下左（也就是顺时针）。

另一个就是div标签的overflow属性，它有5个值，每个值都有不同的作用：

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

也就是说，这个overflow是div的属性，而不是easytui框架的属性。我们完全可以自定义一个div来看看效果。另外，在div中，如果文本中用了“空格键”，那么div中的文本在相应位置会换行，而是用“Enter回车键”则在文本中出现一个空格。

2. 通过Javascript创建选项卡

下面的代码演示如何使用Javascript创建选项卡，当该选项卡被选择时将会触发'onSelect'事件。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI入门</title>
<!-- 在head中引入必要的js文件和css文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>

<script type="text/javascript">
	$(function(){
		$('#tt').tabs({ 
		    border:true,    
		    onSelect:function(title){    
		        alert(title+' is selected');    
		    }    
		}); 
		
		// 添加一个新的包含小工具菜单的选项卡面板，小工具菜单图标(8x8)被放置在关闭按钮之前。
		$('#tt').tabs('add',{    
		    title:'Tab1',    
		    content:'Tab1 Body',    
		    closable:true,    
		    tools:[{    
		        iconCls:'icon-mini-refresh',    
		        handler:function(){    
		            alert('refresh');    
		        }    
		    }]    
		}); 
		//获取选择的选项卡
		var pp = $('#tt').tabs('getSelected');    
		var tab = pp.panel('options').tab; //得到被选中的面板对象。
		alert(tab);
	});
</script>	
</head>
<body>
	<div id="tt" style="width:500px;height:250px;">   
		用javascript来创建选项卡。
	</div> 
</body>
</html>

页面效果：

首先定义一个div，然后将div设置为tabs，然后在往这个选项卡里面添加选项。

三.总结

var pp = $('#tt').tabs('getSelected'); 这句话我理解的是：找到tt标签，通过tabs方法（注意是方法）返回所有的选项卡面板，getSelected方法（注意是方法）返回被挑选的面板，我的理解就是方法中调用方法（不知道对不对。。。。）。

乔你那熊色

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EasyUI入门（LinkButton，Tabs）

今天在来按照文档上的Demo写一下效果。一.LinkButton(按钮) 按钮组件使用超链接按钮创建。它使用一个普通的&lt;a&gt;标签进行展示。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态和折叠/展开以适应它的文本标签。1.创建按钮其实在页面中显示一个组件的方式有两种，一种是在ht...
复制链接

扫一扫