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(面板 ...
随机推荐
- C语言中复数运算及调用blas,lapack中复数函数进行科学计算
C语言中常用的数据类型主要int, float ,double ,char 等,但在科学运算中复数扮演着重要角色.这里讲下C语言中的复数运算以及如何调用blas,lapack库中的复数函数来进行科学计 ...
- 如何写SysV服务管理脚本
本文目录: 1.1 SysV脚本的特性1.2 SysV脚本要具备的能力1.3 start函数分析1.4 stop函数分析1.5 reload函数分析1.6 status.restart.force-r ...
- asp.net core 2.0 web api基于JWT自定义策略授权
JWT(json web token)是一种基于json的身份验证机制,流程如下: 通过登录,来获取Token,再在之后每次请求的Header中追加Authorization为Token的凭据,服务端 ...
- a链接易混淆与form表单简易验证用法详解
链接可以说遍布互联网,比如你想提供一个可以跳转到百度首页的链接给网友,那么代码如下: <a href="http://www.baidu.com">百度一下,你就知道& ...
- idea插件之——在markdown复制粘贴图片
Markdown paste image 每次在idea的markdown中要粘贴图片的时候,要么复制链接,要么需要将软件手动上传到七牛云,本人根据了holgerbrandl/pasteimages这 ...
- 团队作业1——团队展示&博客作业查重系统
团队展示: 1.队名:六个核桃 2.队员学号: 王婧(201421123065).柯怡芳(201421123067组长).陈艺菡(201421123068). 钱惠(201421123071).尼玛( ...
- 团队作业8----第二次项目冲刺（Beta阶段） 第一天
BETA阶段冲刺第一天 1.开了个小会议 2.每个人的工作 (1) 昨天已完成的工作: 今天是第一天,所以是新的开始. (2) 今天计划完成的工作: (3) 工作中遇到的困难: 由于有新的成员加入,默 ...
- 结对编程-四则运算-GUI
201421123022 王若凡 201421123026 欧阳勇 https://git.coding.net/ttoyy/sizeyunsuan-GUI.git a.需求分析: ...
- 201521123077 《Java程序设计》第4周学习总结
1. 本周学习总结 几种简单说明注释的使用 抽象类与抽象方法 super调用父类的方法 2. 书面作业 Q1.注释的应用使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看. ...
- Java多态总结
面向对象的三大特性:封装.继承.多态.从一定角度来看,封装和继承几乎都是为多态而准备的.这是我们最后一个概念,也是最重要的知识点. 1.定义: 多态:指允许不同类的对象对同一消息做出响应.即同一消息可 ...