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(面板 ...
随机推荐
- 3_SQL Server通过代码的方式添加数据
--通过代码添加数据 --第一种方式--insert into 表名(列名1,列名2,...)values (值1,值2,...)insert into Department(DepName, Dep ...
- node简单配置一台服务器
要想使用nodeJS来搭建服务器,首先需要一个必备的条件:node必须安装,建议为4.0版本及以上: 在node中,为我们封装了好多类,搭建服务器需要的一个类是"http"类. 用 ...
- 【找不到与请求 URI匹配的 HTTP 资源】（转）
在.net下,创建一个HTTP服务,有很多方案,比较老ashx,一般处理程序(HttpHandler), Web Service SOAP协议的,数据格式是XML,HTTP协议 WCF ...
- poj 1523求割点
题意:给出一个无向图,求割点以及去除这个点后图分为几部分: 思路:割点定义:去掉该点后图将分成几个部分.割点:(1)当k为根节点且有>1个分支,则去除该点后图便被分成几个分支.(2)DFN[v] ...
- 阿里云Prismplayer-Web播放器的使用
Prismplayer是一套在线视频播放技术方案,同时支持Flash和Html5两种播放技术,可对播放器进行功能配置和皮肤定制.其在线使用文档地址为:https://help.aliyun.com/d ...
- python tornado 实现类禅道系统
最近楼主加班 喽, 好久没有更新我的博客了,哎,一言难尽,废话我就不说了,来开始上精华. 背景:目前市面上有很多bug管理工具,但是各有各的特点,最著名,最流行的就是禅道,一个偶然的机会接触到了pyt ...
- OpenCppCoverage 的使用
OpenCppCoverage 的使用 OpenCppCoverage 是一款好用方便的 C++ 代码覆盖率检测工具,可以独立在命令行运行也可以作为 Visual Studio 13/15/17 的插 ...
- 结队编程--基于GUI的四则运算
coding地址 https://git.coding.net/lizhiqiang0x01/GUI-sizeyunsuan.git 李志强 201421123028 连永刚 201421123014 ...
- 201521044091《Java程序设计》第7周学习总结
1. 本周学习总结 ArrayList代码分析 1.1 解释ArrayList的contains源代码 用于判断Collection中是否包含某个元素.List<T>的contains方法 ...
- 201521123080《Java程序设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...