jQuery EasyUI基础教程之EasyUI常用组件(推荐)

2020-05-24 21:25:10易采站长站整理

<div id="win1"></div>
<div id="win2"></div>
<script>
$("#open1").click(function(){
$('#win1').window({
width:600,
height:400,
modal:false ,
minimizable :false,
maximizable:false,
title:"我的窗口"
});
});
$("#open2").click(function(){
$('#win2').window({
width:600,
height:400,
modal:false ,
minimizable :false,
maximizable:false,
title:"我的窗口"
});
});
</script>

7.2 Dialog(对话框窗口)

该对话框是一种特殊类型的窗口,它在顶部有一个工具栏,在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如collapsible,minimizable,maximizable工具等。


<input type="button" value="打开对话框" id="open1"/>
<div id="win1"></div>
<script>
$("#open1").click(function(){
$('#win1').dialog({
width:400,
height:400,
modal:false ,
minimizable :false,
maximizable:false,
title:"我的对话框",
toolbar:[
{
text:'编辑',
iconCls:'icon-edit',
handler:function(){alert('edit')}
},{
text:'帮助',
iconCls:'icon-help',
handler:function(){alert('help')}
}
],
buttons:[
{
text:'保存',
handler:function(){alert("保存");}
},{
text:'关闭',
handler:function(){
//关闭对话框
$("#win1").dialog("close");
}
}
],
href:"/EasyUi/form.html"
});
});
</script>

7.3 Messager(消息窗口)

消息窗口提供了不同的消息框风格,包含alert(警告框), confirm(确认框), prompt(提示框), progress(进度框)等。所有的消息框都是异步的。用户可以在交互消息之后使用回调函数去处理结果或做一些自己需要处理的事情。


<input type="button" value="确认框" /><br />
<input type="button" value="警告框" /><br />
<input type="button" value="输入框" /><br />
<input type="button" value="显示框" /><br />
<script>
$("input").click(function(){
//定位button按钮,提供单击事件
var tip=$(this).val();
tip=$.trim(tip);
if("警告框"==tip){
$.messager.alert("警告框","警告处分","waring",function(){
//alert("关闭");
});
}
if("确认框"==tip){
$.messager.confirm("确认框","你确认要删除么",function(value){
alert(value);
});
}
if("输入框"==tip){
$.messager.prompt("输入框","请输入你的姓名",function(name){
alert(name);