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>
