EasyUi
我们可以在easyui的官网下载它，下载完成后，将文件导入项目，我么需要引入五个重要的文件
<!--EasyUI的核心样式-->
<link rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css" />
<!--EasyUI的图标样式-->
<link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css" />
<!--jquery的核心JS-->
<script type="text/javascript" src="js/easyui/jquery.min.js"></script>
<!--jquery EasyUI的核心JS-->
<script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
<!-- 信息本地化js文件 -->
<script type="text/javascript" src="js/easyui/locale/easyui-lang-zh_CN.js"></script>
我们首先使用easyui实现一个小的对话框：
<div class="easyui-dialog" title="对话" style=" 300px;height: 300px;">
你好
</div>
实现的效果：
Parser 解析器：Parser 解析器是专门解析渲染各种 UI 组件了，一般来说，我们并不需要使用 它即可自动完成 UI 组件的解析工作。当然，有时可能在某些环境下需要手动 解析的情况。 手动解析一般是使用 class 的情况下有效，比如设置 class="easyui-dialog"。默认解析器是打开的 如果设置为 false 此时组件不被解析，样式就会丢失！
解析指定 ui 组件解析时，必须要设置父类容器才可以解析到。
<script type="text/javascript"> //关闭解析 $.parser.auto=false; //解析指定节点 $(function(){ $.parser.parse("#dialog1"); }) </script>
easyui-draggable 拖动组件，具有这个属性的元素都可以被拖动。
$("#draggable").draggable({
//edge:500
//axis:"h", // 纵轴v 横轴 h
//disabled:false,//是否可以进行拖动
//deltaX:200,
revert:true, //拖动停止时返回起始位置
handle:"#zt"
//当然也可以在这里面定义事件
//true时 拖动执行 false 时取消拖动
onBeforeDrag:function(e){
alert("返回true时,在拖动前触发该事件..");
return true; },
//拖动时触发
onStartDrag:function(e){
alert("拖动时触发。。。");
},
//拖动停止时触发
onStopDrag:function(e){
alert("拖动停止时触发！");
}
});
easyui-resizable 可调整大小
<div id="rr1" class="easyui-resizable" dataoptions="maxWidth:300,maxHeight:500" style="100px; height:100px;background-color: red">
这里是可调整大小区域
</div>
maxWidth ， maxHeight 可用于限定大小！
easyui-linkbutton 按钮组件
$("#btn").linkbutton({
iconCls:"icon-search"
});
$("#btn").linkbutton('disable');
easyui-panel 面板组件
collapsible boolean 定义是否显示可折叠按钮。 false
minimizable boolean 定义是否显示最小化按钮。 false
maximizable boolean 定义是否显示最大化按钮。 false
closable boolean 定义是否显示关闭按钮。
$("#p").panel({
iconCls:"icon-help",
/*800,
height:400,*/
/*fit:true, // 子容器自适应父容器的大小*/
border:true,
collapsible:true,
minimizable:true,
maximizable:true,
closable:true,
tools:[
{
iconCls:'icon-add',
handler:function(){alert('add')}
},{
iconCls:'icon-edit',
handler:function(){alert('edit')}
}
],
collapsed:true, // 默认面板折叠
href:"js/data.json",
loadingMessage:"正在加载中...",
extractor:function(data){
// 解析json格式的数据
data = eval("("+data+")");
console.log(data);
var html = "姓名：<input type='text' value='"+data.uname+"'/>";
return html;
},
onExpand:function(){
alert("数据加载完毕！");
}
});
easyui-tabs 选项卡
<body>
<div id="tt" class="easyui-tabs" style="500px;height:250px;">
<div title="Tab1" style="padding:20px;" href="js/data.json">
tab1
</div>
<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;">
tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;">
tab3
</div>
</div>
</body>
<script type="text/javascript">
$("#tt").tabs({
plain:false, // 如果设置为true，将不显示面板的背景
fit:true, // 自适应父容器大小
tools:[{
iconCls:'icon-add',
handler:function(){
alert('添加')
}
},{
iconCls:'icon-save',
handler:function(){
alert('保存')
}
}],
toolPosition:"left",
tabPosition:"top",
headerWidth:300,
tabHeight:50
});
</script>
easyui-accordion 手风琴组件
<body>
<div id="aa" class="easyui-accordion" style="150px;height:400px;" animate=true>
<div title="学生管理" data-options="iconCls:'icon-tip'" style="overflow:auto;padding:10px;">
<a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">学生信息</a> <br>
<a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">学生学分</a>
</div>
<div title="教师管理" data-options="iconCls:'icon-tip'" style="padding:10px;">
<a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">教师信息</a> <br>
<a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">教师绩效</a>
</div>
<div title="专业管理" data-options="iconCls:'icon-tip'">
<a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">数学专业</a> <br>
<a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">计算机专业</a>
</div>
<div title="系统管理" data-options="iconCls:'icon-tip'">
<a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">账户管理</a> <br>
<a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">修改密码</a> <br>
<a href="#" class="easyui-linkbutton" plain=true iconCls="icon-add" onclick="addPanel()">添加分类</a>
<a href="#" class="easyui-linkbutton" plain=true iconCls="icon-cancel" onclick="removePanel()">删除分类</a>
</div>
</div>
</body>
easyui-layout 布局组件
//此处在body中添加class easyui-layout 然后在创建五个div，分别对应不同的位置，可根据自己的需要删除添加div
<body class="easyui-layout"> <div data-options="region:'north',split:true" style="height:100px;" border=false></div> <div data-options="region:'south',split:true" style="height:100px;"></div> <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="100px;"></div> <div data-options="region:'west',title:'菜单导航栏',split:true" border=false style="170px;"></div> <div data-options="region:'center'" style="padding:5px;background:#eee;"></div> </body>
easyui-layout，tabs，accordions联合组成的简单页面
<body class="easyui-layout" > <!--上面 logo start --> <div data-options="region:'north',split:true" style="height:100px;" border=false> <img src="img/logo.png" style="height:100px; 100%;"/> </div> <!--上面 logo end --> <div data-options="region:'south',split:true" style="height:70px;text-align: center;font-size: 15px;color: gray;"> 上海尚学堂松江校区地址：上海市松江区荣乐东路2369弄45号绿地伯顿大厦2层 咨询电话：021-67690939 <br /> Copyright 2006-2017 上海尚学堂智能科技有限公司 的icp备案号 （沪ICP备16053543号） </div> <!--<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="100px;"></div> --> <!--左边 菜单导航栏 start--> <div data-options="region:'west',title:'菜单导航栏',split:true" border=false style="170px;"> <div id="aa" class="easyui-accordion" fit=true animate=true> <div title="学生管理" data-options="iconCls:'icon-tip'" style="overflow:auto;padding:10px;"> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit" onclick="openTabs('学生信息','student.html')">学生信息</a> <br> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit" onclick="openTabs('学生学分','student_score.html')">学生学分</a> </div> <div title="教师管理" data-options="iconCls:'icon-tip'" style="padding:10px;"> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit" onclick="openTabs('教师信息')">教师信息</a> <br> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit" onclick="openTabs('教师绩效')">教师绩效</a> </div> <div title="专业管理" data-options="iconCls:'icon-tip'"> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">数学专业</a> <br> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">计算机专业</a> </div> <div title="系统管理" data-options="iconCls:'icon-tip'"> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">账户管理</a> <br> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-edit">修改密码</a> <br> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-add" onclick="addPanel()">添加分类</a> <a href="#" class="easyui-linkbutton" plain=true iconCls="icon-cancel" onclick="removePanel()">删除分类</a> </div> </div> </div> <!--左边 菜单导航栏 end--> <div data-options="region:'center'" style="padding:5px;" border=false> <div id="tt" class="easyui-tabs" fit=true > <div title="主页" style="padding:20px;"> <h1>欢迎来到XXX系统！！！</h1> </div> </div> </div> </body> <script type="text/javascript"> /** * 打开选项卡 * 判断选项卡是否存在 exists 表明指定的面板是否存在，'which'参数可以是选项卡面板的标题或索引。 * 不存在 新建选项卡 * 如果存在 选中当前选项卡 select 选择一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引。 * @param {Object} title */ function openTabs(title,url){ console.log(title); // 判断选项卡是否存在 var exists = $("#tt").tabs("exists",title); if (exists) { //如果返回true，说明选项卡存在，选中当前选项卡 $("#tt").tabs("select",title); } else { //如果返回false，说明选项卡不存在，新建选项卡 $('#tt').tabs('add',{ title: title, selected: true, closable:true, iconCls:'icon-edit', href:url }); } } /** * 添加新的面板 */ function addPanel() { $("#aa").accordion("add",{ title:"新的面板", selected:false, iconCls:"icon-tip", href:"js/data.json" }); } function removePanel() { $("#aa").accordion("remove","新的面板"); } </script>