jQuery Easy UI LinkButton(button)包

LinkButton(button)包,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>
运行效果:

jQuery Easy UI LinkButton(button)包

ps:想改动button的样式能够去css里面更换或者自己定义

下载源代码

版权声明:本文博客原创文章,博客,未经同意,不得转载。

你可能感兴趣的:(easy ui)