easyui LinkButton

最新推荐文章于 2021-09-16 19:19:44 发布
最新推荐文章于 2021-09-16 19:19:44 发布
阅读量133 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/wangcq/p/4277301.html
版权

 

http://www.zi-han.net/case/easyui/menu&button.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>LinkButton - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="demo.css">
    <script type="text/javascript" src="../jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="../jquery.easyui.min.js"></script>
    <style>
        .toolbar{
            height:30px;
            padding:5px;
        }
    </style>
    <script>
        function enable(){
            $('a.easyui-linkbutton').linkbutton('enable');
        }
        function disable(){
            $('a.easyui-linkbutton').linkbutton('disable');
        }
        function changetext(){
            $('#add').linkbutton({text:'new add'});
        }
    </script>
</head>
<body>
    <h2>LinkButton</h2>
    <div class="demo-info" style="margin-bottom:10px">
        <div class="demo-tip icon-tip"></div>
        <div>Buttons can be created from <a/> link.</div>
    </div>
    
    <div style="padding:5px;">
        <a href="#" οnclick="enable()">enable</a> |
        <a href="#" οnclick="disable()">disable</a> |
        <a href="#" οnclick="changetext()">change add text</a> |
        <a href="#" οnclick="javascript:$('#add').linkbutton({disabled:true})">disable add button</a> |
        <a href="#" οnclick="javascript:$('#add').linkbutton({disabled:false})">enable add button</a> |
        <a href="#" οnclick="javascript:$('a.easyui-linkbutton').linkbutton({plain:true})">make to plain</a> |
        <a href="#" οnclick="javascript:$('a.easyui-linkbutton').linkbutton({plain:false})">restore</a>  
    </div>
    <p>3D</p>
    <div class="toolbar">
        <a id="add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">Remove</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">Save</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',disabled:true">Cut</a>
        <a href="#" class="easyui-linkbutton" οnclick="javascript:alert('ttt')">Text Button</a>
    </div>
    <div class="toolbar">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">Ok</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-no'">No</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">Cancel</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'">Reload</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">Search</a>
    </div>
    <div class="toolbar">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-print'">Print</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help'">Help</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-undo'">Undo</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-redo'">Redo</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-back'">Back</a>
    </div>
    
    <p>Plain</p>
    <div style="padding:5px;background:#fafafa;width:500px;">
        <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-cancel'">Cancel</a>
        <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-reload'">Reload</a>
        <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-search'">Search</a>
        <a href="#" class="easyui-linkbutton" data-options="plain:true">Text Button</a>
        <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-print'">Print</a>
    </div>
    
    <p>DEMO1</p>
    <div style="padding:5px;background:#fafafa;width:500px;">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">Cancel</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'">Refresh</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">Query</a>
        <a href="#" class="easyui-linkbutton">text button</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-print'">Print</a>
    </div>
    
    <p>DEMO2</p>
    <div style="padding:5px;background:#fafafa;width:500px;">
        <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-cancel'">Cancel</a>
        <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-reload'">Refresh</a>
        <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-search'">Search</a>
        <a href="#" class="easyui-linkbutton" data-options="plain:true">text button</a>
        <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-print'">Print</a>
        <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-help'"> </a>
        <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-save'"></a>
        <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-back'"></a>
    </div>
    
</body>
</html>

转载于:https://www.cnblogs.com/wangcq/p/4277301.html

