easyui入门第二章

最新推荐文章于 2022-01-06 11:04:24 发布

旦夕祸福

最新推荐文章于 2022-01-06 11:04:24 发布

阅读量137

点赞数

文章标签： jqueryui

本文链接：https://blog.csdn.net/qq_43081232/article/details/104237432

版权

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);
    }
});

旦夕祸福

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui入门第二章

easyui入门记录（二）data-optionsdata-options<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Basic Panel - jQuery EasyUI Demo</title> <link rel="stylesh...
复制链接

扫一扫