jQuery EasyUI详解-EasyUI消息框、对话框和窗体
2017-03-14 09:16
405 查看
本篇主要介绍信息提示框、对话框及窗体相关控件,这些都是最常用的页面弹出控件,使用一个详细的例子描述。
按惯例献上案例的示意图:
代码如下,注意文字部分描述:
按惯例献上案例的示意图:
代码如下,注意文字部分描述:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>窗体和布局</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> </head> <body> <!-- 通过设置宽度和左右边距auto使form居中 --> <form class="main_form" style="margin:8px auto;width:600px;"> <div>脚本在body最后面</div> <div class="easyui-panel" title="信息窗messager 示例" style="width:540px;margin-bottom:10px;padding:10px 10px;"> <div>是否曾对丑陋的alert提示框感到伤悲?EasyUI框架的Messager美观又好用,下面是常用例子</div> <a href="#" class="easyui-linkbutton" onclick="showMessager();">右下角弹窗提示</a><br/> <a href="#" class="easyui-linkbutton" onclick="showAlert();">页面中心弹窗提示</a><br/> <a href="#" class="easyui-linkbutton" onclick="showConfirm();">非常常用的交互提示框</a> </div> <div class="easyui-panel" title="对话框dialog 示例" style="width:540px;margin-bottom:10px;padding:10px 10px;"> <div>在用户列表界面,新增、修改用户使用弹出式的对话框界面非常合适</div> <a href="#" class="easyui-linkbutton" onclick="showSimpleDialog();">点此显示简单对话框</a> <div id="dialog_simple" class="easyui-dialog" title="简单对话框" data-options="iconCls:'icon-ok',closed:'true'" style="width:300px;height:200px;padding:10px"> 这是一个简单的对话框,默认情况下是关闭的 </div><br/> <a href="#" class="easyui-linkbutton" onclick="showComplexDialog();">带工具栏和按钮的对话框</a> <!-- 该对话框的工具栏为#dialog_toolbar,按钮栏为#dialog_buttonbar --> <div id="dialog_complex" class="easyui-dialog" title="复杂对话框" style="width:300px;height:200px;padding:10px" data-options="iconCls: 'icon-save',closed:'true',toolbar: '#dialog_toolbar',buttons: '#dialog_buttonbar'"> 注意工具栏和按钮栏的关联方式 </div> <!-- 工具栏 --> <div id="dialog_toolbar" style="padding:2px 0"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">编辑</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true">帮助</a> </div> <!-- 按钮栏 --> <div id="dialog_buttonbar"> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="closeComplexDialog();">关闭</a> <a href="javascript:void(0)" class="easyui-linkbutton">按钮2</a> </div> </div> <div class="easyui-panel" title="窗体window 示例" style="width:540px;margin-bottom:10px;padding:10px 10px;"> <div>窗体跟对话框不同的时,窗体是一个完整的窗口,可以最大化、最小化、折叠(说实话也没啥多大区别..)</div> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="openSimpleWindow();">打开一个简单窗体</a> <div id="window_simple" class="easyui-window" title="简单窗体" data-options="iconCls:'icon-ok',closed:'true'" style="width:300px;height:200px;padding:10px;"> 窗体内容 </div> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="openModalWindow();">打开一个模态窗口(不明白模态的请百度)</a> <div id="window_modal" class="easyui-window" title="模态窗口" data-options="modal:true,closed:true,iconCls:'icon-ok'" style="width:300px;height:200px;padding:10px;"> 这是一个模态窗口,焦点保持在窗口内 </div> </div> </form> <script type="text/javascript"> function showMessager(){ $.messager.show({ title:'这里是标题', msg:'这里是具体内容', showType:'show'//此处可改为slide fade等不同显示方式 }); } function showAlert(){ //注意第三个参数为图标类型,其他取值有:info question warning $.messager.alert('标题','错误!','error'); } function showConfirm(){ $.messager.confirm('确认?', '您确定吗?', function(result){ //注意result的值为true或者false alert('结果: '+result); }); } function showSimpleDialog(){ //对话框显示 $('#dialog_simple').dialog('open'); } function showComplexDialog(){ $('#dialog_complex').dialog('open'); } function closeComplexDialog(){ $('#dialog_complex').dialog('close'); } function openSimpleWindow(){ $('#window_simple').window('open'); } function openModalWindow(){ $('#window_modal').window('open'); } </script> </body> </html>
相关文章推荐
- jQuery EasyUI详解-EasyUI环境配置
- jQuery EasyUI详解-EasyUI常用控件之按钮/搜索框/密码框/文件框/数字框/日期时间选择框
- jquery easyui 弹出消息框 (转载) jQuery EasyUI API 中文文档 - 消息框(Messager) http://www.cnblogs.com/hantianwei/archive/2012/03/19/2407113.html
- jQuery EasyUI详解-EasyUI布局和标签页
- 使用EasyUI开发后台系统-EasyUI对话框和窗体
- jQuery EasyUI详解-EasyUI表格datagrid
- jQuery EasyUI详解-EasyUI表单 文本框 按钮
- jQuery EasyUI详解-EasyUI树形控件tree
- jQuery EasyUI详解-EasyUI下拉列表datalist
- Jquery Easyui对话框组件Dialog使用详解(14)
- jQuery EasyUI详解-EasyUI下拉框combobox
- jQuery EasyUI详解-EasyUI环境配置
- JavaScript定制弹出对话框(详解)
- ASP.Net 2.0窗体身份验证机制详解
- [引]Windows窗体编程基础学习: 对话框组件
- [Web]如何实现从模式窗体-网页对话框 中获得返回值
- WPF窗体对话框
- ASP.Net 2.0 窗体身份验证机制详解
- delphi中的窗体事件详解
- [引]Windows窗体编程基础学习: 对话框组件