easyui入门记录（一）
easyui简介
1：基于jQuery
2：相比bootstrap更适合做后台管理系统(不美观，但实用)
easyui文件结构
demo:案例
demo-mobile:移动端案例
local:本地化
plugins:插件
themes:主题
changelog.txt:协议、升级事项
easyloader.js：按需加载
jquery.min.js：核心包
下载与导包
下载
点击这里下载
导包
//主题包
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
//图标包
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
//jquery包，必须在核心包之前导入
<script type="text/javascript" src="../../jquery.min.js"></script>
//easyui核心包
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
//本地化
<script type="text/javascript" src="easyui/local/easyui-lang-zh_CN.js"></script>
创建组件
easyui创建组件有两种方式：html创建；js创建
1：html创建
<!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>
<div class="easyui-panel" title="标题" style="width:100px;">
通过html创建
</div>
</body>
</html>
2：js创建 (js创建不支持一些属性，如padding)
<!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>
<script>
$(function(){
$("#mydiv").panel({
title:标题，
width:100px;,
···
});
})
</script>
</head>
<body>
<div id="mydiv">
js创建组件
</div>
</body>
</html>
注：两种方案底层都是用js创建，两种方案性能差不多
修改原生功能
如：禁用html方式创建组件
查看源码发现：使用html创建组件时，easyui会自动解析class名称，所以将自动解析改为false即可禁止
<script>
$.parser.auto = false
$(function(){
})
</script>
注：要在加载页面之前改为false，否则已经class已经被解析了。
easyui添加样式时的注意事项
easyui通过js操作dom （添加修改元素，并且加上响应的css）
所以当你添加样式时，并不一定能准确地添加到你想要的位置，需谨慎。
扫一扫
9063
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
