jQuery Easy UI LinkButton(按钮)组件

来源：互联网发布：淘宝客服怎么更改编辑：程序博客网时间：2024/06/05 20:16

LinkButton(按钮)组件，easyui基础组件之一

示例：

<!DOCTYPE html><html><head><title>jQuery Easy UI</title><meta charset="UTF-8" /><script type="text/javascript" src="easyui/jquery.min.js"></script><script type="text/javascript" src="easyui/jquery.easyui.min.js"></script><script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script><link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" /><link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" /><script>$(function () {//$.fn.linkbutton.defaults.iconCls = 'icon-add';$('#btn1').linkbutton({//id : 'btn2',//没搞明白干嘛用的,跟节点ID设置不一样值，在获取属性的时候报错//disabled : true,//是否禁用toggle : true,//设置true就是允许用户点击的时候切换选中与未选中的状态//selected : true,//默认是false  未选中状态//group : 'sex',//指定相同组名的按钮同属于一个组，可实现radio单选效果plain : true,//默认false，设置true的时候显示简洁效果text : '剪切',iconCls : 'icon-cut',//按钮图标 (参照icon.css中的样式),默认为nulliconAlign : 'right'//按钮图标位置 值为left或者right  默认left});console.log($('#btn1').linkbutton('options').id);//$('#btn1').linkbutton('disable');//禁用//$('#btn1').linkbutton('enable'); //启用$('#btn1').linkbutton('select'); //选中//$('#btn1').linkbutton('unselect');//取消选中状态//****************************************************************************************$("#btn2").linkbutton({group:'SEX',text :'男',toggle:true,selected:true});$("#btn3").linkbutton({group:'SEX',text :'女',toggle:true});});</script></head><body style="margin:100px;"><strong>基本示例：</strong></br></br><a id="btn1" href="###"></a></br></br><strong>group属性实现单选按钮：</strong></br></br><a id="btn2" href="###"></a><a id="btn3" href="###"></a></body></html>

执行效果：

ps：想修改按钮的样式可以去css里面更换或者自定义

点击下载源代码

0 0