jQuery Easy UI LinkButton(按钮)组件

最新推荐文章于 2022-01-04 16:13:38 发布

原创最新推荐文章于 2022-01-04 16:13:38 发布 · 7.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #easyui #linkbutton

jQuery 同时被 2 个专栏收录

21 篇文章

订阅专栏

jQuery

20 篇文章

订阅专栏

本文介绍了jQuery Easy UI中的LinkButton组件，作为基础组件，它提供了按钮的功能。文中包含示例，并提示可以通过修改CSS样式来自定义按钮的外观。读者可以下载源代码进行实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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中的样式),默认为null
		iconAlign : '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>

执行效果：