Jquery EasyUI Base基础
<pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>easyui起步学习</title>
<link rel="stylesheet" type="text/css" href="easyUi/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyUi/themes/icon.css"/>
<script type="text/javascript" src="easyUi/jquery.min.js"></script>
<script type="text/javascript" src="easyUi/jquery.easyui.min.js"></script>
<script type="text/javascript">
function search(value,name){
var val=$("#ss").searchbox('getValue');//获取到搜索的值，value也是搜索到的值
var getName=$("#ss").searchbox('getName');//获取当前搜索的类型名
alert(getName);
//alert(value+":"+name)
}
</script>
</head>
<body>
<!--提示框tooltip-->
<h1>提示框</h1>
<!--提示框tooltip一
<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>
-->
<!--提示框tooltip二-->
<a href="#" id="tooltip">Hover me</a>
<hr/>
<!--进度条-->
<div id="p" style="width:400px;"></div>
<hr/>
<!--a.搜索框
<input id="ss" class="easyui-searchbox" style="width:300px"
data-options="searcher:search,prompt:'Please Input Value',menu:'#mm'">
</input>
-->
<!--b.搜索框-->
<input id="ss" style="width:300px" />
<div id="mm" style="width:120px">
<div data-options="name:'all',iconCls:'icon-ok'">All News</div>
<div data-options="name:'sports',selected:true">Sports News</div><!--selected:true 默认选中-->
</div>
<hr>
<!--href加载内容-->
<div id="content" class="easyui-panel" style="height:200px"
data-options="href:'test.html'">
</div>
<hr>
<!--分页控件-->
<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>
<hr>
<!--可变大小的窗口-->
<div id="rr" style="width:100px;height:100px;border:1px solid #ccc;"></div>
<hr>
<!--面板-->
<div class="easyui-panel" style="width:300px;height:400px;" title="My Panel" data-options="iconCls:'icon-save',collapsible:true">
The panel content
</div>
<hr>
<input class="easyui-combobox" name="language"
data-options="
url:'combobox_data.json',
valueField:'id',
textField:'text',
panelHeight:'auto',
onSelect:function(record){
alert(record.text)
}" />
<hr>
<!--拖拽-->
<div id="drag" style="width:400px;height:400px;background:red;">
<div id="contronDrag" style="background:#ccc;">title</div>
</div>
<hr>
<div id="drop" class="easyui-droppable" data-options="accept:'#d1,#d3'" style="width:500px;height:500px;background:red;">
</div>
<script type="text/javascript">
//提示框
$("#tooltip").tooltip({
postion:'top',//提示框显示的位置，top,bottom,left,right
content:'I am hear',//内容
onShow:function(){
$(this).tooltip('tip').css({
backgroundColor:'#666',
borderColor:'#666'
});
}
});
//进度条 a.
$('#p').progressbar({
value: 0,
onchange:showProgressBar //当进度条的值改变的时候执行此函数
});
//动态显示进度条（给进度条添加） b.
function showProgressBar(){
var value = $('#p').progressbar('getValue');//先获取进度条的值
if(value < 100){
value += Math.floor(Math.random() * 10); //Math.floor()代表向下取整；Math.ceil() 代表向上取整；Math.round()代表四舍五入
$('#p').progressbar('setValue', value);//再设置进度条的值
}
}
showProgressBar();
//c.
window.setInterval(showProgressBar,1000);//每隔一秒执行一次函数
$("#ss").searchbox({//搜索
searcher:search, //按搜索的处理函数
menu:'#mm', //输入框菜单定义的内容
prompt:'Please Input Value' //input 输入框的其实内容
});
function add(){
alert('add');
}
function save(){
alert('save');
}
function toPage(pageNumber, pageSize){//获取到分页的信息
alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
}
$('#pp').pagination({ //分页控件
total:2000, //总记录数
pageSize:10, //每页显示的记录数
pageNumber:5, //显示的是第几页
pageList: [10,20,50,100], //可以选择的每页显示的记录数
loading:false, //定义的数据是否正在载入
buttons: [{
iconCls:'icon-add',//添加按钮
handler:add //当点击添加按钮时，调用此函数
},'-',{
iconCls:'icon-save',//保存按钮
handler:save
}],
layout:['list','first','prev','links','next','last','manual','sep','refresh'],//定义分页栏显示的功能
displayMsg:'此处显示页面信息' , //分页栏，最右边的文字提示
beforePageText:'当前是第',//输入页码前的文字
afterPageText:'页，总计{pages}页', //输入页码后的文字
onSelectPage:function (pageNumber, pageSize){//页码被选择时调用的函数
alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
},
});
$('#pp').pagination('refresh',{ // 改变选项并刷新分页栏信息
total: 114,
pageNumber: 6
});
$('#pp').pagination('loading');
$('#rr').resizable({ //设置可变窗口的大小
maxWidth:800,
maxHeight:600
});
$('#drag').draggable({
//handle:'#contronDrag', //拖动的处理位置
//revert:true , //拖动停止时，回到原始位置
cursor:'pointer', //拖动的指针样式
edge:0,//可以在其中拖动的宽度
//axis:'h' //垂直或是水平移动（v代表垂直，h代表水平移动,默认都可以移动）
});
/*$('#drag').draggable({
proxy: function(source){ //代理,复制功能
var p = $('<div style="border:1px solid #ccc;width:80px;background:black"></div>');
p.html($(source).html()).appendTo('body');
return p;
}
});
*/
</script>
</body>
</html>
</pre>
Jquery EasyUI Base基础的更多相关文章
- EasyUI中Base(基础)的基本用法
EasyUI中Base(基础)的用法 一.Base(基础) 1.parser 解析器 2.easyloader 简单加载 3.draggable 拖动 4.droppable 放置 5.resizab ...
- EasyUI笔记（一）Base基础
总结: 1)每个UI都是通过属性.事件和方法运作的 2)用JS加载时只需传入一个参数(用大括号{}包围),包含若干个键值对,之间用逗号隔开: 3)事件也是写在JS加载时的方法中,也是键值对形式,值是匿 ...
- 雷林鹏分享：jQuery EasyUI 树形菜单 - 创建基础树形网格
jQuery EasyUI 树形菜单 - 创建基础树形网格 树形网格(TreeGrid)组件从数据网格(DataGrid)继承,但是允许在行之间存在父/子节点关系.许多属性继承至数据网格(DataGr ...
- 【夯实PHP基础系列】JQuery easyUI的使用
最近在做一个公司的后台项目中,接触到 JQuery easyUI前端框架,被她简洁的代码和简单有效的ajax交互所深深吸引. 体会有以下3个方面: 1)快速创建表格的能力: 后端程序,比如PHP只需要 ...
- jQuery EasyUI API - Base - Draggable [原创汉化官方API]
最近在学习jQuery EasyUI,发现中文的文档好少,部分文档不错但它是鸟语的,为了大家也为了自己学习吧,汉化做一下笔记. 有没有说清楚的,或者翻译不正确的地方还请大家谅解指出.. 由于工作时间原 ...
- 前端基础教程-jQuery EasyUI 的EasyLoader实例
兄弟连前端分享-jQuery EasyUI 的EasyLoader实例 to move panel to other position $('#p').panel('move',{ left:100, ...
- jquery easyui中文培训文档
目 录 1.... Accordion(可折叠标签)... 2 1.1 实例... 2 1.2 参数... 3 2.... DateBox(日期框)... 4 2 ...
- Jquery easyui 教程
Jquery easyui教程 目 录 1基本拖放... 4 2构建购物车型拖放... 5 3创建课程表... 8 4菜单和按钮Menu and Bu ...
- 雷林鹏分享：jQuery EasyUI 插件
jQuery EasyUI 插件 jQuery EasyUI 提供了用于创建跨浏览器网页的完整的组件集合,包括功能强大的 datagrid(数据网格).treegrid(树形表格). panel(面板 ...
随机推荐
- 关于js中单双引号以及转义符的理解
关于js中单引号(')和双引号(")的使用以及转义的理解 这几天一直在画页面,身为开发人员的我之所以要画页面是因为当前项目中的页面上所有的东西都是从数据库中取得的,也就是动态的,类似于我们设 ...
- Rsync for windows
说到电脑,我真是一屋子都是. 从房间到大厅,就已经有5台.这还没包括服务器. 虽然这5台电脑我最常用的也只是2~3台.其他的不是给朋友们来坐的时候打打游戏.就是给妈妈上网看看报纸. 不过我相信很多朋友 ...
- JQuery中的表单验证及相关的内容
前 言 JRedu Android应用开发中,经常要用到表单.既然用到了表单,那就不可避免的要用到表单的验证.但是,在提交表单时,但是,并不是,每次提交的表单内容都是正确的,如果 每次都将表单的 ...
- 201521123063 《Java程序设计》 第8周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 这次就不弄思维导图了,就直接总结了 遍历Map的方法 (1)使用键值对for循环 Map<String, ...
- 学号：201521123116 《java程序设计》第六周学习总结
1. 本章学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2.书面作业 1.1.Object对象中的clone方法是 ...
- 戴建钊 201521123023《Java程序设计》第1周学习总结
1. 本周学习总结 Java 不同于C语言面向过程的编程思想,它是一种面向对象的编程方式,其在语句语法上与C++类似,因此刚开始可能比较容易理解 2. 书面作业 为什么java程序可以跨平台运行?执行 ...
- 201521123037 《Java程序设计》第11周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. Java多线程之Executor.ExecutorService.Executors.Callable.Futur ...
- 监听器第一篇【基本概念、Servlet各个监听器】
什么是监听器 监听器就是一个实现特定接口的普通java程序,这个程序专门用于监听另一个java对象的方法调用或属性改变,当被监听对象发生上述事件后,监听器某个方法将立即被执行. 为什么我们要使用监听器 ...
- [07] String字符串
1.相同又不同的字符串 String str1 = new String("String"); String str2 = "String"; String s ...
- 一条语句导致CPU持续100%
一大早收到一堆CPU预警邮件,通常每天只在统计作业执行期间会收到2~3封CPU预警邮件.这次的预警来自另一台服务器,并且明细数据显示其CPU一直维持在49%.登录到服务器,查看任务管理器(查看资源监视 ...