easyui如何使用一
easyui如何使用一介绍的是accordion、dateBox、dialog、comobobox、messager的使用方法，说的比较肤浅，目前还在学习如何使用过程中。
<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>
<!-- accordion -->
<div id="myDiv" border="true">
<!--必须要有title属性，否则不会包含到accordion中去-->
<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>
<!--end accordion -->
<!-- datebox -->
<div>
<a href="#" onclick="disableDateBox()">disable</a> <a href="#" onclick="enableDateBox()">enable</a>
<input id="myDateBox"></input>
</div>
<!-- end datebox -->
<!-- combox -->
<div>
<a href="#" onclick="loadData()">loadData</a>
<select id="myCombobox">
<option selected="selected">===请选择===</option>
<option>苹果</option>
<option>橘子</option>
<option>梨子</option>
<option>香蕉</option>
</select>
</div>
<!--end combobox-->
<!-- toolbar -->
<div id="myDialog"></div>
<!-- end toolbar -->
<!-- messager -->
<div>
<a href="#" onclick="show()">show</a>
<a href="#" onclick="slide()">slide</a>
</div>
<!-- end messager -->
</body>