6.1 创建LinkButton

最新推荐文章于 2021-12-15 08:00:00 发布
最新推荐文章于 2021-12-15 08:00:00 发布
阅读量1.8k 收藏
点赞数
分类专栏： jQuery-EasyUI

一般来说，按钮使用button标签创建，Link Button却是使用a标签创建。下面是Link Button按钮的演示效果：

http://www.jeasyui.com/tutorial/mb/linkbutton_demo.html

创建Link Button，只需要将一个class属性值为“easyui-lingkbutton”的样式添加到a标签中。下面我们演示如何将a标签变成按钮，首先在web目录下创建buttonDemo文件夹，在文件夹下创建buttonDemo.html。linkButtonDemo.html代码如下：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>linkButton</title>
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>

<body>
<div style="padding:5px;background:#fafafa;width:500px;border:1px solid #ccc">  
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel">Cancel</a>  
    <a href="#" class="easyui-linkbutton" iconCls="icon-reload">Refresh</a>  
    <a href="#" class="easyui-linkbutton" iconCls="icon-search">Query</a>  
    <a href="#" class="easyui-linkbutton">text button</a>  
    <a href="#" class="easyui-linkbutton" iconCls="icon-print">Print</a>  
</div>  
   
<div style="padding:5px;background:#fafafa;width:500px;border:1px solid #ccc">  
    <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-cancel">Cancel</a>  
    <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-reload">Refresh</a>  
    <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-search">Query</a>  
    <a href="#" class="easyui-linkbutton" plain="true">text button</a>  
    <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-print">Print</a>  
    <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-help"></a>  
    <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a>  
    <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-back"></a>  
</div>
</body>
</html>

注意：不要忘了将引入的文件放入buttonDemo文件夹，和前面的程序相比，引入文件新增加了：<link rel="stylesheet" type="text/css"href="themes/icon.css">。这行代码表示允许我们使用小图标。iconCls属性表示引用不同的图标。

