JQuery EasyUI 教程

  周末练完车，没有事情，想随便写点东西。一是给自己做点笔记，而是提供给志同道合之人一起进步。

jQuery EasyUI 主要包括七个部分的内容：第一：初识EasyUI， Messager消息框。第二： jQuery EasyUI的基本组件（panel，window，dialog）。 第三：Form表单。

第四讲：LayOut布局。第五讲：datagrid数据表格。第六讲：tree。第七讲：combogrid，treegird，combotree。

其中数据表格是最重要的，是数据的展示形式。jQuery EasyUI框架是一jQuery为基础的。在MyEclipse中如何构建jQuery EasyUI项目，我之前写过博客专门介绍过，这里就不过多介绍。

jQuery EasyUI消息框Messager。

 

用 $.messager.defaults 重写了 defaults。

 

依赖

• window
• linkbutton
• progressbar

用法

1.  $.messager.alert('Warning','The warning message');   

注意：Warning 代表 提示信息，消息框的title， The warning message 是提示内容。$.message.alert（）其实是一个div，alert能够使程序停止。

2.  $.messager.confirm('Confirm','Are you sure you want to delete record?',function(r){   

3.      if (r){   

4.          alert('ok');   

5.      }   

6.  });  

特性

名称

类型

说明

默认值

ok

string

确定按钮的文字。

Ok

cancel

string

取消按钮的文字。

Cancel

方法

名称

参数

说明

$.messager.show

options

在屏幕的右下角显示一个消息窗口，options 是一个配置对象：
showType： 定义消息窗口如何显示。可用的值是： null、slide、fade、show。默认是 slide。
showSpeed： 定义消息窗口完成显示所需的以毫秒为单位的时间。默认是 600。
width： 定义消息窗口的宽度。默认是250。
height： 定义消息窗口的高度。默认是100。
msg： 显示的消息文字。
title： 头部面板上显示的标题文字。
timeout： 如果定义为 0，除非用户关闭，消息窗口将不会关闭。如果定义为非 0 值，消息窗口将在超时后自动关闭。

$.messager.alert

title, msg, icon, fn

显示一个提示窗口。参数：
title： 显示在头部面板的标题文字。
msg： 显示的消息文字。
icon： 显示图标的图片。可用的值是： error、question、info、warning。
fn： 窗口关闭时触发的回调函数。

$.messager.confirm

title, msg, fn

显示一个带“确定”和“取消”按钮的确认消息。参数：
title： 显示在头部面板上的标题文字。
msg： 显示的消息文字。
fn(b)： 回调函数，当用户点击确认按钮时传递一个 true 参数，否则给它传递一个 false 参数。

$.messager.prompt

title, msg, fn

显示一个带确定和取消按钮的消息窗口，提示用户输入一些文字。参数：
title： 显示在头部面板上的标题文字。
msg： 显示的消息文字。
fn(val)：回调函数，使用用户输入的数值参数。

$.messager.progress

options or method

显示一个进度的消息窗口。
options 这样定义：
title： 显示在头部面板上的标题文字，默认值是 '' 。
msg： 消息框的文本，默认值是 '' 。
text： 显示在进度条里的文字，默认值是 undefined 。
interval： 每次进度更新之间以毫秒为单位的时间长度。默认值是 300 。进度条加载的时间。每个多长时间加载一次。

方法这样定义：
bar： 获取 progressbar 对象。
close： 关闭进度窗口。

代码示例

显示进度消息窗口：

          $.messager.progress(); 

现在关闭消息窗口：

          $.messager.progress('close');

注意：回调函数的使用。以后再删除数据表格的数据时，经常使用的消息框。