easyui入门记录(二)linkbutton,panel,组件三要素
LinkButton
1:基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Panel - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<a id="btn" href="javascript:;" class=" easyui-linkbuttton data-options="iconCls:'icon-ok' ">这是一个按钮</a>
</body>
</html>
2:自定义组件样式
$(function() {
$.fn.linkbutton = function(){
this.addClass("l-btn");
this.html("···");
$("#btn").linkbutton();
}
})
<body>
<a id="btn" href="javascript:;" iconCls="icon-ok">基本按钮</a>
</body>
因为easyui本质是操作dom添加样式和css,上文中addClass()和html()方法完成了添加样式和css得操作。其中还需要获取a标签中的值等等,才能完全实现。
3:属性和效果
iconCls:图标样式;
plain:简介样式
size:按钮大笑(small/large)
iconAlign:按钮位置(left,right,top,bottom)
toggle:记录选中状态,被选中时会添加样式"l-btn-selected"(true/false)
group:分组
disabled:不可用
····························
效果:
class="easyui-linkbutton c1" c1样式得按钮,共有c1-c8,需要导入color.css
支持流式布局。
4:添加事件
<script type="text/javascript">
$(".easyui-linkbutton").click(function(){
//判断是否可以点击。disabled只是样式,没用,所以要js控制
if($(this).hasClass("l-btn-disabled")){
console.debug("不可点击");
}else{
console.debug($(this).text())
}
})
</script?
panel组件
1:创建
<div class="easyui-panel" data-options="title:'panel',width:90"></div>
注:创建组件时一般使用div盒子,因为其它标签会自带样式,如p标签自带外边距,a标签是行内元素不能设置宽高等等。
2:属性
title:标题
iconCls:在左上角生成16x16的图标
fit:最大化面板(true/false)
collapsible:是否显示折叠按钮(true/false)
minimizable:是否显示最小化按钮(true/false)
maximizable:是否显示最大化按钮(true/false)
closable:是否显示关闭按钮
(这些按钮都是假实现)
href:加载其它页面
使用ajax技术,不能跨域访问;
只加载body中的内容;
可能会遇到相同id的问题,小心使用
tools属性:自定义按钮
基本用法:
data-options="tools:[
{
iconCls:"icon-add",
handler:function(){alert("add")}
},
{},
{}
]"
handler就是按钮对应的方法
常用写法:
<div class="easyui-panel" data-options="tools:'#tt'"></div>
<div id="tt">
<a href="#" class="icon-add" onclick="javascript:alert('add')"></a>
<a href="#" class="icon-edit" onclick="javascript:alert('edit')"></a>
</div>
这种写法,一组按钮只能引用一次
组件三要素
1:属性
a:作用范围:
初始化时有效,组件创建完成后不能直接修改属性, 如要修改可以使用方法修改。
b:属性写在外面和写在data-options中的区别
外面不能写函数和json数组,data-options中可以
需要注意:handler:changeTitle();与handler:changeTitle的·区别,前者是执行,后者是调用,调用方法即拿到方法的返回值。
c:其它
元素 . 组件名(); --> 创建组件
元素 . 组件名({}); -->创建组件并初始化
元素 . 组件名(“方法名”,“参数1”,“参数2”); -->调用组件方法
2:方法
调用语法:$("#mydiv").组件名(“方法名”,“参数”)
panel方法示例
3:事件
语法:
$('#ff').window({
onResize:function(width, height){
alert(width+"|"+height);
}
});