jQuery Easy UI LinkButton(ボタン)コンポーネント

2409 ワード
jquery イージー. linkbutton
LinkButton(ボタン)コンポーネント、easyuiベースコンポーネントの1つ
例:
<!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>
実行効果:
ps:ボタンのスタイルを変更するにはcssで交換したりカスタマイズしたりすることができます
クリックしてソースコードをダウンロード
jQueryシミュレーションハッカー帝国マトリックス効果例
Domツリーのロード後に実行、jQueryのready