网页设计编辑利器——jQuery EasyUI所学整理(待编辑)

1, Messager弹窗信息

方法:

$.messager.alert(...), 在网页中间弹出一个窗口

$.messager.confirm(...) 弹出一个确认窗口, 有确定和取消两个按钮, 确定返回true, 取消返回false

$.messager.progress(...) 显示一个进度条

$.messager.prompt(...) 显示一个带文本输入框的对话弹窗

$.messager.show(...)在网页的右下角弹出一个窗口提示信息

2, Panel面板

构建的方式有两种, 可以通过使用JS构建panel的方法, 也可以让其调用easyui类包内容, 但是这两种方法的前提是都必须先有一个已经写好的<div></div>

常用属性:

id: 面板的id属性

title: 面板的标题

iconCls: 在面板的右上角添加一个小图标

width: 设置面板的宽度

height: 设置面板的高度

3, window窗口

构建的方式有两种, 可以通过使用JS构建panel的方法, 也可以让其调用easyui类包内容, 但是这两种方法的前提是都必须先有一个已经写好的<div></div>

打开和关闭窗口。

通过ajax读取窗口内容。

$('#win').window('refresh', 'get_content.php'); (在eclipse上试了一下只能加在jsp页面的文件, 类似于那个iframe框架, Servlet加载不出来), 加载Servlet的时候可以用JS的方法创建, 然后用 href 属性可以加载Servlet

常用属性

collapsible: 参数为bealoon类型, 定义是否显示折叠菜单title: 窗口的文本标题, 参数是一个String类型的

minimizable: 参数为bealoon类型, 定义是否显示最小化按钮

maximizable: 参数为bealoon类型, 定义是否显示最大化按钮

closable: 参数为bealoon类型, 定义是否显示关闭按钮

4, linkbutton按钮

创建一个按钮也是有两种方法, 通过标签和JS, 按钮就只有一个onclick事件.

常用属性:

id: linkbutton的id属性

text: 按钮上需要显示的文本

事件:

onclick: 在点击按钮时所触发的事件

5, dialog对话窗口

该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。创建对话窗口也是可以通过标签和JS两种方式来创建

常用属性:

继承window的属性, 重点记住下面两个

toolbar: 定义对话框的工具栏, 在上端显示, 语法格式:

toolbar:[{

...:...,

...:...

}]

buttons: 定义对话框的按钮栏, 在底端显示, 语法格式:

buttons:[{

...:...,

...:...

}]

还有一个比较重要的特点: 也同样用于上面的其他window, panel, linkbutton等, 在标签属性中有一个data-options="...", 这个没法在JS中使用, 定义的话只能在标签里面写上

6, 验证框(validatebox)和文本框(textbox)

这两者的相同点都是可以通过上面说到的两种方式创建, 用标签或者是JS

不同点:

1, textbox可以在输入框内加icon图标, 而validatebox不支持

2, validatebox可以进行自定义的验证, 而textbox没有自定义, 只能使用自己有的那些方法进行验证.

validatebox自定义验证格式如下

$.extend($.fn.validatebox.defaults.rules, {

     minLength: {

         validator: function(value, param){

             return value.length >= param[0];

         },

         message: 'Please enter at least {0} characters.'

     }

 });

...

...

...

 <input class="easyui-validatebox" data-options="validType:'minLength[5]'">  

这样就可以验证长度是否为5

不过这段代码看不懂, 希望能有朋友简单的解释一下

7, 下拉列表菜单combobox

自定义下拉框显示一个可编辑的文本框和下拉面板在html页面。