<script type="text/javascript">
$(function(){
$('#myNumberBox').numberbox({
min:5.5,
max:20,
precision:2
});
$('myPagination').pagination({
total:114,
loading:true,
pageSize:15,
pageNumber:2,
pageList:[10,15,20,25,30,50,100],
loading:false,
showPageList:true,
showRefresh:true,
beforePageText:'第',
afterPageText:'页，共{page}页',
displayMsg:'{from}-{to}/total',
buttons:[{
iconCls:'icon-add',
handler:function(){
alert('add');
}
},{
iconCls:'icon-cut',
handler:function(){
alert('cut');
}
},{
iconCls:'icon-save',
handler:function(){
alert('save');
}
}],
onSelect:function(pageNumber,pageSize){
$(this).pagination('loading');
alert("pageNumber:"+pageNumber+";pageSize:"+pageSize);
$(this).pagination('loaded');
}
});
$('#myPanel').panel({
title:'My Love',
iconCls:'icon-save',
width:300,
height:200,
left:10,
top:5,
fit:false,
collapsible:false,
minimizable:false,
maxmizable:false,
closeable:true,
tools:[
{iconCls:'icon-add',handler:function(){alert("add");}},
{iconCls:'icon-cancel',handler:function(){alert("cancel");}}
],
loadingMessage:'The Rose',
onResize:function(width,height){
alert(width+';'+height);
}
});
$('#tt1').tree({
animate:true,
onClick:function(node){
alert('you click'+node.text);
},
});
});
function disableMyNumberBox(){
$('#myNumberBox').numberbox('disable');
}
function enableMyNumberBox(){
$('#myNumberBox').numberbox('enable');
}
function validate(){
alert($('#myEmail').validatebox('isValid'));
}
function resize(){
$("#d").window({
title:'if let you go',
width:600,
collapsible:false,
minimizable:false,
maxmizable:false,
closeable:false,
closed:false,
height:500,
draggable:true,
resizable:true,
shadow:false,
modal:true
});
}
function open1(){
$('#d').window('open');
}
function close1(){
$('#d').window('close');
}
function test(){
$('#testDiv').window('open');
}
var indexTab = 0 ;
function addTab(){
indexTab++;
$('#tabs').tabs('add',{
title:'The Album of Westlife'+indexTab,
content:'Body Of The New Album',
closable:true
});
}
function reload(){
$('#tt1').tree('reload');
}
function getChecked(){
var nodes = $('#tt1').tree('getChecked');
var s = '' ;
for(var i = 0 ; i < nodes.length; i++){
if(nodes[i].text != '' ) s+= nodes[i].text;
}
alert(s);
}
function getSelected(){
var node = $('#tt1').tree('getSelected');
alert(node.text);
}
function collapse(){
var node = $('#tt1').tree('getSelected');
$('#tt1').tree('collapse',node.target);
}
function expand(){
var node = $('#tt1').tree('getSelected');
$('#tt1').tree('expand',node.target);
}
function isLeaf(){
var node = $('#tt1').tree('isLeaf');
$('#tt1').tree('isLeaf',node.target);
}
</script>
</head>
<body>
<!-- numberbox -->
<div>
<a href="#" onclick="disableMyNumberBox()">disable</a>
<a href="#" onclick="enableMyNumberBox()">enable</a>
<input id="myNumberBox" required="true"/>
</div>
<!--end numberbox -->
<!-- validateBox -->
<div>
<h1>ValidateBox <a href="#" onclick="validate()">Validate Box</a></h1>
<table>
<tr>
<td>Name:</td>
<td>
<input type="text" class="easyui-validatebox" required="true" validType="length[1,3]">
</td>
<td>Email:</td>
<td>
<input id="myEmail" type="text" class="easyui-validatebox" validMessage="Email格式错误！" required="true" validType="email">
</td>
</tr>
<tr>
<td>URL:</td>
<td>
<input class="easyui-validatebox" validType="url" validMessage="URL格式错误">
</td>
</tr>
<tr>
<td>Note</td>
<td>
<input class="easyui-validatebox" validMessage="字符长度至少是五位!" validType="minLength[5]">
</td>
</tr>
</table>
</div>
<!-- end validateBox -->
<!-- pagination -->
<div>
<a href="#" onclick="javascript:$('#myPagination').pagination({loading:false})">loaded</a>
<a href="#" onclick="javascript:$('#myPagination').pagination({loading:true})">loading</a>
<div id="myPagination" style="width:500px;border:1px solid #ccc;background-color:#efefef;" ></div>
</div>
<!-- end pagination -->
<!-- window -->
<div>
<div>
<a href="javascript:void(0)" onclick="resize()">resize</a>
<a href="javascript:void(0)" onclick="open1()">open</a>
<a href="javascript:void(0)" onclick="close1()">close</a>
</div>
<div id="d" class="easyui-window" title="My Window" icon="icon-save" style="width:500px;height:200px;padding:5px;background:#fafafa;">
<div class="easyui-layout" fit="true">
<div region="north" border="true" style="padding:10px;background: #fff; border: 1px solid #ccc;">
Westlife is my favoriate!
</div>
<div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">
Hello World !<br>
click<a href="#" onclick="test()">here</a> to popup other window
</div>
<div region="south" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">
<a class="easyui-linkbutton" icon="icon-ok" href="javscript:void(0)" onclick="resize()">OK</a>
<a class="easyui-linkbutton" icon="icon-cancel" href="javascript:void(0)" onclick="resize()">Cancel</a>
</div>
</div>
</div>
</div>
<div id="testDiv" class="easyui-window" closed="true" modal="true" title="Test Window" style="width:200px;height:100px;"></div>
<!-- end window -->
<!-- panel -->
<div id="myPanel"></div>
<div class="easyui-panel" width="200" height="100">easyui panel!</div>
<!-- end panel -->
<!-- tap -->
<div id="myTap">
<div>
<a class="easyui-linkbutton" icon="icon-add" href="javascript:void(0)" onclick="addTab()">add Tab</a>
</div>
<div id="tabs" class="easyui-tabs" style="width:500px;height:200px;">
<div title="If I Let You Go">
<h4> Westlife----If I Let You Go! </h4>
day after day,time passed away <br>
and i just can't get you off my mind<br>
nobody knows, i hide it inside <br>
i keep on searching but i can't find <br>
</div>
<div title="Season In The Sun" closable="true" style="padding:20px;overflow:auto;" cache="false">
Goodbye to you, my trusted friend 再见了，我的挚友we've known each other since we were nine or ten 我们从孩提时就已相识,相知together we've climbed hills and trees
我们一起爬山爬树learned of love and A-B-C
学会去爱和其他基本知识skinned our hearts
and skinned our knees
</div>
<div title="You Raise Me Up" selected="true">
when I am down and, oh my soul, so weary; 当我消沉之时，我的灵魂无所依附
When troubles come and my heart burdened be; 困难来袭之时，我的心不堪重负
Then, I am still and wait here in the silence, 寂静如斯，我依然静静地在这等待
Until you come and sit awhile with me. 直到你到我的身边
You raise me up, so I can stand on mountains; 你鼓舞了我，我才能立于山巅
You raise me up, to walk on stormy sea; 你鼓舞了我，我才能遨游怒海
I am strong, when I am on your shoulders; 靠在你的肩上，我才变得坚强
You raise me up... To more than I can be. 你鼓舞了我，让我超越极限
</div>
</div>
</div>
<!-- end tap -->
<!-- tree -->
<ul class="easyui-tree" checkbox="true" id="tt1" width="200">
<li><span>Folder</span></li>
<ul>
<li><span>Sub Folder 1</span></li>
<ul>
<li>folder 1-1</li>
<li>folder 1-2</li>
</ul>
<li><span>File1</span></li>
<li><span>File2</span></li>
<li><span>File3</span></li>
</ul>
</ul>
<div>
<a href="#" onclick="reload()">reload</a>
<a href="#" onclick="getChecked()">getChecked</a>
<a href="#" onclick="getSelected()">getSelected</a>
<a href="#" onclick="collapse()">collapse</a>
<a href="#" onclick="expand()">expand</a>
<a href="#" onclick="append()">append</a>
<a href="#" onclick="remove()">remove</a>
<a href="#" onclick="isLeaf()">isLeaf</a>
</div>
<ul id="tt2"></ul>
<!-- end tree -->
</body>
