第七章：LinkButton（按钮）组件
学习要点：
加载方式属性列表方法列表
一、加载方式：
1.class加载方式：
<!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>
<script type="text/javascript" src="js/index.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"/>
</head>
<body style="margin:100px;">
<!--
<a href="###" class="easyui-linkbutton">按钮</a>
-->
<a href="###" id="#box">按钮</a>
</body>
</html>
2.JS调用：
<!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>
<script type="text/javascript" src="js/index.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"/>
</head>
<body style="margin:100px;">
<!--
<a href="###" class="easyui-linkbutton">按钮</a>
-->
<a href="###" id="#box">按钮</a>
</body>
</html>
$(function(){
$('#box').linkbutton({
});
二、属性列表：
linkButton属性
属性名值说明idstring组件的ID属性。默认为nulldisabledboolean设置true则禁止按钮。默认为falsetoggleboolean设置true则允许用户切换其状态是否被选中，可实现checkbox复选效果。默认为falseselectedboolean定义按钮初始的选择状态，true是别选中，false为未选中，默认为false。groupstring指定相同组名的按钮同属于一个组，可实现radio单选效果，默认为null。plainboolean设置true时显示简洁效果，默认为false。text string按钮文字。默认为空字符串。iconClsstring显示在按钮文字左侧的图标（16*16）的css类ID。默认为nulliconAlignstring按钮图标位置，默认为left，还有right。
<!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>
<script type="text/javascript" src="js/index.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"/>
</head>
<body style="margin:100px;">
<!--
<a href="###" class="easyui-linkbutton">按钮</a>
-->
<a href="###" id="#box">按钮</a>
<a href="###" id="#pox">按钮</a>
</body>
</html>
$(function(){
$('#box').linkbutton({
id:'pox',
disable:true,
toggle:true,
selected:true,
group:'sex',
plain:true,
text:'文字',
iconCls:'icon-add',
});
$('#pox').linkbutton({
id:'pox',
disable:true,
toggle:true,
group:'sex',
iconCls:'icon-mini-add',
iconAlign:'right',
});
});
三、方法列表：
linkButton方法
方法名传参说明optionsnone返回属性对象disablenone禁止按钮enablenone启用按钮selectnone选择按钮unselect none取消选择按钮
<!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>
<script type="text/javascript" src="js/index.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"/>
</head>
<body style="margin:100px;">
<!--
<a href="###" class="easyui-linkbutton">按钮</a>
-->
<a href="###" id="#box">按钮</a>
<a href="###" id="#pox">按钮</a>
</body>
</html>
$(function(){
$.fn.linkbutton.defaultes.iconCls = 'icon-add';
$('#box').linkbutton({
//id:'pox',
//disable:true,
//toggle:true,
//selected:true,
//group:'sex',
//plain:true,
text:'文字',
//iconCls:'icon-add',
//iconAlign:'right',
});
$('#pox').linkbutton({
//id:'pox',
//disable:true,
//toggle:true,
//group:'sex',
//iconCls:'icon-mini-add',
});
//console.log($('#box').linkbutton('options'));
$('#box').linkbutton('disable');
$('#box').linkbutton('enable');
$('#box').linkbutton('select');
$('#box').linkbutton('unselect');
});
PS：我们可以使用$.fn.linkbutton.defaultes重写默认值对象。
作者：Roger_CoderLife
链接：https://blog.csdn.net/Roger_CoderLife/article/details/102838525
本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载！
