easyUI入门《十一、linkbutton基础：按钮》

最新推荐文章于 2022-05-17 18:15:51 发布
最新推荐文章于 2022-05-17 18:15:51 发布
阅读量512 收藏
点赞数
分类专栏： easyUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leijiahui/article/details/82388795
版权 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<!--引入基本库-->
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/jquery.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/locale/easyui-lang-zh_CN.js"></script>
		<link rel="stylesheet" href="jquery-easyui-1.5.5.4/themes/default/easyui.css" />
		<link rel="stylesheet" href="jquery-easyui-1.5.5.4/themes/icon.css" />
	</head>

	<body>
		<!--
			按钮跳转href：href="remote.html"
			按钮默认选中：selected:true
			按钮选中与不选择切换：toggle:true
			按钮图标位置：iconAlign:'right'
			按钮简单形式：plain:true
			按钮多选一：group:'g1',toggle:true
		-->
		<div>基础菜单</div>
		<a href="tree.html" class="easyui-linkbutton">text</a>
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',selected:true">icon</a>
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-clipart',iconAlign:'left'">icon</a>
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-clipart',iconAlign:'left',size:'large'">icon</a>
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-clipart',iconAlign:'top',toggle:true">icon</a>
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-clipart',iconAlign:'top',toggle:true,plain:true">icon</a>

		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',group:'g1',toggle:true">icon1</a>
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',group:'g1',toggle:true">icon2</a>
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',group:'g1',toggle:true">icon3</a>

		<!--
			菜单弹出对齐方式：menuAlign:'right'
			按钮什么情况弹出菜单：easyui-splitbutton
						   easyui-menubutton
		-->
		<br /><br />
		<div>菜单按钮</div>
		<a href="tree.html" class="easyui-menubutton" data-options="iconCls:'icon-add',menu:'#mm1'">Add</a>
		<a href="tree.html" class="easyui-menubutton" data-options="iconCls:'icon-help',menu:'#mm2',menuAlign:'left'">Help</a>
		<a href="tree.html" class="easyui-splitbutton" data-options="iconCls:'icon-help',menu:'#mm3',menuAlign:'right'">Help2</a>
		<div id="mm1" class="easyui-menu" style="width: 120px;">
			<div>New</div>
			<div>Save</div>
			<div>Exit</div>
		</div>
		<div id="mm2" class="easyui-menu" style="width: 120px;">
			<div data-options="iconCls:'icon-add',name:'new'">New</div>
			<div data-options="iconCls:'icon-save',name:'save'">Saveqqqqqqqqqq</div>
			<div data-options="name:'exit'">Exit</div>
		</div>
		<div id="mm3" class="easyui-menu" style="width: 120px;">
			<div data-options="iconCls:'icon-add',name:'new'">New</div>
			<div data-options="iconCls:'icon-save',name:'save'">Saveqqqqqqqqqq</div>
			<div data-options="name:'exit'">Exit</div>
		</div>

		<br /><br />
		<div>选项卡嵌套按钮</div>
		<div style="margin:20px 0;"></div>
		<div id="tt" style="width:700px;height:250px">
			<div title="About" style="padding:10px">

			</div>
			<div title="My Documents" style="padding:10px">
				<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul>
			</div>
			<div title="Help" style="padding:10px">
				This is the help content.
			</div>
		</div>
		<div id="mm">
			<div>Welcome</div>
			<div>Help Contents</div>
			<div data-options="iconCls:'icon-search'">Search</div>
			<div>Dynamic Help</div>
		</div>

		<script>
			$(function() {
				var p = $('#tt').tabs().tabs('tabs')[2];
				var mb = p.panel('options').tab.find('a.tabs-inner');
				mb.menubutton({
					menu: '#mm',
					iconCls: 'icon-help'
				}).click(function() {
					$('#tt').tabs('select', 2);
				});
			});
		</script>

		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<p>基础弹框</p>
		<a href="#" class="easyui-linkbutton" onclick="show()">Show</a>
		<script type="text/javascript">
			function show() {
				$.messager.show({
					title: 'My title',
					msg: 'this is message',
					showType: 'show'
				})
			}
		</script>

		<a href="#" class="easyui-linkbutton" onclick="slide()">Slide</a>
		<script type="text/javascript">
			function slide() {
				$.messager.show({
					title: 'My title',
					msg: 'this is message',
					showType: 'slide',
					timeout: 5000
				})
			}
		</script>

		<a href="#" class="easyui-linkbutton" onclick="fade()">fade</a>
		<script type="text/javascript">
			function fade() {
				$.messager.show({
					title: 'My title',
					msg: 'this is message',
					showType: 'fade'
				})
			}
		</script>

		<a href="#" class="easyui-linkbutton" onclick="progress()">progress</a>
		<script type="text/javascript">
			function progress() {
				$.messager.progress({
					title: 'progress哈哈哈',
					msg: 'loading...哈哈哈',
				});
				setTimeout(function() {
					$.messager.progress("close")
				}, 3000)
			}
		</script>
		
		
		<p>位置弹框</p>
				<p>
			<a href="#" class="easyui-linkbutton" onclick="topLeft()">topLeft</a>
		</p>
		<script type="text/javascript">
			function topLeft(){
				$.messager.show({
					title:'My title',
					msg:'this is message',
					showType:'show',
					style:{
						right:"",
						left:0,
						top:document.body.scrollTop+document.documentElement.scrollTop,
						bottom:""
					}
				})
			}
		</script>
		
		<p>
			<a href="#" class="easyui-linkbutton" onclick="topCenter()">topCenter</a>
		</p>
		<script type="text/javascript">
			function topCenter(){
				$.messager.show({
					title:'My title',
					msg:'this is message',
					showType:'show',
					style:{
						right:"",
						//left:0,
						top:document.body.scrollTop+document.documentElement.scrollTop,
						bottom:""
					}
				})
			}
		</script>
		
		<p>
			<a href="#" class="easyui-linkbutton" onclick="topRight()">topRight</a>
		</p>
		<script type="text/javascript">
			function topRight(){
				$.messager.show({
					title:'My title',
					msg:'this is message',
					showType:'show',
					style:{
						right:0,
						left:'',
						top:document.body.scrollTop+document.documentElement.scrollTop,
						bottom:""
					}
				})
			}
		</script>
		
		
		<p>
			<a href="#" class="easyui-linkbutton" onclick="centerLeft()">centerLeft</a>
		</p>
		<script type="text/javascript">
			function centerLeft(){
				$.messager.show({
					title:'My title',
					msg:'this is message',
					showType:'show',
					style:{
						right:"",
						left:0,
						//top:document.body.scrollTop+document.documentElement.scrollTop,
						//bottom:""
					}
				})
			}
		</script>
		
		<p>
			<a href="#" class="easyui-linkbutton" onclick="centerRight()">centerRight</a>
		</p>
		<script type="text/javascript">
			function centerRight(){
				$.messager.show({
					title:'My title',
					msg:'this is message',
					showType:'show',
					style:{
						right:0,
						left:"",
//						top:document.body.scrollTop+document.documentElement.scrollTop,
//						bottom:""
					}
				})
			}
		</script>
		
		<p>
			<a href="#" class="easyui-linkbutton" onclick="center()">center</a>
		</p>
		<script type="text/javascript">
			function center(){
				$.messager.show({
					title:'My title',
					msg:'this is message',
					showType:'show',
					style:{
//						right:0,
//						left:'',
//						top:document.body.scrollTop+document.documentElement.scrollTop,
//						bottom:""
					}
				})
			}
		</script>
		
		
		<p>
			<a href="#" class="easyui-linkbutton" onclick="bottomLeft()">bottomLeft</a>
		</p>
		<script type="text/javascript">
			function bottomLeft(){
				$.messager.show({
					title:'My title',
					msg:'this is message',
					showType:'show',
					style:{
						right:"",
						left:0,
						top:"",
						bottom:document.body.scrollTop-document.documentElement.scrollTop
					}
				})
			}
		</script>
		
		<p>
			<a href="#" class="easyui-linkbutton" onclick="bottomRight()">bottomRight</a>
		</p>
		<script type="text/javascript">
			function bottomRight(){
				$.messager.show({
					title:'My title',
					msg:'this is message',
					showType:'show'
				})
			}
		</script>
		
		<p>
			<a href="#" class="easyui-linkbutton" onclick="bottomCenter()">bottomCenter</a>
		</p>
		<script type="text/javascript">
			function bottomCenter(){
				$.messager.show({
					title:'My title',
					msg:'this is message',
					showType:'show',
					style:{
//						right:"",
//						left:"",
						top:"",
						bottom:document.body.scrollTop-document.documentElement.scrollTop
					}
				})
			}
		</script>
		
		
		<br /><br /><br /><br /><br /><br /><br /><br />
		<!--
			alert
			confirm
			prompt
		-->
		<p>交互联系框</p>
		<p>注意函数名，不要调用了系统的函数</p>
		<a class="easyui-linkbutton" onclick="myalert()">alert</a>
		<a class="easyui-linkbutton" onclick="myconfirm()">myconfirm</a>
		<a class="easyui-linkbutton" onclick="myprompt()">myprompt</a>
		<script type="text/javascript">
			function myalert(){
//				$.messager.alert("title","context","info");
//				$.messager.alert("title","context","error");
//				$.messager.alert("title","context","question");
				$.messager.alert("title","context","warning");
			}
			function myconfirm(){
				$.messager.confirm("title","context",function(r){
					alert(r)
				});
			}
			function myprompt(){
				$.messager.prompt("title","context",function(r){
					if (r){
						alert('you type: '+r);
					}
				});
			}
			
		</script>

	</body>

