easyUI API(version 1.5)
不分先后,只做记录。
jquery+easyui培训文档下载地址:
链接: https://pan.baidu.com/s/1dFgFXk9 密码: jj5d
1 easyui-draggable(拖动) 两种写法:
<div id="dd" class="easyui-draggable"
data-options="handle:'#move',revert:'true',cursor:'crosshair',axis:'v'" style="width:100px;height:100px;">
<div id="move" style="background:#7097cc;">ys_draggable
</div>
</div>
<div id="dd" style="width:100px;height:100px;">
<div id="title" style="background:#ccc;">title</div>
</div>
$('#dd').draggable({
handle:'#title'
});
Demo可参考:http://www.jeasyui.net/demo/521.html
2 easyui-droppable(放置)
两种写法:
<div id="dd" class="easyui-droppable" data-options="accept:'#d1,#d3'" style="width:100px;height:100px;"></div>
<div id="dd" style="width:100px;height:100px;"></div>
$('#dd').droppable({
accept:'#d1,#d3'
});
Demo可参考:http://www.jeasyui.net/demo/523.html 3 easyui-resizable (调整大小)
<div id="rr" class="easyui-resizable" data-options="maxWidth:800,maxHeight:600" style="width:100px;height:100px;border:1px solid #ccc;"></div>
<div id="rr" class="easyui-resizable" data-options="maxWidth:800,maxHeight:600" style="width:100px;height:100px;border:1px solid #ccc;"></div>
$('#rr').resizable({
maxWidth:800,
maxHeight:600
});
Demo可参考:http://www.jeasyui.net/demo/551.html
4 easyui-pagination(分页)
<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"></div>
<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>
$('#pp').pagination({
total:2000,
pageSize:10
});
Demo可参考:http://www.jeasyui.net/demo/377.html
5 easyui-searchbox(搜索框)
<script type="text/javascript">
function qq(value,name){
alert(value+":"+name)
}
</script> <input id="ss" class="easyui-searchbox" style="width:300px"
data-options="searcher:qq,prompt:'Please Input Value',menu:'#mm'"></input> <div id="mm" style="width:120px">
<div data-options="name:'all',iconCls:'icon-ok'">All News</div>
<div data-options="name:'sports'">Sports News</div>
</div>
<input id="ss"></input>
<div id="mm" style="width:120px">
<div data-options="name:'all',iconCls:'icon-ok'">All News</div>
<div data-options="name:'sports'">Sports News</div>
</div>
$('#ss').searchbox({
searcher:function(value,name){
alert(value + "," + name)
},
menu:'#mm',
prompt:'请输入值'
});
Demo可参考:http://www.jeasyui.net/demo/552.html
6 easyui-progressbar(进度条)
<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>
<div id="p" style="width:400px;"></div>
$('#p').progressbar({
value: 60
});
Demo可参考:http://www.jeasyui.net/demo/383.html
7 easyui-tooltip(提示框)
<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>
<a id="dd" href="javascript:void(0)">Click here</a>
$('#dd').tooltip({ position: 'right', content: '<span style="color:#fff">This is the tooltip message.</span>', onShow: function(){ $(this).tooltip('tip').css({ backgroundColor: '#666', borderColor: '#666' }); }});
Demo可参考:http://www.jeasyui.net/demo/571.html
8 easyui-panel(面板)
<div id="p" 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">
<p>panel content.</p>
<p>panel content.</p>
</div>
<div id="p" style="padding:10px;">
<p>panel content.</p>
<p>panel content.</p>
</div> $('#p').panel({
width:500,
height:150,
title: 'My Panel',
tools: [{
iconCls:'icon-add',
handler:function(){alert('new')}
},{
iconCls:'icon-save',
handler:function(){alert('save')}
}]
});
Demo可参考:http://www.jeasyui.net/demo/380.html
9 easyui-tabs(选项卡)
<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>
$('#tt').tabs({
border:false,
onSelect:function(title){
alert(title+' is selected');
}
});
Demo可参考:http://www.jeasyui.net/demo/396.html
10 easyui-accordion(分类)
<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>
$('#aa').accordion({
animate:false
});
Demo可参考:http://www.jeasyui.net/demo/482.html
11 easyui-layout(布局)
<div id="cc" class="easyui-layout" style="width:600px;height:400px;">
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</div>
<body class="easyui-layout">
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</body>
<body class="easyui-layout">
<div data-options="region:'north'" style="height:100px"></div>
<div data-options="region:'center'">
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'west',collapsed:true" style="width:180px"></div>
<div data-options="region:'center'"></div>
</div>
</div>
</body>
<body class="easyui-layout">
<div data-options="region:'west',href:'west_content.php'" style="width:180px" ></div>
<div data-options="region:'center',href:'center_content.php'" ></div>
</body>
Demo可参考:http://www.jeasyui.net/demo/529.html
12 easyui-menu(菜单)
<div id="mm" class="easyui-menu" style="width:120px;">
<div>New</div>
<div>
<span>Open</span>
<div style="width:150px;">
<div><b>Word</b></div>
<div>Excel</div>
<div>PowerPoint</div>
</div>
</div>
<div data-options="iconCls:'icon-save'">Save</div>
<div class="menu-sep"></div>
<div>Exit</div>
</div>
$('#mm').menu({
onClick:function(item){
//...
}
});
$('#mm').menu('show', {
left: 200,
top: 100
});
Demo可参考:http://www.jeasyui.net/demo/537.html
13 easyui-linkbutton(按钮)
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>
<a id="btn" href="#">easyui</a>
$('#btn').linkbutton({
iconCls: 'icon-search'
});
Demo 可参考:http://www.jeasyui.net/demo/367.html
14 easyui-menubutton(菜单按钮)
15 easyui-splitbutton(分割按钮)
16 easyui-switchbutton(开关按钮)
17 easyui-validatebox(验证框)
18 easyui-textbox(文本框)
19 easyui-passwordbox(密码框)
20 easyui-combobox(下拉列表框)
21 easyui-combotree(树形下拉框)
22 easyui-combogrid(数据表格下拉框)
23 easyui-combotreegrid(数型表格下拉框)
24 easyui-numberbox(数值输入框)
25 easyui-datebox(日期输入框)
26 easyui-datetimebox(日期时间输入框)
27 easyui-datetimespinner(日期时间微调框)
28 easyui-calendar(日历)
29 easyui-numberspinner(数字微调)
30 easyui-slider(滑动条)
31 easyui-filebox(文件框)
32 easyui-window(窗口)
33 easyui-dialog(对话框窗口)
34 easyui-datagrid(数据表格)
35 easyui-datalist(数据列表)
36 easyui-propertygrid(属性表格)
37 easyui-tree(树)
38 easyui-treegrid(树形表格)
easyUI API(version 1.5)的更多相关文章
- Java High Level REST Client 中文API(仅供参考)
1.初始化 兼容性 Java High Level REST Client需要Java 1.8,并依赖于Elasticsearch核心项目,客户端版本与客户端开发的Elasticsearch版本相同, ...
- ArcGIS Js/Flex等前端API(Query(StatisticDefinition)时)针对SDE的SHAPE.AREA/SHAPE.LEN知道查询无效,而对GDB的SHAPE_Area/SHAPE_Length有效探索。
FIeld 'SHAPE.AREA' and 'SHAPE.LEN' of SDE For Oracle,Field 'SHAPE_Area' and 'SHAPE_Length' of gdb(ge ...
- 关于百度地图API (持续跟新)
一.初始化地图显示不在正中间,出现偏移 问题描述与解决办法: 代码: body, html, #allmap { width: 100%; height: 100%; overflow: hidden ...
- TensorFlow Object Detection API(Windows下训练)
本文为作者原创,转载请注明出处(http://www.cnblogs.com/mar-q/)by 负赑屃 最近事情比较多,前面坑挖的有点久,今天终于有时间总结一下,顺便把Windows下训练跑通.Li ...
- TensorFlow Object Detection API(Windows下测试)
"Speed/accuracy trade-offs for modern convolutional object detectors." Huang J, Rathod V, ...
- 动态We API(ABP官方文档翻译)
动态Web API层 创建动态Web API控制器 ForAll方法 重写ForAll ForMethods Http动词 WithVerb方法 HTTP特性 命名约定 API管理器 RemoteSe ...
- Java8 流式 API(`java.util.stream`)
熟悉 ES6 的开发者,肯定对数组的一些方法不是很陌生:map.filter 等.在对一组对象进行统一操作时,利用这些方法写出来的代码比常规的迭代代码更加的简练.在 C♯ 中,有 LINQ 来实现.那 ...
- 使用 .NET Core 3.x 构建RESTful Api(第三部分)
关于HTTP HEAD 和 HTTP GET: 从执行性能来说,这两种其实并没有什么区别.最大的不同就是对于HTTP HEAD 来说,Api消费者请求接口数据时,如果是通过HTTP HEAD的方式去请 ...
- Echarts常用API(echarts和echartsInstance)
一.echarts上的方法 一般在项目中引入echarts之后,可以获得一个全局的echarts对象. 1.下面是几个比较常用的echarts方法 echarts.init() 创建一个echarts ...
随机推荐
- 如何在TFS的过程模板中添加报表
在新建团队项目的过程中,TFS的"新建团队项目向导"会根据用户选择的过程模板类型(CMMI, Scrum,Agile等)自动为团队项目创建一个SSRS(SQL Server Rep ...
- [转]让Windows Server 2008 + IIS 7+ ASP.NET 支持10万并发请求
本文转自:http://www.cnblogs.com/dudu/archive/2009/11/10/1600062.html 今天下午17点左右,博客园博客站点出现这样的错误信息: Error S ...
- appium 常用api介绍(2)
前言:接着上一篇继续讲常用的一些api 参考博文:http://blog.csdn.net/bear_w/article/details/50330565 1.send_keys send_keys( ...
- 【读书笔记《Android游戏编程之从零开始》】16.游戏开发基础(动画)
1. Animation动画 在Android 中,系统提供了动画类 Animation ,其中又分为四种动画效果: ● AlphaAnimation:透明度渐变动画 ● ScaleAnimati ...
- 用Python和摄像头制作简单的延时摄影
“延时摄影(英语:Time-lapse photography)是以一种较低的帧率拍 下图像或者视频,然后用正常或者较快的速率播放画面的摄影技术.在一段延时摄影视频中,物体或者景物缓慢变化的过程被压缩 ...
- Java语法基础(三)----选择结构的if语句、switch语句
[前言] 流程控制语句: 在一个程序执行的过程中,各条语句的执行顺序对程序的结果是有直接影响的.也就是说程序的流程对运行结果有直接的影响.所以,我们必须清楚每条语句的执行流程.而且,很多时候我们要通过 ...
- java 16 -7 泛型方法和泛型接口(泛型类相似)
写一个ObjectTool类 泛型方法:把泛型定义在方法上 格式 public <泛型类型> 返回类型 方法名(泛型类型) 这样的好处是: 这个泛型方法可以接收任意类型的数据 public ...
- mysqli_stmt预处理类
<?php $mysqli=new mysqli("localhost", "root", "123456", "xsph ...
- Datagrid数据导出到excel文件的三种方法
原文连接: http://www.cnblogs.com/xieduo/articles/606202.html 一.文件保存在服务器,提供下载 方法一:导出到csv文件,存放在服务器端任一路径,然后 ...
- Go cron定时任务的用法
cron是什么 cron的意思就是:计划任务,说白了就是定时任务.我和系统约个时间,你在几点几分几秒或者每隔几分钟跑一个任务(job),就那么简单. cron表达式 cron表达式是一个好东西,这个东 ...