河职院杨浪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML 事件解说之二 Button Link CheckBox Select
lanceli2008的专栏
07-16 800
前一篇说到了 tab 键和鼠标切换元素焦点的事件顺序，这个对所以元素都适用，在这里再强调下 tab 键：{keydown(theTextbox - 9)} {keypress(theTextbox - 9)} {blur(theTextbox)} {focus(theTextbox1)} {select(theTextbox1)} {keyup(theTextbox1 - 9)} 
[极致用户体验] 你的 Link Button 能让用户选择新页面打开吗？
Hull Qin
08-15 5190
什么是Link Button? 我想表达的是「需要导航能力的可点击元素」。如果你追求极致用户体验，一定要允许用户新页面打开。因此最好用标签实现，但也引入了新的问题。本文给出了完美的解决方案。...
Element UI极简教程(2)：Icon、Button、Link组件的使用
ningnan9801的博客
12-15 6523
Java大联盟 致力于最高效的Java学习关注B 站搜索：楠哥教你学Java获取更多优质视频教程Icon 图标Element UI 的 Icon 组件提供了一套常用的图标集合，直接使...
按钮点击链接的link_to
hhg08的专栏
12-12 271
直接使用button_to效果不是很好，会跑飞
链接按钮LinkButton（按钮组）
weixin_30772105的博客
01-23 498
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Button Group - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href=".....
3、Web 窗体的基本控件——按钮控件（Button，LinkButton）
C136C136的博客
04-21 1574
3、Web 窗体的基本控件——按钮控件（Button，LinkButton） 按钮控件（Button，LinkButton） 前端 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="WebApplication2.WebForm4" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"
ASP.NET.4揭秘
06-08
6.1 创建主题204 6.2 在主题中添加皮肤205 6.2.1 创建命名皮肤206 6.2.2 theme与stylesheetthemes208 6.2.3 禁用主题209 6.2.4 在web配置文件中注册主题211 6.3 在主题中添加css212 6.3.1 在主题中添加多个css215 ...
ASP.NET 控件的使用
04-02
6.1 创建主题 182 6.2 在主题中添加皮肤 183 6.2.1 创建命名皮肤 184 6.2.2 Themes与StyleSheetThemes 185 6.2.3 禁用主题 187 6.2.4 在Web配置文件中注册主题 188 6.3 在主题中添加CSS 189 6.3.1 在主题中添加多个...
ASP.NET3.5从入门到精通
03-13
5.4 按钮控件（Button，LinkButton，ImageButton） 5.4.1 按钮控件的通用属性 5.4.2 Click 单击事件 5.4.3 Command 命令事件 5.5 单选控件和单选组控件（RadioButton 和RadioButtonList） 5.5.1 单选控件...
asp.net教学讲义
08-22
2.5.2 Button、ImageButton、LinkButton、HyperLink控件 27 2.5.3 选择控件 29 2.5.4 Panel和PlaceHolder控件 32 第三章：HTML控件和验证控件 35 3.1 HTML服务器控件简介 35 3.2 HTML服务器控件与Web服务器控件区别 ...
ASP.NET 3.5 开发大全11-15
02-12
5.4 按钮控件（Button，LinkButton，ImageButton） 5.4.1 按钮控件的通用属性 5.4.2 Click单击事件 5.4.3 Command命令事件 5.5 单选控件和单选组控件（RadioButton和RadioButtonList） 5.5.1 单选控件（RadioButton...
Vue通过router-link或者button跳转到一个新的页面
热门推荐
每一个不曾起舞的日子，都是对生命的辜负
07-28 7万+
a、商品列表页面如下（点击'跳转到购物车页面'就会跳到一个新的页面，而不是在同一个页面加载一个组件） &lt;template&gt; &lt;div&gt; 这是商品列表页面 &lt;router-link to='/goods/title'&gt;显示商品标题&lt;/router-link&gt; &lt;router-link to='/goods/image...
Button的类似超链接样式-LinkButton Style
qq_38138159的博客
05-31 1745
  实现方式一(只有单个按钮推荐)&lt;!--LinkButton Style [Start]--&gt;  &lt;Style x:Key="LinkButton" TargetType="{x:Type Button}"&gt;         &lt;Setter Property="Template"&gt;          &lt;Setter.Value&gt;   
各种Button，Link组件的局限和搭配
yourenyouyu的专栏
06-16 537
各种jsf框架提供了相同功能的不同组件实现，他们都解决了某些问题，却又增添了新的问题，必须深刻理解才能在不同的场景下正确的使用不同的组件。 h:commandButton 可以提交表单，但不能传递参数 h:commandLink 可以提交表单，又能传递参数，但是以链接的形式展现   a:commandButton a:commandLink 都可以传递参数，但只能局部刷新页面 &lt;a:acti...
rails中link_to与button_to的一个功能差异
weixin_34174132的博客
02-07 164
页面中本来设计一个按钮,功能是当按下时跳转到index方法,然后实现一段功能.关键是其中需要传递一个参数show_all,其值为true. index方法中通过判断是否含有该参数来实现不同的逻辑,类似如下: if params[:show_all] @products = Product.all else ...
C# 自定义控件开发
weixin_30618985的博客
02-09 308
（转）C#自定义控件 2010-11-06 10:34 自定义控件开发 一般而言，Visual Studio 2005中自带的几十种控件已经足够我们使用了，但是，在一些特殊的需求中，可能需要一些特殊的控件来与用户进行交互，这时，就需要我们自己开发新的、满足用户需求的控件。(www.hicode.cn)要开发自己的控件，有几种方法：复合控件（Composite ...
easyui-linkbutton
最新发布
05-18
上述示例中，我们创建了一个带有“Add”文本和“icon-add”图标的linkbutton。plain:true属性使按钮背景透明，只显示图标和文本。 我们还可以通过JavaScript动态地创建和配置linkbutton组件，例如： ```javascript...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值