【EasyUI篇】LinkButton按钮组件

微信公众号：程序yuan
关注可了解更多的教程。问题或建议，请公众号留言;

查看--> 全套EasyUI示例目录

5.LinkButton按钮组件

JSP文件

<%--Created by IntelliJ IDEA.User: ooyhaoDate: 2018/7/29 0029Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Droppable</title><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css"><script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/js/LinkButton.js"></script><style rel="stylesheet" type="text/css"></style>
</head>
<body style="margin-left: 200px; margin-top: 200px;"><%--<a href="#" class="easyui-linkbutton" iconCls="icon-ok">按钮</a>--%><a id="box"></a><a id="pox"></a><button id="btn1">禁用按钮</button><button id="btn2">启用按钮</button><button id="btn3">选择按钮</button><button id="btn4">取消选择按钮</button></body>
</html>

JS文件

$(function () {//全局修改// $.fn.linkbutton.defaults.disabled = true;$('#box').linkbutton({//------------- 属性列表 ---------------//将按钮重新定义一个id名称// id:'box1',//按钮文字text:"提交",//按钮图标iconCls:"icon-save",//设置图标的位置 left(默认) righticonAlign:'left',//禁用按钮// disabled:true,//设置按钮初始化时是否为选中状态，默认为false// selected:false,//设置true,则允许用户切换其状态是否被选中，可以实现checkbox复选效果，默认为false// toggle:true,//要是用单选框效果，需要与toggle配合使用// group:'sex',//设置扁平化效果，默认为false,// plain:true,});
//------------- 方法列表 -----------------//返回属性对象console.log($('#box').linkbutton('options'));//禁用按钮$("#btn1").click(function () {$("#box").linkbutton('disable');});//启用按钮$("#btn2").click(function () {$("#box").linkbutton('enable');});//选择按钮$("#btn3").click(function () {$("#box").linkbutton('select');});//取消选择按钮$("#btn4").click(function () {$("#box").linkbutton('unselect');});$('#pox').linkbutton({text:"取消",iconCls:'icon-cancel',toggle:true,group:'sex',});});

效果图

------------------------------------------------

关注小编微信公众号获取更多资源

【EasyUI篇】LinkButton按钮组件相关推荐

jQuery EasyUI，LinkButton(按钮)组件
转自:https://www.cnblogs.com/adc8868/p/6639570.html jQuery EasyUI,LinkButton(按钮)组件学习要点: 1.加载方式 2.属性列表 ...
第 7 章 LinkButton(按钮)组件
学习要点: 加载方式属性列表方法列表本节课重点了解 EasyUI 中 LinkButton(按钮)组件的使用方法,这个组件不依赖于其他组件. 一.加载方式 //class 加载方式 <a ...
EasyUI之Linkbutton按钮
1.样式按钮组件使用超链接按钮创建.它使用一个普通的<a>标签进行展示.它可以同时显示一个图标和文本,或只有图标或文字.按钮的宽度可以动态和折叠/展开以适应它的文本标签. 2.练习1:按 ...
设置 easyUi的linkbutton按钮生效失效
设置class="easyui-linkbuttond" 按钮生效失效失效: $("#xxx").linkbutton('disable'); 生效: $( ...
【EasyUI篇】一整套EasyUI示例集锦
目录: 1.可拖动组件Draggable 2.可放置组件Droppable 3.调整大小组件Resizable 4.Tooltip提示框组件 5.LinkButton按钮组件 6.ProgressBa ...
【Flutter】Flutter 拍照示例 ( 浮动按钮及点击事件 | 底部显示按钮组件 | 手势检测器组件 | 拍照并获取当前拍摄照片 | 从相册中选择图片 )
文章目录一.浮动按钮及点击事件二.底部显示按钮组件三.手势检测器组件四.image_picker 完整代码示例五.相关资源一.浮动按钮及点击事件一般使用 Scaffold 组件作为界面的 ...
第一百九十九节，jQuery EasyUI，Panel(面板)组件
jQuery EasyUI,Panel(面板)组件学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解EasyUI中Panel(面板)组件的使用方法,这个组件不依赖于其 ...
第二百二十三节，jQuery EasyUI，ComboBox(下拉列表框)组件
jQuery EasyUI,ComboBox(下拉列表框)组件,可以远程加载数据的下拉列表组件学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解 EasyUI 中 C ...
Intraweb之EasyUI篇
Intraweb一直是Delphi快速开发web应用的首选工具,但自带的控件较少,样式比较难看,TMS与IW倒是可用,可是要收费,对于我们这些习惯用免费的用户来说,想找个破解也比较费劲.EasyUI是 ...

【EasyUI篇】LinkButton按钮组件

查看--> 全套EasyUI示例目录

5.LinkButton按钮组件

【EasyUI篇】LinkButton按钮组件相关推荐

最新文章

热门文章