11、jQueryEasyUI的基本组件
1、拖动的div
<!--jquery 的主文件...-->
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<!--jquery easyui 的主文件...-->
<script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>
<!--jQuery 的主样式文件...-->
<link type="text/css" rel="stylesheet" href="../../js/themes/default/easyui.css">
<!--jQuery 的图标文件...-->
<link type="text/css" rel="stylesheet" href="../../js/themes/icon.css">
</head>
<style type="text/css">
div{
height:200px;
width:200px;
background:red;
border:10px solid #abcdef;
}
</style>
<body>
<div id="area" class="easyui-draggable"></div>
<div class="cccc">www</div>
<div class="easyui-draggable"></div>
<div class="easyui-draggable"></div>
<div class="easyui-draggable"></div>
<div class="easyui-draggable"></div>
<div class="easyui-draggable"></div>
<div class="easyui-draggable"></div>
<div class="easyui-draggable"></div>
<div class="easyui-draggable"></div>
//添加上这个class="easyui-draggable"的属性的时候就可以用鼠标对div进行拖动了
</body> </html>
2、jQueryEasyUI进度框组件的实例
$(function(){ //在 jquery easyui 里面，创建组件有两种方式.. //第一种是直接通过页面的标签去创建.. 我们直接在标签上面添加一个class 的一个标签... 如果你的这个组件不需要跟其它的组件进行交互，或者这个组件不需要跟后台进行交互，我们使用标签创建 //第二种方式我们可以通过js +页面标签创建.. $("#loadbutton").bind("click",function(){ loadprogress(); }) }) var i=1; /** * 我们之前使用xmlhttprequest 进行交互 * 0,1,2,3,4 这几个状态是用来做用户体验... */ function loadprogress(){ $("#progressId").progressbar({ value:i++ }) window.setTimeout(function(){ loadprogress(); },10) } </script> </head> <body> <div id="progressId" style="width:400px;"></div> <input type="button" id="loadbutton" value="加载"> </body>
3、jQuery的菜单组件
<title>jQuery 的菜单按钮...</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--jquery 的主文件...-->
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<!--jquery easyui 的主文件...-->
<script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>
<!--jQuery 的主样式文件...-->
<link type="text/css" rel="stylesheet" href="../../js/themes/default/easyui.css">
<!--jQuery 的图标文件...-->
<link type="text/css" rel="stylesheet" href="../../js/themes/icon.css">
<script type="text/javascript">
$(function(){
$("#menu_1").menu({
left:100,
top:100
}).show();
})
</script>
</head>
<body>
<div id="menu_1" style="width:150px" class="easyui-menu">
<div>新建文件夹</div>
<div class="menu-sep"></div>
<div>创建快捷方式</div>
<div class="menu-sep"></div>
<div>打开方式
<div style="width:150px" >
<div>使用快播打开</div>
<div>使用百度影音打开</div>
<div>使用其它方式打开</div>
</div>
</div>
<div class="menu-sep"></div>
<div>复制</div>
<div class="menu-sep"></div>
<div data-options="iconCls:'icon-cancel'">删除</div>
<div class="menu-sep"></div>
<div>粘贴</div>
<div class="menu-sep"></div>
<div>属性</div>
</div>
</body>
4、jQuery的linkButton
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<!--jquery easyui 的主文件...-->
<script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>
<!--jQuery 的主样式文件...-->
<link type="text/css" rel="stylesheet" href="../../js/themes/default/easyui.css">
<!--jQuery 的图标文件...-->
<link type="text/css" rel="stylesheet" href="../../js/themes/icon.css">
<!--直接找图标的网站... www.iconfinder.com-->
</head>
<body>
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a>
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a>
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">修改</a>
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut'">剪切</a>
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help'">帮助</a>
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-filter'">过滤</a>
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-tip'">提示</a>
</body>
5、jQuery的datagrid组件
<!--jquery 的主文件...-->
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<!--jquery easyui 的主文件...-->
<script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>
<!--jQuery 的主样式文件...
<link type="text/css" rel="stylesheet" href="../../js/themes/default/easyui.css">
-->
<link type="text/css" rel="stylesheet" href="../../js/themes/bootstrap/easyui.css">
<!--jQuery 的图标文件...-->
<link type="text/css" rel="stylesheet" href="../../js/themes/icon.css">
<script type="text/javascript" src="../../js/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
alert($("#btn").size());
/**
* 界面会传过去两个参数，第一个参数是当前页，第二个参数每页显示多少条
* 1 ,每页显示10条
*
* //第一个你们需要找到总记录数...
*sql1=int total= select count(*) from table
*
* param1===(page-1)*10 ,10
*
*sql2=select * from table where ddd limit 0,10 (10,10) .(20,10)
*
*
*/
$("#datagrid").datagrid({
columns:[[
{"checkbox":true},
{title:"车次",width:100,field:'ceci'},
{title:"出发站<br>终点站",width:100,field:'startstate'},
{title:"出发时间<br>到达时间",width:100,field:'starttime'},
{title:"历时",width:100,field:'totaltime'},
{title:"商务座",width:100,field:'swz'},
{title:"备注",width:100,field:'bz'}
]
],
fitColumns:true,
url:"datagrid.json",
toolbar:
[{
text:"修改",
iconCls: 'icon-edit',
handler: function(){
alert('编辑按钮')
}
},'-',{
text:"删除",
iconCls: 'icon-help',
handler: function(){
alert('帮助按钮')
}
}]
,
onLoadSuccess:function(){
//创建页面的组件有两种方式 一种是通过标签创建,通过js +页面标签创建...
// alert($("#btn").size());
$("#btn").linkbutton({
iconCls:"icon-add"
})
},
loadMsg:"数据正在加载中....",
method:"POST",
pagination:true,
rownumbers:true,
singleSelect:true,
striped:true
})
})
</script>
</head>
<body>
<table id="datagrid"></table>
</body>
//datajson文件 { "total":1000, "rows":[ { "ceci":"G118", "startstate":"北京/焦作", "starttime":"9点10<br>13点20分", "totaltime":"两个小时吧", "swz":"有", "bz":"<a id='btn' href='#' class='easyui-linkbutton' >预定</a> " }, { "ceci":"G118", "startstate":"北京/焦作", "starttime":"9点10<br>13点20分", "totaltime":"两个小时吧", "swz":"有", "bz":"预定" }, { "ceci":"G118", "startstate":"北京/焦作", "starttime":"9点10<br>13点20分", "totaltime":"两个小时吧", "swz":"有", "bz":"预定" }, { "ceci":"G118", "startstate":"北京/焦作", "starttime":"9点10<br>13点20分", "totaltime":"两个小时吧", "swz":"有", "bz":"预定" }, { "ceci":"G118", "startstate":"北京/焦作", "starttime":"9点10<br>13点20分", "totaltime":"两个小时吧", "swz":"有", "bz":"预定" }, { "ceci":"G118", "startstate":"北京/焦作", "starttime":"9点10<br>13点20分", "totaltime":"两个小时吧", "swz":"有", "bz":"预定" }, { "ceci":"G118", "startstate":"北京/焦作", "starttime":"9点10<br>13点20分", "totaltime":"两个小时吧", "swz":"有", "bz":"预定" }, { "ceci":"G118", "startstate":"北京/焦作", "starttime":"9点10<br>13点20分", "totaltime":"两个小时吧", "swz":"有", "bz":"预定" }, { "ceci":"G118", "startstate":"北京/焦作", "starttime":"9点10<br>13点20分", "totaltime":"两个小时吧", "swz":"有", "bz":"预定" }, { "ceci":"G118", "startstate":"北京/焦作", "starttime":"9点10<br>13点20分", "totaltime":"两个小时吧", "swz":"有", "bz":"预定" }, { "ceci":"G118", "startstate":"北京/焦作", "starttime":"9点10<br>13点20分", "totaltime":"两个小时吧", "swz":"有", "bz":"预定" } ] }
7、jQuery的acrodding组件
<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <!--jquery 的主文件...-->
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<!--jquery easyui 的主文件...-->
<script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>
<!--jQuery 的主样式文件...-->
<link type="text/css" rel="stylesheet" href="../../js/themes/default/easyui.css">
<!--
<link type="text/css" rel="stylesheet" href="../../js/themes/bootstrap/easyui.css">-->
<!--jQuery 的图标文件...-->
<link type="text/css" rel="stylesheet" href="../../js/themes/icon.css">
<script type="text/javascript" src="../../js/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
<div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery.
It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
content2
</div>
<div title="Title3">
content3
</div>
</div>
</body>
</html>
8、jQuery的布局
<!--jquery easyui 的主文件...-->
<script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>
<!--jQuery 的主样式文件...-->
<link type="text/css" rel="stylesheet" href="../../js/themes/default/easyui.css">
<!--
<link type="text/css" rel="stylesheet" href="../../js/themes/bootstrap/easyui.css">-->
<!--jQuery 的图标文件...-->
<link type="text/css" rel="stylesheet" href="../../js/themes/icon.css">
<script type="text/javascript" src="../../js/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
itcast.init.pageUI();
//初始化页面按钮上面的事件...
itcast.init.bindEvent();
})
var itcast={
init:{
pageUI:function(){
$("#jeasyUItree").tree({
url:"treedata.json",
dnd:true,
animate:true,
checkbox:true,
lines:true,
onClick:function(node){
// alert(node);
var tabs=$("#center_tab").tabs("getTab",node.text);
if(tabs){
$("#center_tab").tabs("select",node.text)
}else{
//添加面板...
$("#center_tab").tabs('add',{
title:node.text,
//content:'Tab Body',
closable:true,
href:"../../easyui/href/employee.html",//重新载入一个界面...
onLoad:function(){
//alert($("#employeeId").length);
$("#employeeId").datagrid({
columns:[[
{"checkbox":true},
{title:"车次",width:100,field:'ceci'},
{title:"出发站<br>终点站",width:100,field:'startstate'},
{title:"出发时间<br>到达时间",width:100,field:'starttime'},
{title:"历时",width:100,field:'totaltime'},
{title:"商务座",width:100,field:'swz'},
{title:"备注",width:100,field:'bz'}
]
],
fitColumns:true,
url:"datagrid.json",
toolbar:
[{
text:"修改",
iconCls: 'icon-edit',
handler: function(){
alert('编辑按钮')
}
},'-',{
text:"删除",
iconCls: 'icon-help',
handler: function(){
alert('帮助按钮')
}
}]
,
onLoadSuccess:function(){
//创建页面的组件有两种方式 一种是通过标签创建,通过js +页面标签创建...
// alert($("#btn").size());
$("#btn").linkbutton({
iconCls:"icon-add"
})
},
loadMsg:"数据正在加载中....",
method:"POST",
pagination:true,
rownumbers:true,
singleSelect:true,
striped:true
})
}
});
}
}
})
},
bindEvent:function(){
$("#btn_1").bind("click",function(){
$("#txl_tree").tree({
url:"treedata.json",
dnd:true,
animate:true,
checkbox:true,
lines:true,
onClick:function(node){
//alert(node.text);
//控制台打印
//console.info(node);
//$("#easyUITree").tree("getChildren",node)
var children=node.children;
alert(children.length)
}
})
$("#txl_window").window({
height:500,
width:200,
title:"通讯录"
})
})
$("#btn_2").bind("click",function(){
$.messager.confirm('确认','您确认想要推出系统？',function(r){
if (r){
alert('确认删除');
}
});
})
}
}
}
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;">
<div style="float:right;padding:10px;">
<a id="btn_1" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-tip'">通讯录</a>
<a id="btn_2" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">退出系统</a>
</div>
</div>
<div data-options="region:'south',title:'Copyright © 2015 Sohu.com Inc. All Rights Reserved. 搜狐公司 版权所有',split:true" style="height:30px;"></div>
<div data-options="region:'west',title:'功能菜单',split:true" style="width:250px;">
<div id="leftaccording" class="easyui-accordion" data-options="fit:true">
<div title="航母检测平台" data-options="iconCls:'icon-save',selected:true" style="overflow:auto;padding:10px;">
<ul id="jeasyUItree"></ul>
</div>
<div title="物业管理平台" data-options="iconCls:'icon-reload'" style="padding:10px;">
content2
</div>
<div title="人事管理平台">
content3
</div>
</div>
</div>
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
<div data-options="region:'center',title:'center title'" style="padding:5px;">
<div id="center_tab" class="easyui-tabs" data-options="fit:true" style="width:500px;height:250px;">
<div title="首页" style="padding:10px;">
<img src="../../image/1.jpg" height="380">
</div>
</div>
</div>
<div id="txl_window">
<ul id="txl_tree"></ul>
</div>
</body>
9、jQuery的面板布局
<!--jquery 的主文件...-->
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<!--jquery easyui 的主文件...-->
<script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>
<!--jQuery 的主样式文件...-->
<link type="text/css" rel="stylesheet" href="../../js/themes/default/easyui.css">
<!--
<link type="text/css" rel="stylesheet" href="../../js/themes/bootstrap/easyui.css">-->
<!--jQuery 的图标文件...-->
<link type="text/css" rel="stylesheet" href="../../js/themes/icon.css">
<script type="text/javascript" src="../../js/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
// $(".panel").draggable({ });
$('#ccc').resizable({
maxWidth:250,
maxHeight:300
});
})
</script>
<style type="text/css">
#ccc{
border:3px solid red;
height:100px;
width:200px;
background:#999999;
}
</style>
</head>
<body>
<div id="panel-easyui" class="easyui-panel" title="My Panel"
style="width:500px;height:150px;padding:10px;background:#fafafa;"
data-options="iconCls:'icon-save',closable:true,
collapsible:true,minimizable:true,maximizable:true">
<div id="ccc">panel content</div>
<p>panel content.</p>
</div>
</body>
10、jQuery的tab布局
<!--jquery 的主文件...-->
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<!--jquery easyui 的主文件...-->
<script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>
<!--jQuery 的主样式文件...-->
<link type="text/css" rel="stylesheet" href="../../js/themes/default/easyui.css">
<!--
<link type="text/css" rel="stylesheet" href="../../js/themes/bootstrap/easyui.css">-->
<!--jQuery 的图标文件...-->
<link type="text/css" rel="stylesheet" href="../../js/themes/icon.css">
<script type="text/javascript" src="../../js/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
tab1
</div>
<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
tab3
</div>
</div>
</body>
【推荐】还在用 ECharts 开发大屏？试试这款永久免费的开源 BI 工具！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步