easyUI入门
easyui组件创建原理 --理解
平时写的class=“easyui-panel” --最终底层还是要调用 panel方法来创建
底层通过 $.parser.auto=ture
调用parse方法
循环页面的组件 找到对应 easyui-panel
找到之后，调用 panel({})创建组件
panel底层组装html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- easyui的样式主题文件 -->
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<!-- easyui的系统图标-->
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<!-- easyui依赖的jquery库-->
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<!-- easyui的插件库-->
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<!-- easyui的汉化包 -->
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
//组件创建方式
//方式一 通过HTML方式创建 语法 <div class='easyui-组件名'/>
$(function(){
$("#pp").panel({
width:600,
height:200,
title: '康大仙',
tools: [{
//搞一个加号
iconCls:'icon-add',
//点击加号后要执行的代码
handler:function(){alert('瞎几把点什么加号')}
},{
//搞一个保存符号
iconCls:'icon-save',
handler:function(){alert('我啥都没写你保存个锤子')}
}]
});
});
</script>
</head>
<body>
<div id="pp" style="padding:20px;">
<p>yyk</p>
<p>yyyyykkk</p>
</div>
</body>
</html>
linkbutton
linkbutton的属性说明:
iconCls:按钮图标
toggle：为true时允许用户切换其状态是被选中还是未选择 结合group来使用 在一组里面只能选中一个
plain：简洁的效果
iconAlign：图标的位置
data-options：可以设置组件的属性
disabled：禁用
group：分组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- easyui的样式主题文件 -->
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<!-- easyui的系统图标-->
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<!-- easyui依赖的jquery库-->
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<!-- easyui的插件库-->
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<!-- easyui的汉化包 -->
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
$("#cutBtn").on("click",function(){
//判断剪切按钮是否被禁用，如果被禁用则输出2
if($(this).hasClass('l-btn-disabled')){
alert("2222")
}else{
alert("111111")
}
})
})
</script>
</head>
<body>
<div><a id="yyk" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="alert('你在瞎几把按啥')">按钮</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" toggle="true">删除</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" toggle="false" plain="false" iconAlign="top">编辑</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',disabled:true" id="cutBtn">剪切</a>
</div>
<div style="padding:5px;border:1px solid #ddd;">
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'yyk'">康大仙1号</a>
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'yyk1'">康大仙2号</a>
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'yyk1'">康大仙3号</a>
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'yyk2'">康大仙4号</a>
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'yyk2'">康大仙5号</a>
</div>
</body>
</html>
panel
title:标题
padding：内容距离边框距离
iconCls：图标
collapsible：true显示折叠按钮
minimizable：最小化
maximizable：最大化
closable：关闭按钮
tools:引入工具 比如引入 add和save图标
fit:自适应父容器 设置为true 宽度和高度没有效果
href:加载文件内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- easyui的样式主题文件 -->
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<!-- easyui的系统图标-->
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<!-- easyui依赖的jquery库-->
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<!-- easyui的插件库-->
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<!-- easyui的汉化包 -->
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
$("#yyk").panel({
left:'250px',
cls:'yyk1'
});
//只能修改body的宽度
$("#yyk").css('width','800px');
//只能隐藏body
$("#yyk").hide();
//修改body
$("#yyk").attr('title','yyyyyyyy');
})
</script>
</head>
<body>
<div id="p" class="easyui-panel" title="面板"
style="width: 300px; height: 200px; padding: 10px;"
iconCls="icon-save"
collapsible="false"
minimizable="true"
maximizable="true"
closable="false"
tools="#tt"
fit="false"
loadingMessage="加载中..."
href="yyk.txt"
>
</div>
<div id="tt">
<a href="javascript:void(0)" class="icon-add" onclick="javascript:alert('add')"></a>
<a href="javascript:void(0)" class="icon-ok" onclick="javascript:alert('ok')"></a>
</div>
<div id="yyk" cls="yyk1" title="康大仙" style="width: 200px; height: 200px;"></div>
</body>
</html>
组件的三要素
每一个组件创建出来的时候，都有默认属性
属性在创建的时候，就应该定义好.
属性的定义方式
直接作为一个标签定义
直接在data-options里面定义 OK
标签和data-options结合起来一起使用
注意：如果data-options里面tools有多个值的情况下，只能在data-options写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- easyui的样式主题文件 -->
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<!-- easyui的系统图标-->
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<!-- easyui依赖的jquery库-->
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<!-- easyui的插件库-->
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<!-- easyui的汉化包 -->
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
//$.fn.panel.defaults
//console.log($.fn.panel.defaults);
//关闭按钮
//$.fn.panel.defaults.closable = true;
//直接在js创建组件的时候，使用组件的方法：
//$("#p1").plugin('methodName','参数')
//调用panel方法创建组件
$("#yyk2").panel({
title:'测试',
closable:true
});
$("#yyk4").click(function(){
//关闭
$("#yyk2").panel('close');
});
$("#yyk3").click(function(){
//打开
$("#yyk2").panel('open');
});
$("#yyk5").click(function(){
//刷新
$("#yyk2").panel('refresh','yyk.txt');
});
})
</script>
</head>
<body>
<div id="yyk1" class="easyui-panel" title='yyyy' data-options = "title:'zzz',
closable:true,
tools:[
{
iconCls:'icon-add',
handler:function(){alert('add')}
},{
iconCls:'icon-edit',
handler:function(){alert('edit')}
}]"><p>yyyyykkkkk</p>
</div>
<a href="#" id="yyk3" class="easyui-linkbutton" iconCls="icon-ok">打开</a>
<a href="#" id="yyk4" class="easyui-linkbutton" iconCls="icon-remove">关闭</a>
<a href="#" id="yyk5" class="easyui-linkbutton" iconCls="icon-reload">刷新</a>
<div id="yyk2">
sdfsdfsdf
</div>
</body>
</html>
右键菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- easyui的样式主题文件 -->
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<!-- easyui的系统图标-->
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<!-- easyui依赖的jquery库-->
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<!-- easyui的插件库-->
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<!-- easyui的汉化包 -->
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
$(document).on('contextmenu',function(event){
//阻止浏览器默认的右键事件
event.preventDefault();
//弹出
$("#yyk").menu('show',{
left:event.pageX,
top:event.pageY
})
})
});
</script>
</head>
<body>
<div id="yyk" class="easyui-menu" style="width:120px;">
<div onclick="append()" data-options="iconCls:'icon-add'">追加</div>
<div onclick="remove()" data-options="iconCls:'icon-remove'">移除</div>
</div>
</body>
</html>
6882
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