weixin_30793643
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
EasyUI在Panel上动态添加LinkButton按钮
08-29
Easyui的panel面板，在panel的面板中动态添加Linkbuton按钮的编辑方法，下面把实现思路及代码记录到脚本之家平台，供大家参考
easyUI笔记11
08-08
1. 链接按钮：`<a href="#" class="easyui-linkbutton" iconCls="icon_cancel">Cancel</a>` 2. 菜单按钮：`<a href="#" class="easyui-menubutton" menu="#menu_help" iconCls="icon_help">Help</a>` 3. 分割按钮：`...
【连载】研究EasyUI系统— LinkButton组件
来啊，相互伤害啊
03-26 4866
linkbutton是easyui框架中的按钮组件，也是其他诸如MenuButton等各种形式按钮组件的父组件。linkbutton基于html中<a>标签创建，用户可以在按钮中添加图标和文字，是一种很常用的组件。
【EasyUI篇】LinkButton按钮组件
ouYang的博客
08-29 5420
微信公众号：程序yuan 关注可了解更多的教程。问题或建议，请公众号留言; 查看--&gt; 全套EasyUI示例目录 5.LinkButton按钮组件     JSP文件 &lt;%--   Created by IntelliJ IDEA.   User: ooyhao   Date: 2018/7/29 0029   Time: 9:21 --%&gt; &lt;%...
easyUI之LinkButton（按钮）
weixin_30514745的博客
12-04 969
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>LinkButton（按钮）</title> <meta http-equiv="keywords" content="学习,IT学...
Easyui之datagrid新增删除和批量删除
A2895922320的博客
09-16 689
一：新增 第一步：给页面添加一个新增的按钮 <a id="btn-add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">新增</a> 第二步：给新增按钮加一个点击事件，点击打开一个新增的窗口 但这会出来一个问题因为窗体是和修改是一个窗体（修改参考上一篇博客）你选中了那个点击修改然后再点新增也会回显到新增那个窗口上 只需要清空一下表单数据就行了 clear...
Easyui修改LinkedButton的按钮文本
majian_1987的专栏
02-16 1万+
$('#pauseCtrl').linkbutton({text:'暂停'});
EasyUI概要1
08-08
工具栏上的按钮（如 "New User"、"Edit User" 和 "Remove User"）是 EasyUI 的 LinkButton 组件，它们通过 `onclick` 事件绑定到相应的功能函数。例如，`editUser()` 函数通常会打开一个对话框来编辑选定的用户信息...
easyui皮肤组件
09-28
$('.easyui-linkbutton').linkbutton('refresh'); } }); // 使用 "blue" 皮肤 $('body').easyuiTheme('blue'); ``` 在压缩包文件名称列表中提到的 "web"，可能是包含整个 Web 应用程序的文件夹，里面可能包含了 ...
easyui使用技巧
02-14
easyui常用技术，linkbutton、menubutton、datagrid、treegrid、combobox、updateRow、tree的汉化、构建tree...等的介绍详细代码。
003. EsayUI系列之easyui-linkbutton
热门推荐
06-13 1万+
.easyui-linkbutton 链接类型的按钮每个web页面或多或少都会有几个按钮，来引导或提示用户去做一些事情，easyui提供了多种 链接类型按钮，可供选择。 属性如下： disabled: True：禁用该按钮。默认false。 plain: True：显示一个普通效果。默认false。 demo1：应用    class="easyui-linkbutton
EasyUI Linkbutton 链接按钮
qq_34579060的博客
05-23 923
通过 $.fn.linkbutton.defaults 重写默认的 defaults。链接按钮（linkbutton）用于创建一个超链接按钮。它是一个正常的 &lt;a&gt; 标记的表示。它可显示图标和文本，或者仅仅显示图标和文本中的一个。按钮宽度可动态收缩/扩展以适应其文本标签。用法创建链接按钮（linkbutton）从标记创建链接按钮（linkbutton）更容易。&lt;a id="btn...
easyUI ---linkButton
weixin_33816821的博客
06-25 413
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>按钮</title> <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/default/easyui...
EasyUI之Linkbutton按钮
sunpy
04-08 4134
1.样式 按钮组件使用超链接按钮创建。它使用一个普通的标签进行展示。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态和折叠/展开以适应它的文本标签。 2.练习1：按钮 link button <a id="add" href="#" class="easyui-linkbutton" data-opti
jQuery easyUI中LinkButton获取它的属性值
聆听梦飞扬的博客
11-06 1325
jQuery easyUI中LinkButton获取它的属性值 LinkButton按钮如下： <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a> 获取该按钮的属性值如下： //1.获取文本 var text = $('#btn')....
在easyui DataGrid 中使用 linkbutton
zone
10-27 4058
如果 直接在 field 的 formatter 中直接 return 一个linkbutton 按钮，则无法显示图标，只有普通的 a 标签，无法加载样式，因为easyui 只在页面装载时渲染标签，因此在使用formatter格式化列数据后，动态添加的linkbutton样式无法渲染样式，需要在 datagrid 加载完后进行重新渲染，使用 onLoadSuccess 进行对 linkbutton
easyui-linkbutton
最新发布
05-18
EasyUI中的linkbutton组件是一个超链接按钮，它可以用于触发某些操作或链接到其他页面。以下是一个基本的linkbutton示例： ```html <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add', ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值