书签 分享 收藏 举报 版权申诉 / 49

类型惠普内部员工easyui培训文档.docx

  • 文档编号:10066135
  • 上传时间:2023-05-23
  • 格式:DOCX
  • 页数:49
  • 大小:210.17KB

1.1.2效果图

2Accordion(可折叠标签)

2.1实例

2.1.1代码

'east',iconCls:

'icon-reload',title:

'中腾信金融服务公司员工结构图',split:

true"style="width:

250px;">

300px;height:

500px;">

auto;padding:

10px;">

#0099FF;">accordiondemo

Accordion

10px;">

Accordion

2.1.2效果图

2.2参数

2.2.1容器参数

参数名称

参数类型

描述

默认值

width

数字

可折叠标签的宽度。

auto

height

数字

可折叠标签的高度。

auto

fit

布尔

是否使可折叠标签自动缩放以适应父容器的大小,当为true时width和height参数将失效。

false

border

布尔

是否显示边界线。

true

2.2.2面板参数

可折叠标签面板继承自面板(panel),许多属性定义在

标签里,下面的属性就是如此:

参数名称

参数类型

描述

默认值

selected

布尔

设置可折叠标签中默认展开的标签页

false

2.3折叠方法collapse

$('#cc').layout('collapse','east');

3DateBox(日期框)

a)实例

i.代码

$(function(){

$('#dd').datebox({

currentText:

'今天',

closeText:

'关闭',

disabled:

false,

required:

true,

missingMessage:

'必填',

formatter:

formatDate

});

});

DateBox

10px;">

disable();

>disable

enable();

>enable

ii.效果图

b)参数

属性名

类型

描述

默认值

currentText

字符串

为当前日期按钮显示的文本

Today

closeText

字符串

关闭按钮显示的文本

Close

disabled

布尔

如果为true则禁用输入框

false

required

布尔

定义输入框是否为必添

false

missingMessage

字符串

当输入框为空时提示的文本

必填

formatter

function

格式化日期的函数,这个函数以’date’为参数,并且返回一个字符串

——

parser

function

分析字符串的函数,这个函数以’date’为参数并返回一个日期

——

c)事件

事件名

参数

描述

onSelect

date

当选择一个日期时触发

d)方法

方法名

参数

描述

destroy

none

销毁组件

disable

none

禁用输入框.

enable

none

启用输入框

4ComboBox(下拉框表框)

a)实例

i.代码

单位

150px;"

data-options="multiple:

true,valueField:

'id',textField:

'name',data:

[{'id':

1,'name':

'集团'},{'id':

2,'name':

'硬件部'},{'id':

3,'name':

'软件部'}]"/>

ii.效果图

b)参数

属性名

类型

描述

默认值

width

数字

组件的宽度

auto

listWidth

数字

下拉列表的宽度

null

listHeight

数字

下拉列表的高度

null

valueField

字符串

基础数据值名称绑定到这个组合框

value

textField

字符串

基础数据的字段的名称绑定到这个组合框

text

editable

布尔

定义是否可以直接到文本域中键入文本

true

url

字符串

加载列表数据的远程URL

null

c)事件

事件名

参数

描述

onLoadSuccess

none

当远程数据成功加载时触发

onLoadError

none

当远程数据加载失败时触发

onSelect

record

当用户选择了一个列表项时触发

onChange

newValue,oldValue

当文本域字段的值改变时触发

d)方法

方法名

参数

描述

select

value

选择下拉列表中的一项

setValue

param

设定指定值到文本域,参数可以是一个字符串,也可以是一个Javascript对象,如果是对象,必须包含两个属性各对应valueField和TextField属性。

getValue

none

获取字段值

reload

url

请求远程列表数据.

5Dialog(对话框)

a)实例

i.代码

Dialog

10px;">open1

close1

style="padding:

5px;width:

400px;height:

200px;">

dialogcontent.

dialogcontent.

dialogcontent.

dialogcontent.

dialogcontent.

dialogcontent.

dialogcontent.

dialogcontent.

ii.效果图

b)参数

属性名

类型

描述

默认值

title

字符串

对话框的标题文本

NewDialog

collapsible

布尔

定义是否显示可折叠按钮

false

minimizable

布尔

定义是否显示最小化按钮

false

maximizable

布尔

定义是否显示最大化按钮

false

resizable

布尔

定义对话框是否可编辑大小

false

toolbar

数组

对话框上的工具条,每个工具条包括:

text,

iconCls,

disabled,

handler

etc.

null

buttons

数组

