jQuery Easy UI LinkButton(button)包

时间:2023-12-17 13:50:32

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里面更换或者自己定义

下载源代码

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