1. 首页
  2. 文章中心
  3. easyui入门

EasyUI入门（LinkButton，Tabs）

69 阅读 0 评论
我是靠谱客的博主 生动天空，最近开发中收集的这篇文章主要介绍EasyUI入门（LinkButton，Tabs），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

             今天在来按照文档上的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方法（注意是方法）返回被挑选的面板，我的理解就是方法中调用方法（不知道对不对。。。。）。

最后

以上就是生动天空为你收集整理的EasyUI入门（LinkButton，Tabs）的全部内容，希望文章能够帮你解决EasyUI入门（LinkButton，Tabs）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(46)

相关文章

iOS设置改变UILabel、UIButton的多种颜色和字体大小(非常好用)
iOS设置改变UILabel、UIButton的多种颜色和字体大小(非常好用)
小程序进阶学习03一、组件的使用二、模块化操作
小程序进阶学习03一、组件的使用二、模块化操作
UIButton上字体的对齐方式
UIButton上字体的对齐方式
easyui之自定义字体图标（鼠标覆盖时切换颜色）
easyui之自定义字体图标（鼠标覆盖时切换颜色）
EasyUI入门（LinkButton，Tabs）
EasyUI入门（LinkButton，Tabs）
easyui dialog 按钮动态命名
easyui dialog 按钮动态命名
jquery-easyui更改messager的按钮文字
jquery-easyui更改messager的按钮文字
iOS设置UIButton文字对齐方式和边距
iOS设置UIButton文字对齐方式和边距

评论列表共有 0 条评论

立即
投稿
返回
顶部