UasyUi的各种方法整理
UasyUi的各种方法整理:
1.拖动 放置 droppable
$('#dd').droppable({ });
2.创建可变大小的窗口 resizable
$('#rr').resizable({
maxWidth:800,
maxHeight:600
});
3.提示框 tooltip
<a href="#" title="这是一个提示框" class="easyui-tooltip">Hover me</a>
4.面板 panel
创建一个面板:
<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')}
}]
});
5.选项卡 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>
6.手风琴分类 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>
7.布局 layout
创建页面布局:
<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>
8.按钮 linkbutton
创建一个按钮:
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>
9.验证框 validatebox
<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'" /> 10.文本框 textbox
<input class="easyui-textbox" data-options="iconCls:'icon-search'" style="width:300px">
11.密码框 passwordbox
<input class="easyui-passwordbox" prompt="Password" iconWidth="28" style="width:100%;height:34px;padding:10px">
12.下拉列表框 combobox
创建2个有依赖关系的下拉列表框:
<input id="cc1" class="easyui-combobox" data-options="
valueField: 'id',
textField: 'text',
url: 'get_data1.php',
onSelect: function(rec){
var url = 'get_data2.php?id='+rec.id;
$('#cc2').combobox('reload', url);
}" />
<input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'" />
13.window窗口
<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"
data-options="iconCls:'icon-save',modal:true">
Window Content
</div>
14.消息窗口
$.messager.confirm('确认','您确认想要删除记录吗?',function(r){
if (r){
$.messager.alert('警告','删除成功');
}
});
UasyUi的各种方法整理的更多相关文章
- 【AS3】Flash与后台数据交换四种方法整理
随着Flash Player 9的普及,AS3编程也越来越多了,所以这次重新整理AS3下几种与后台数据交换方法.1.URLLoader(URLStream)2.FlashRemoting3.XMLSo ...
- 常用js方法整理common.js
项目中常用js方法整理成了common.js var h = {}; h.get = function (url, data, ok, error) { $.ajax({ url: url, data ...
- 在WebBrowser中执行javascript脚本的几种方法整理(execScript/InvokeScript/NavigateScript) 附完整源码
[实例简介] 涵盖了几种常用的 webBrowser执行javascript的方法,详见示例截图以及代码 [实例截图] [核心代码] execScript方式: 1 2 3 4 5 6 7 8 9 1 ...
- 项目中常用js方法整理common.js
抽空把项目中常用js方法整理成了common.js,都是网上搜集而来的,大家一起分享吧. var h = {}; h.get = function (url, data, ok, error) { $ ...
- Ruby数组方法整理
数组方法整理 方法列表: all().any().none()和one():测试数组中的所有或部分元素是否满足给定条件.条件可以是语句块中决定,也可以是参数决定 append():等价于push() ...
- Vue2.x源码学习笔记-Vue实例的属性和方法整理
还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProx ...
- Tomcat 多项目部署方法整理
Tomcat 多项目部署方法整理 说明:tomcat-deploy-aaa和tomcat-deploy-bbb是两个不同的web项目,为了方便以下简称aaa和bbb,请先自行创建并跑通 导航: NO1 ...
- Javascript Array 方法整理
Javascript Array 方法整理 Javascript 数组相关方法 说明 大多数其它编程语言不允许改变数组大小,越界访问索引会报错,但是 javascript不会报错,不过不建议直接修改a ...
- 排序方法整理Java - 冒泡排序、选择排序、插入排序、快速排序
/** * 排序方法整理 * @author zhyea * */ public class Sort { /** * 冒泡排序,从小到大. * 冒泡排序是比较相邻的两个元素,若顺序错误,则执行交换. ...
随机推荐
- C4C Product Price List的模型中和有效期相关的两个字段
SAP C4C的price list实例可以在工作中心Products,视图Price Lists里看到. 我们点开第二个名为TEST的实例: 我写这篇文章的日期是2018年10月27日, 我现在把这 ...
- ELKB是什么?
ELKB是四个开源软件的缩写,分别表示:Elasticsearch , Logstash, Kibana ,Beats. Elasticsearch是个开源分布式搜索引擎,提供搜集.分析.存储数据三大 ...
- 2017.11.7 JavaWeb------Servlet过滤器
JavaWeb------Servlet过滤器 (1)过滤器是web服务器上的组件,它们对客户和资源之间的请求和响应进行过滤.Servlet 过滤器可以动态地拦截请求和响应,以变换或使用包含在请求或响 ...
- Spring 上下文操作工具类 ContextUtils
ContextUtils.java package com.java.config; import org.springframework.beans.BeansException; import o ...
- css的position定位终极总结
relative相对定位是相对于自己的位置定位,absolute绝对定位是向上级一级一级搜索有position属性的div,如果没有找到就相对于body定位
- 修改第三方库内容,carsh提示"image not found"
在图示位置把提示的东西加上即可 参考: iOS app with framework crashed on device, dyld: Library not loaded, Xcode 6 Beta ...
- pod 指令无效
到了新公司,配置pod,死活找不到pod指令,用了很多方法之后,找到了解决办法 sudo vim .bash_profile 然后添加 export PATH=/usr/local/bin:$PATH ...
- 牛客小白月赛2 E 是是非非 【尼姆博弈】
链接:https://www.nowcoder.com/acm/contest/86/E来源:牛客网 题目描述 坎为水,险阳失道,渊深不测:离为火,依附团结,光明绚丽. 坎卦:水洊至,习坎:君子以常德 ...
- 网页更换主题以及绘制图形js代码实现
HTML代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- MySQL主从复制读写分离如何提高从库性能-实战
在做主从读写分离时候,需要注意主从的一些不同参数设置,来提高从库的性能,提高应用读取数据的速度,这样做很有必要的. 做读写分离复制主从参数不同设置如下(需要根据自己应用实际情况来设置): parmet ...