easyUI使用

最新推荐文章于 2024-11-14 10:20:59 发布

joylin14

最新推荐文章于 2024-11-14 10:20:59 发布

阅读量459

点赞数

分类专栏： javaEE前台文章标签： easyui datagrid

javaEE前台专栏收录该内容

2 篇文章 0 订阅

订阅专栏

来源：http://zzy7182.iteye.com/blog/1271562

easyui如何使用一

博客分类：
easyui

easyui如何使用一介绍的是accordion、dateBox、dialog、comobobox、messager的使用方法，说的比较肤浅，目前还在学习如何使用过程中。

Java代码

<link rel="stylesheet" type="text/css" href="<%=jsPath %>/jquery-easyui-1.2.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=jsPath %>/jquery-easyui-1.2.3/themes/icon.css">
<script type="text/javascript" src="<%=jsPath %>/jquery-easyui-1.2.3/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<%=jsPath %>/jquery-easyui-1.2.3/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function() {
$('#myDiv').accordion( {
width : 400,
height : 200,
fit : false
});
var dateBox = $('#myDateBox').datebox({
currentText:'today',
closeText:'close',
disable:false,
required:true,
missingMessage:'required',
formatter:formatDate,
onSelect:function(da){
alert("123");
}
});
function formatDate(date){
var returnStr = 'null';
if(date instanceof Date){
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
returnStr = year+"年"+month+"月"+day+"日";
}
return returnStr;
}
$('#myDialog').dialog({
title:'my Dialog',
collapsible:true,
minimizale:true,
maxmizable:true,
resizable:true,
width:500,
toolbar:[
{
text:'Add',iconCls:'icon-add',handler:function(){
alert('add');
}
},'-',{
text:'Save',iconCls:'icon-save',handler:function(){
alert('save');
}
},'-',{
text:'Ok',iconCls:'icon-ok',handler:function(){
alert('Ok');
}
},'-',{
text:'Cancel',iconCls:'icon-cancel',handler:function(){
$('#myDialog').dialog('close');
}
}
],
buttons:[{text:'确定',iconCls:'icon-ok'},{text:'关闭',iconCls:'icon-close',handler:function(){
$('#myDialog').dialog('close');
}
}
]
});
});
$.messager.defaults={ok:'确定',cancel:'取消'};
function disableDateBox(){
$('#myDateBox').datebox('disable');
}
function enableDateBox(){
$('#myDateBox').datebox('enable');
}
function loadData(){
$('#myCombobox').combobox({
url:'combobox_data.json',
valueField:'id',
textField:'text'
});
}
function show(){
$.messager.show({
title:'show',
msg:'you raise me up',
showType:'show'
});
}
function slide(){
$.messager.show({
title:'slide',
msg:'let you go',
timeout:5000,
showType:'slide'
});
}
</script>
</head>
<body>
<div id="myDiv" border="true">
<div title="标题一" style="overflow: auto; padding: 10px;">
<h3 style="color: #0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
<div title="标题二" selected="true"
style="padding: 10px;">content2</div>
<div title="标题三">content3</div>
</div>
<div id="myDiv2" class="easyui-accordion" style="width:400px;height:200px;" fit="false">
<div title="测试1">123</div>
</div>
<div>
<a href="#" οnclick="disableDateBox()">disable</a>  <a href="#" οnclick="enableDateBox()">enable</a>
<input id="myDateBox"></input>
</div>
<div>
<a href="#" οnclick="loadData()">loadData</a>
<select id="myCombobox">
<option selected="selected">===请选择===</option>
<option>苹果</option>
<option>橘子</option>
<option>梨子</option>
<option>香蕉</option>
</select>
</div>
<div id="myDialog"></div>
<div>
<a href="#" οnclick="show()">show</a>  
<a href="#" οnclick="slide()">slide</a>  
</div>
</body>