</html>

 

leijiahui
关注
专栏目录
2、EasyUi:常用的插件button
小王的博客
09-16 1016
easyui学习，button按钮的使用
easyui 快速入门之第四章 DataGrid数据查询
qq_61313896的博客
05-07 923
一：DataGrid（数据表格） DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。 DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。 使用案例： 从现有的表格元素创建DataGrid，在HTML中定义列、行和数据。 通过<table>标签创建DataGrid控件。在表格内使用<th>...
easyUI ---linkButton
weixin_33816821的博客
06-25 436
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>按钮</title> <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/default/easyui...
003. EsayUI系列之easyui-linkbutton
热门推荐
06-13 1万+
.easyui-linkbutton 链接类型的按钮每个web页面或多或少都会有几个按钮，来引导或提示用户去做一些事情，easyui提供了多种 链接类型按钮，可供选择。 属性如下： disabled: True：禁用该按钮。默认false。 plain: True：显示一个普通效果。默认false。 demo1：应用    class="easyui-linkbutton
EasyUI入门（LinkButton，Tabs）
乔你那熊色
10-14 1053
             今天在来按照文档上的Demo写一下效果。 一.LinkButton(按钮)              按钮组件使用超链接按钮创建。它使用一个普通的&lt;a&gt;标签进行展示。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态和折叠/展开以适应它的文本标签。 1.创建按钮             其实在页面中显示一个组件的方式有两种，一种是在ht...
