<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基础的更多相关文章

  1. EasyUI中Base(基础)的基本用法

    EasyUI中Base(基础)的用法 一.Base(基础) 1.parser 解析器 2.easyloader 简单加载 3.draggable 拖动 4.droppable 放置 5.resizab ...

  2. EasyUI笔记（一）Base基础

    总结: 1)每个UI都是通过属性.事件和方法运作的 2)用JS加载时只需传入一个参数(用大括号{}包围),包含若干个键值对,之间用逗号隔开: 3)事件也是写在JS加载时的方法中,也是键值对形式,值是匿 ...

  3. 雷林鹏分享：jQuery EasyUI 树形菜单 - 创建基础树形网格

    jQuery EasyUI 树形菜单 - 创建基础树形网格 树形网格(TreeGrid)组件从数据网格(DataGrid)继承,但是允许在行之间存在父/子节点关系.许多属性继承至数据网格(DataGr ...

  4. 【夯实PHP基础系列】JQuery easyUI的使用

    最近在做一个公司的后台项目中,接触到 JQuery easyUI前端框架,被她简洁的代码和简单有效的ajax交互所深深吸引. 体会有以下3个方面: 1)快速创建表格的能力: 后端程序,比如PHP只需要 ...

  5. jQuery EasyUI API - Base - Draggable [原创汉化官方API]

    最近在学习jQuery EasyUI,发现中文的文档好少,部分文档不错但它是鸟语的,为了大家也为了自己学习吧,汉化做一下笔记. 有没有说清楚的,或者翻译不正确的地方还请大家谅解指出.. 由于工作时间原 ...

  6. 前端基础教程-jQuery EasyUI 的EasyLoader实例

    兄弟连前端分享-jQuery EasyUI 的EasyLoader实例 to move panel to other position $('#p').panel('move',{ left:100, ...

  7. jquery easyui中文培训文档

    目  录 1.... Accordion(可折叠标签)... 2 1.1          实例... 2 1.2          参数... 3 2.... DateBox(日期框)... 4 2 ...

  8. Jquery easyui 教程

            Jquery easyui教程                 目  录 1基本拖放... 4 2构建购物车型拖放... 5 3创建课程表... 8 4菜单和按钮Menu and Bu ...

  9. 雷林鹏分享：jQuery EasyUI 插件

    jQuery EasyUI 插件 jQuery EasyUI 提供了用于创建跨浏览器网页的完整的组件集合,包括功能强大的 datagrid(数据网格).treegrid(树形表格). panel(面板 ...

随机推荐

  1. 微信小程序开发历程

    小程序:    帮助文档:(https://mp.weixin.qq.com/debug/wxadoc/dev/index.html) 优势:    一种无须安装即可运行的程序,与订阅号,服务号是同一 ...

  2. MPLS VPN随堂笔记1

    MPLS VPN 基础 1.MPLS vpn架构的特点 1.1.允许不同CE传递相同私网路由 1.2.SP内部(所有P路由器)不需要学习CE路由 1.3.无安全保障但有带宽保障(跟SP租用服务) 2. ...

  3. Brotli、Deflate、Zopfli、LZMA、LZHAM、Bzip2六种无损数据压缩性能比较

    这里比较了六种数据压缩算法,结果表明Brotli算法会代替普遍使用的Deflate算法.分别用Canterbury compression corpus,web contentcorpus,和 enw ...

  4. 201521123084 《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 2. 书面作业 本次作业题集集合 1. List中指定元素的删除(题目 ...

  5. 201521123049 《JAVA程序设计》 第4周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. ###1.类型转换(cast):是将两种不同类型的变量进行转换,但不能随意强制转换,随意强制 ...

  6. Java中 == 和 equals()详解

    java中的数据类型分为两种: 一 .基本数据类型: byte.short.int.long.float.double.char.boolean 比较它们需要用  ==  ,比较的是它们的值是否相等 ...

  7. 201521123109《java程序设计》第九周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1. 常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自 ...

  8. CoordinatorLayout的使用

    最近项目有一个需求,做出类似闲鱼鱼塘界面的效果.如下图: 所以想到用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout去搭建此界面. Coor ...

  9. SpringMVC Restful api接口实现

    [前言] 面向资源的 Restful 风格的 api 接口本着简洁,资源,便于扩展,便于理解等等各项优势,在如今的系统服务中越来越受欢迎. .net平台有WebAPi项目是专门用来实现Restful ...

  10. JVM菜鸟进阶高手之路十一（eden survivor分配问题）

    转载请注明原创出处,谢谢! 问题 这个Xmn设置为1G,,我用jmap -heap 看,这个Eden From To怎么不是一个整8:1:1的关系呢? 我看内存分配还是没变,我Xmn1g,感觉From ...