对话框底部的按钮,每个按钮包括:

text,

iconCls,

handler

etc.

null

c)事件

Dialog的事件和窗口(Window)的事件相同。

d)方法

Dialog的函数方法和窗口(Window)的相同。

6Messager(提示框)

a)实例

i.代码

7

8parent.$.messager.show({

9title:

"中腾信内部员工培训",

10msg:

'Easyui培训演示demo',

11timeout:

30000

12})

 

效果图

a)方法

方法名

参数

描述

$.messager.show

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):

当用户点击按钮后触发的回调函数,如果点击OK则给回调函数传true,如果点击cancel则传false。

$.messager.prompt

title,msg,fn

显示一个确定和取消按钮的信息提示窗口,提示用户输入一些文本。

参数如下:

title:

显示在标题面板的标题文本。

msg:

提示窗口显示的消息文本。

fn(val):

用户点击按钮后的回调函,参数是用户输入的内容。

b)扩展

可以通过$.messager.defaults方法自定义alert框的ok按钮和cancel按钮上显示的文字。

名字

类型

描述

默认值

ok

字符串

Ok

按钮上的文本

Ok

cancel

字符串

Cancel

按钮上的文本

Cancel

7NumberBox(数字框)

a)实例

i.代码

NumberBox

TheBoxcanonlyinputnumber.

10px;">disable

enable

ii.效果图

b)参数

选项名

类型

描述

默认值

min

数字

文本框中可允许的最小值

null

max

数字

文本框中可允许的最大值

null

precision

数字

最高可精确到小数点后几位

0

8Pagination(分页)

a)实例

i.代码

functioninitGrid(){

//动态处理是否检索数据

varpagination=false;

varurl="";

if(isRetrieveData()==true){

pagination=true;

url="../data/users.json";

}

//创建grid

$('#grid').datagrid({

iconCls:

'icon-forward',

fit:

true,

border:

false,

rownumbers:

true,

striped:

true,

pageList:

[30,50,100],

pagination:

pagination,

//singleSelect:

true,

remoteSort:

true,

toolbar:

toolbar,

url:

url,

idField:

'code',

frozenColumns:

frozenColumns,

columns:

columns,

onClickRow:

onClickRow,

onDblClickRow:

doDblClickRow

});

}

ii.效果图

b)参数

属性名

类型

描述

默认值

total

数字

当分页建立时设置记录的总数量

1

pageSize

数字

每一页显示的数量

10

pageNumber

数字

当分页建立时,显示的页数

1

pageList

数组

用户可以修改每一页的大小,pageList属性定义了多少种大小可以改变.

[10,20,30,50]

loading

布尔

定义数据是否正在加载

false

buttons

数组

定义自定义按钮,每个按钮包含两个属性:

iconCls:

显示背景图像的CSS类

handler:

当一个按钮被点击时的处理函数

null

showPageList

布尔

定义是否显示页面列表

true

showRefresh

布尔

定义是否显示刷新按钮

true

beforePageText

字符串

在输入框组件前显示的标签

Page

afterPageText

字符串

在输入框组件后显示的标签

Of{pages}

displayMsg

字符串

显示一个页面的信息。

Displaying{from}{to}of{total}items

c)事件

事件名

参数

描述

onSelectPage

pageNumber,pageSize

当用户选择一个新页时触发,回调函数包含两个参数:

pageNumber:

新页面的页数pageSize:

新页面的大小

onBeforeRefresh

ageNumber,pageSize

刷新按钮被点击之前触发,如果返回false则取消刷新操作

onRefresh

ageNumber,pageSize

刷新以后触发

onChangePageSize

ageSize

改变页面大小时触发

9Window(窗口)

窗口的主要用法和面板(panel)用法差不多

a)实例

i.代码

100%;width:

100%;overflow:

hidden;border:

none;">

Window

void(0)"onclick="resize()">resize

href="javascript:

void(0)"onclick="open1()">open

href="javascript:

void(0)"onclick="close1()">close

style="width:

500px;h

举报
举报
版权申诉
版权申诉
word格式文档无特别注明外均可编辑修改;预览文档经过压缩,下载后原文更清晰! 立即下载
配套讲稿:

如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制:

部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词:
惠普 内部 员工 easyui 培训 文档
提示  冰点文库所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
关于本文
本文标题:惠普内部员工easyui培训文档.docx
链接地址:https://www.bingdoc.com/p-10066135.html
关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

copyright@ 2008-2023 冰点文库 网站版权所有

经营许可证编号:鄂ICP备19020893号-2


收起
展开