【EasyUI篇】LinkButton按钮组件
ouYang的博客
08-29 5517
微信公众号：程序yuan 关注可了解更多的教程。问题或建议，请公众号留言; 查看--&gt; 全套EasyUI示例目录 5.LinkButton按钮组件     JSP文件 &lt;%--   Created by IntelliJ IDEA.   User: ooyhao   Date: 2018/7/29 0029   Time: 9:21 --%&gt; &lt;%...
jQuery EasyUI 框架教程：从入门到精通
"jQuery EasyUI 基础入门" jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件，提供了创建网页所需的一切，帮助用户轻松建立站点。本教程将告诉您如何使用 jQuery EasyUI 框架创建应用。 **...
EasyUI【入门】
m0_64522859的博客
05-06 657
目录 1.jQuery EasyUI框架概述 1.1 什么是jQuery EasyUI? 1.2 jQuery Easy的作用 1.3 EasyUI的目录说明 1.3.1 下载路径 1.3.2 必须的基础支持库 1.3.3 目录说明 2.WEB项目搭建EasyUI环境 搭建环境的步骤如下： 3.EasyUI入门示例 3.1 标准开发步骤 3.2 代码模板 3.3 EasyUI的三大基础概念 3.3.1 属性设置 3.3.2 事件触发设置 3.3.3 方法调用设置 4
easyui快速入门
qq_67771954的博客
05-17 299
一.jQuery EasyUI简介 封装大量的jQuery插件(简化ajax，jquery，css样式，布局) 二.jQuery EasyUI框架概述 1.1 什么是jQuery EasyUI? JQuery EasyUI就是一套基础JQuery的富客户端的UI框架(简化ajax，jquery，css样式，布局)。像这些将常用的控件封装成一个UI库的框架统称富客户端框架 1.2 jQuery Easy的作用 既然EasyUI是一个UI框架，所以它的功能就是用于处理页面的展示效果的。通常用于完
"easyUI简介：入门案例及必需的js引入
比如，我们可以用以下代码创建一个文本框和一个按钮： ```html <input class="easyui-textbox" data-options="label:'用户名:'"> <button class="easyui-linkbutton" data-options="iconCls:'icon-search', plain:...
easyUI LinkButton,
YHC
08-01 9208
@author YHC $.fn.linkbutton.defaults覆盖默认值 linkbutton用来创建超链接按钮,它代表一个常规的标签,可以显示一个icon和文本,或者仅仅只是icon或者是文本,这个button的宽度是动态收缩/或者是展开 适应它的文本标签. 使用示例 创建 linkbutton 从标记创建linkbutton会更简单 easyui
EasyUI Linkbutton 链接按钮
qq_34579060的博客
05-23 954
通过 $.fn.linkbutton.defaults 重写默认的 defaults。链接按钮（linkbutton）用于创建一个超链接按钮。它是一个正常的 &lt;a&gt; 标记的表示。它可显示图标和文本，或者仅仅显示图标和文本中的一个。按钮宽度可动态收缩/扩展以适应其文本标签。用法创建链接按钮（linkbutton）从标记创建链接按钮（linkbutton）更容易。&lt;a id="btn...
EasyUI之Linkbutton按钮
sunpy
04-08 4177
1.样式 按钮组件使用超链接按钮创建。它使用一个普通的标签进行展示。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态和折叠/展开以适应它的文本标签。 2.练习1：按钮 link button <a id="add" href="#" class="easyui-linkbutton" data-opti
EasyUI系列学习(七)-Linkbutton(按钮)
weixin_30423977的博客
02-19 702
一、加载组件 1.使用class加载 <a href="#" class="easyui-linkbutton">按钮</a> 2.使用js加载 <a href="#" id="btn"></a> <script> $(function () { $("#btn").link...
【连载】研究EasyUI系统— LinkButton组件
来啊，相互伤害啊
03-26 4924
linkbutton是easyui框架中的按钮组件，也是其他诸如MenuButton等各种形式按钮组件的父组件。linkbutton基于html中<a>标签创建，用户可以在按钮中添加图标和文字，是一种很常用的组件。
easyUI之LinkButton（按钮）
weixin_30514745的博客
12-04 988
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>LinkButton（按钮）</title> <meta http-equiv="keywords" content="学习,IT学...
easyui之linkbutton控件分析
火焰
06-09 1854
/** * linkbutton - jQuery EasyUI * * Licensed under the GPL: * http://www.gnu.org/licenses/gpl.txt * * Copyright 2010 stworthy [ stworthy@gmail.com ] */ /** * 首先,一个按钮的html元素结构如下: * href
jQuery EasyUI，LinkButton(按钮)组件
weixin_33768481的博客
11-13 228
转自：https://www.cnblogs.com/adc8868/p/6639570.html jQuery EasyUI，LinkButton(按钮)组件   学习要点： 　　1.加载方式 　　2.属性列表 　　3.方法列表   本节课重点了解 EasyUI 中 LinkButton(按钮)组件的使用方法，这个组件不依赖于其 他组件。   一．加载方式 //class 加载方式 &lt;a...
学习 easyui 之四：禁用 linkbutton 问题
weixin_34088598的博客
05-13 304
  1.问题的起源 linkbutton 是 easyui 中常用的一个控件，我们可以使用它创建按钮。用法很简单，使用 a 元素，标记上 easyui-linkbutton 的类就可以看到按钮了。 &lt;a id="btn" class="easyui-linkbutton"&gt;这是一个按钮&lt;/a&gt; 看起来就是这个样子 或者使用代码方式。 $("#bt...
jQueryEasyUI入门与实战教程：快速构建美观UI
学习jQueryEasyUI的前提是具备jQuery的基础知识，这包括对jQuery的基本语法和工作原理的了解。推荐参考jQuery课程的第66课第一节来获取所需的基础。 本书还强调了jQueryEasyUI的特点，包括但不限于： 1. 集合了大量...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值