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 ...
随机推荐
- webpack配置教程
1.npm脚本运行webpack与命令行输入webpack的区别 : https://segmentfault.com/a/1190000011052193 npm 模块的 安装 和 卸载 : ...
- [CSP-S模拟测试]:夜鹰与玫瑰（数学）
题目描述 红晕爬上了白玫瑰的花瓣,花刺还没有到达夜莺的心脏,玫瑰的心依旧苍白如终年不化的积雪.由生命铸就的玫瑰不允许存在一丝一毫的瑕疵,假设玫瑰的一片花瓣可以抽象成一个点,一朵玫瑰我们用一个$N\ti ...
- tomcat 高并发
转自 http://blog.csdn.net/feng27156/article/details/19420695 一.容器简化了程序员自身的多线程编程. 各种Web容器,如Tomcat,Resio ...
- python random模块随机取list中的某个值
import random from random import randint ''' random.randint()随机生一个整数int类型,可以指定这个整数的范围,同样有上限和下限值,pyth ...
- VMware 安装CenterOS
虚拟机安装CenterOS 简介:在VMware里安装Linux虚拟机,这里使用的是(Center OS 6.9). 一.准备工作: 安装 VMware Workstation Pro,很简单不哔哔了 ...
- HTML5: HTML5 内联 SVG
ylbtech-HTML5: HTML5 内联 SVG 1.返回顶部 1. HTML5 内联 SVG HTML5 支持内联 SVG. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Ve ...
- ()C#打印机
System.Drawing.Printing下得用来完成打印功能 1.打印设置 2.页面设置 3.打印预览 4.打印
- js 中 !!的用法
!!是将表达式强制转化为bool值的运算,运算结果为true或false,表达式是什么值,结果就是对应的bool值,不再取非. 不是取非再取非的意思!!! !!false=false; 要注意f ...
- JS 多个条件判断
// 多个条件判断 // 对象序列(Object) 推荐使用这一种 var obj = {'CJ':'成交', 'WCJ':'未成交'}; if (key in obj) { // TODO } // ...
- Java + selenium 启动谷歌浏览器
在之前创建的test项目下建一个test包,然后在包下建一个Chrome.java类.写入如下代码 package test; import java.util.concurrent.TimeUnit ...