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>
11、jQueryEasyUI的基本组件的更多相关文章
- suse 12 二进制部署 Kubernetets 1.19.7 - 第11章 - 部署coredns组件
文章目录 1.11.0.部署coredns 1.11.1.测试coredns功能 suse 12 二进制部署 Kubernetes 集群系列合集: suse 12 二进制部署 Kubernetets ...
- 11.8Django中的组件content_type
2018-11-8 18:59:11 在Django中已经有一个contenttype这个组件,并且在python manage.py makemigrations 和migrate的时候,一起在数据 ...
- Kubernetes实战(二)：k8s v1.11.1 prometheus traefik组件安装及集群测试
1.traefik traefik:HTTP层路由,官网:http://traefik.cn/,文档:https://docs.traefik.io/user-guide/kubernetes/ 功能 ...
- 使用C++11的function/bind组件封装Thread以及回调函数的使用
之前在http://www.cnblogs.com/inevermore/p/4008572.html中采用面向对象的方式,封装了Posix的线程,那里采用的是虚函数+继承的方式,用户通过重写Thre ...
- Django之路——11 Django用户认证组件 auth
用户认证 auth模块 1 from django.contrib import auth django.contrib.auth中提供了许多方法,这里主要介绍其中的三个: 1.1 .authenti ...
- 为jQuery-easyui的tab组件添加右键菜单功能
加入了右击TAB选项卡时显示关闭的上下文菜单 具体实现代码: 右键菜单 HTML: <div id="mm" class="easyui-menu" st ...
- 第11课 文章分类(组件化开发) Thinkphp5商城第四季
目录 思路: 控制器里 扩展类里: 视图层: 思路: 控制器查出所有数据后调用扩展类里的无限级分类 public function catetree($cateRes) 方法. 把排序好的数据传给视图 ...
- [连载]《C#通讯（串口和网络）框架的设计与实现》- 11.调试器的设计
目 录 第十一章 调试器设计... 2 11.1 调试接口... 2 11.2 界面方式调试... 3 11.3 命令行方式调试.. ...
- 四大组件之ContentProvider
前言 ContentProvider作为Android的四大组件之一,是属于需要掌握的基础知识,可能在我们的应用中,对于Activity和Service这两个组件用的很常见,了解的也很多,但是对Con ...
随机推荐
- 【c#技术】一篇文章搞掂：常见C#技术问题
1.事件作为参数传递 public class Para { // 定义一种委托(事件类型),可以在此定义这个事件的返回值和参数 public delegate object GetDataMetho ...
- spring restTemplate使用方法
https://github.com/lenve/SimpleSpringCloud/tree/master/RestTemplate在Spring Cloud中服务的发现与消费一文中,当我们从服务消 ...
- HTML-参考手册: URL 编码
ylbtech-HTML-参考手册: URL 编码 1.返回顶部 1. HTML URL 编码 参考手册 URL 编码会将字符转换为可通过因特网传输的格式. URL - 统一资源定位器 Web 浏览器 ...
- oracle 中和mysql的group_concat有同样作用的写法
所有版本的oracle都可以使用select wm_concat(name) as name from user;但如果是oracle11g,使用select listagg(name, ',') w ...
- 监听器、拦截器完成对session、cookie的会话控制
package com.trsmedia.interceptor; import java.util.Date; import java.util.Timer; import java.util.Ti ...
- 使用python实现希尔、计数、基数排序
希尔排序 希尔排序是一个叫希尔的数学家提出的一种优化版本的插入排序. 首先取一个整数d1=n//2,将元素分为d1个组,每组相邻元素之间的距离为d1,在各组内进行直接插入排序. 取第二个整数d2=d1 ...
- 嵌入式C语言4.2 C语言内存空间的使用-指针与修饰符：const,volatile,typedef
const:变量,只读[不能变] 内存属性: 1. 内存操作的大小 2.内存的变化性,可写可读 char *p; const char *p; 描述字符串,p指向的内容是只读的,不可再次修改 ...
- React-Native 使用中的坑
android 1.键盘会在 ScrollView 之上----不知道是不是未给ScrollView 设置高度的问题 2.navigation的标题在android居中显示办法 navigationO ...
- css3属性 -webkit-filter
css3属性 -webkit-filter -webkit-filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错.下面咱们就学习一下filter这个属性吧. 现在规范中支 ...
- Tensorflow的基础用法
简介 Tensorflow是一个深度学习框架,它使用图(graph)来表示计算任务,使用tensor(张量)表示数据,图中的节点称为OP,在一个会话(Session)的上下文中执行运算,最终产生ten ...