1. 引入必要的文件: 在 HTML 页面中引入 jQuery、EasyUI 的 CSS 和 JavaScript 文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
<script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
</body>
</html>
2. 创建链接按钮: 使用 linkbutton 函数创建链接按钮。
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="addData()">Add Data</a>
在上述代码中,iconCls 用于设置按钮图标,plain 用于指定按钮是否为纯文本,onclick 用于指定点击按钮时触发的函数。
3. 初始化链接按钮: 使用 linkbutton 函数初始化链接按钮。
<script>
$(function(){
$('.easyui-linkbutton').linkbutton();
});
function addData(){
alert('Add data clicked!');
// 在这里添加具体的添加数据操作逻辑
}
</script>
在上述代码中,使用 linkbutton 函数初始化链接按钮,这样按钮就会具有 EasyUI 样式和行为。
这只是一个简单的例子,你可以根据实际需求和业务逻辑进行更复杂的定制。根据需要,你还可以使用不同的 EasyUI 主题、调整按钮样式、设置其他属性等。
转载请注明出处:http://www.zyzy.cn/article/detail/13093/jQuery EasyUI