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>

打开和关闭窗口。

$('#win').window('open');

$('#win').window('close');

通过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页面。

网页设计编辑利器——jQuery EasyUI所学整理(待编辑)的更多相关文章

  1. 网页设计、java、Andorid资源清单整理

    多学多练做笔记很重要. 赤裸裸的干货非鸡汤 网页设计的主要技术:    Html,    Js,    Css,    Ps       HTML/HTML5     网页的基础Html必须知道的.但 ...

  2. 经历:如何设置jquery easyui中下拉框不可编辑

    今天,在项目中碰到一个这样的问题,当选择按钮时候,查询条件是可以输入的,否则,表单框是不可用的[图1].但是,批量查询中的船名和装港用到了自动配置,即jquery-easyui中的combox的配置. ...

  3. 网页设计(CSS&JS)

    实验一  简单静态网页设计 一. 实验目的: 复习使用记事本编辑网页的方法. 熟悉不同表单控件类型的应用. 练习使用记事本在网页中添加表单与表单元素. 二. 实验内容: 根据提供的素材设计在线调查问卷 ...

  4. HTML 5网页设计入门必读(书)

    今天看了一本由人民邮电出版社出版.邢薇薇 郭俊飞 王雪翻译的<HTML 5网页设计入门必读>,在此整理一下知识点,以及写一些自己的读后感. 本书的开章还是和大部分HTML 5书籍一样,用极 ...

  5. 扩展jquery easyui datagrid编辑单元格

    扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...

  6. ASP.NET网站权限设计实现(三)——套用JQuery EasyUI列表显示数据、分页、查询

    一.说明: JQuery EasyUI下载地址:http://jquery-easyui.wikidot.com/download,最新版本1.2.2. 首先预览一下界面: 本例实现的功能: 1.多标 ...

  7. jquery easyui使用(四)······添加,编辑,删除

    前端: <div style="font-size: 25px; font-weight: 700; margin: 50px 0 10px 10px;"> 车辆登记 ...

  8. Jquery easyui开启行编辑模式增删改操作

    Jquery easyui开启行编辑模式增删改操作 Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </ ...

  9. [转]Jquery easyui开启行编辑模式增删改操作

    本文转自:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html ...

随机推荐

  1. New Concept English Two 5

    $课文9 冷遇 83. On Wednesday evening, we went to the Town Hall. 星期三的晚上,我们去了市政厅. 84. It was the last day ...

  2. MyEclipse10 中设置Jquery提醒,亲测可用

    最近做练习需要用到Jquery,在myeclipse中默认没有提示功能.然后在网上找解决方案,有一种方案说使用spket,然后搜索安装,折腾了半天还是不行,脑细胞死掉几百个.. 然后在网上搜到另外一种 ...

  3. hosts 配置

    hosts 配置 在windows上比较好的方法就是在本地配制hosts,在windows/system32/drivers/etc/hosts 下,增加 127.0.0.1 m.t.XXXX.com ...

  4. 在myeclipse中配置DB Driver(数据库用MySql),并在myeclipse执行sql语句操作

    在myeclipse中配置DB Driver(数据库用MySql),并在myeclipse执行sql语句操作 MyEclipse6.5    ,  mysq驱动jar包为mysql-connector ...

  5. Linux 网络编程->epoll<-LT/ET模式整理(~相逢何必曾相识~)

    今天自己整理一下epoll,网上有很多经典的介绍,看了很多~收藏了很多~还是整理一下做个积累, 自己的东西好找~ 1. epoll 模型简介 epoll 是Linux I/O 多路复用接口 selec ...

  6. 汉诺塔的c++实现

    void hanNuoTa(int n,int a,int b,int c) { ) return; hanNuoTa(n - , a, c, b); cout << n << ...

  7. Linux运维学习笔记-网络安全等级保护

    网络安全等级保护简介与作用: 验证信息系统是否满足相应安全保护等级的一个过程. 对不同信息系统分等级进行保护.

  8. C#中时间计算方法汇总

    这几天要做一个关于时间数据统计的页面,发现有些东西还是比较用的,现总结如下. DateTime dt = DateTime.Now;  //当前时间 DateTime startWeek = dt.A ...

  9. [BZOJ3162]独钓寒江雪

    bzoj description 你要给一个树上的每个点黑白染色,要求白点不相邻.求本质不同的染色方案数. 两种染色方案本质相同当且仅当对树重新标号后对应节点的颜色相同. \(n\le 5\times ...

  10. DecimalFormat格式化数字

    DecimalFormat格式化数字 DecimalFormat类也是Format的一个子类,主要作用是格式化数字.当然,在格式化数字时要比直接使用NumberFormat更加 方便,因为可以直接指定 ...