jQuery LigerUI API预览版发布

插件方法列表

ligerAccordion () 应用面板

ligerCheckBox (p) 可以将一个复选框的表单对象转换成自定义复选框。

ligerComboBox (p) 1,可以将一个type=Select的表单对象转换成自定义下拉框。 2,可以将一个type=text的表单对象转换成自定义下拉框(需要配置数据源)。 3,可以将一个Dom容器(如div)对象转换成自定义下拉框(需要配置数据源)。

ligerDateEditor (p) 可以将一个'文本框'的表单对象转换成可日期选择。

ligerDrag (p) 使目标对象可以拖动。

ligerForm () 应用自定义表单

ligerFrom () 可以将一个表单转换成自定义表单。

ligerGrid (p) 1,支持本地数据和服务器数据(配置data或者url) 2,支持排序和分页(包括Javascript排序和分页) 3,支持列的“显示/隐藏” 4,支持明细行(表格内嵌) 5,支持汇总行 6,支持单元格模板 7,支持编辑表格(ligerGrid的一个特色,需要其他表单插件的支持) 8,支持树表格(待加入) 8,支持分组(待加入)

ligerLayout (p) 应用Layout

ligerMessageBoxAlert (title, content, onBtnClick) 显示提示弹出框

ligerMessageBoxconfirm (title, content, callback) 确定框

ligerMessageBoxError (title, content, onBtnClick) 显示失败弹出框

ligerMessageBoxQuestion (title, content, onBtnClick) 显示问题弹出框

ligerMessageBoxShow (p) 显示弹出框

ligerMessageBoxSuccess (title, content, onBtnClick) 显示成功弹出框

ligerMessageBoxWarn (title, content, onBtnClick) 显示警告弹出框

ligerRadio () 可以将一个单选框的表单对象转换成自定义单选框。

ligerResizable (p) 使目标对象可以调整大小。

ligerSpinner (p) 可以将一个'文本框'的表单对象转换成可调整

ligerTab () 应用Tab

ligerWindowShow (p) 弹出窗口。

插件方法详细

{jQuery} ligerAccordion()

描述:

• 应用面板

返回值:

{jQuery} jQuery对象

---

{jQuery} ligerCheckBox(p)

描述:

• 可以将一个复选框的表单对象转换成自定义复选框。

参数列表:

参数名	类型	描述	默认值
p	{Object}	主要参数
p.onBeforeClick	{Function}	点击前事件 参数1：复选框Dom对象

返回值:

{jQuery} jQuery对象

---

{jQuery} ligerComboBox(p)

描述:

• 1,可以将一个type=Select的表单对象转换成自定义下拉框。
• 2,可以将一个type=text的表单对象转换成自定义下拉框(需要配置数据源)。
• 3,可以将一个Dom容器(如div)对象转换成自定义下拉框(需要配置数据源)。

参数列表:

参数名	类型	描述	默认值
p	{Object}	主要参数
p.data	{Array}	数据源.支持二维数组和JSON对象两种
p.width	{Int}	宽度
p.height	{Int}	高度
p.resize	{Bool}	是否调整大小	true
p.isMultiSelect	{Bool}	是否多选	false
p.isShowCheckBox	{Bool}	是否选择复选框	false
p.selectBoxWitch	{Bool}	下拉框的宽度	false
p.selectBoxHeight	{Bool}	下拉框的高度	false
p.textFieldID	{String}	text对应的字段名(需要数据源为JSON对象)
p.valueFieldID	{String}	value对应的字段名(需要数据源为JSON对象)
p.initValue	{String}	初始化Value
p.initText	{String}	初始化Text
p.split	{String}	分割符号,多选时有效	";"
p.columns	{Array}	将下拉框转换为表格的模式	null
p.columns[i].name	{String}	表格列名
p.columns[i].header	{String}	表格列标题
p.columns[i].width	{String}	表格列宽度
p.onBeforeSelect	{Function}	选择前事件 参数1：value 参数2：text	false
p.onSelected	{Function}	选择后事件 参数1：value 参数2：text	false

返回值:

{jQuery} jQuery对象

---

{jQuery} ligerDateEditor(p)

描述:

• 可以将一个'文本框'的表单对象转换成可日期选择。

参数列表:

参数名	类型	描述	默认值
p	{Object}	主要参数
p.width	{Int}	宽度
p.format	{String}	Date格式化	"yyyy-MM-dd hh:mm"
p.showTime	{Bool}	是否显示时间	false
p.onChangeDate	{Function}	改变Date事件 参数1：Date Value	null

返回值:

{jQuery} jQuery对象

---

{jQuery} ligerDrag(p)

描述:

• 使目标对象可以拖动。

参数列表:

参数名	类型	描述	默认值
p	{Object}	主要参数
p.handler	{String|jQuery}	拖动的作用区域，在这个区域才可以触发拖动。可以是字符串(jQuery selector)，也可以是一个Dom jQuery对象	null
p.onStartDrag	{Function}	开始拖动事件 参数1：current(Object 包括 target,left,top,startX,startY) 参数2：e	null
p.onDragg	{Function}	拖动事件(返回值为false时阻止继续拖动) 参数1：current(Object 包括 target,left,top,startX,startY,diffX,diffY) 参数2：e	null
p.onStopDragg	{Function}	结束拖动事件 参数1：current(Object 包括 target,left,top,startX,startY,diffX,diffY) 参数2：e	null

返回值:

{jQuery} jQuery对象

---

{jQuery} ligerForm()

描述:

• 应用自定义表单

例子:

    $("form").ligerForm();

返回值:

{jQuery} jQuery对象

---

{jQuery} ligerFrom()

描述:

• 可以将一个表单转换成自定义表单。

返回值:

{jQuery} jQuery对象

---

{jQuery} ligerGrid(p)

描述:

• 1,支持本地数据和服务器数据(配置data或者url)
• 2,支持排序和分页(包括Javascript排序和分页)
• 3,支持列的“显示/隐藏”
• 4,支持明细行(表格内嵌)
• 5,支持汇总行
• 6,支持单元格模板
• 7,支持编辑表格(ligerGrid的一个特色,需要其他表单插件的支持)
• 8,支持树表格(待加入)
• 8,支持分组(待加入)

参数列表:

参数名	类型	描述	默认值
p	{Object}	主要参数
p.width	{String|Int}	宽度值	'auto'
p.columnWidth	{Int}	默认列宽度	120
p.resizable	{String}	table是否可伸缩	true
p.url	{String}	ajax url	false
p.usePager	{String}	是否分页	true
p.page	{Int}	默认当前页	1
p.total	{Int}	总页面数	1
p.pageSize	{Int}	每页默认的结果数	10
p.pageSizeOptions	{Array}	可选择设定的每页结果数	[10, 20, 30, 40, 50]
p.columns	{Array}	数据源	[]
p.columns[i].name	{String}	表格列名
p.columns[i].totalSummary	{Object}	汇总
p.columns[i].totalSummary.type	{String}	汇总类型sum,max,min,avg
p.columns[i].display	{String}	表格列标题
p.columns[i].headerRender	{Function}	头部单元格渲染器 参数1：column
p.columns[i].isAllowHide	{Bool}	是否允许隐藏	false
p.columns[i].isSort	{Bool}	是否允许排序	false
p.columns[i].type	{String}	排序类型,包括string、int、float、date	"string"
p.columns[i].width	{Int}	表格列宽度
p.columns[i].minWidth	{Int}	表格列最小允许宽度(调整大小时将不允许小于这个值)
p.columns[i].format	{String}	格式化
p.columns[i].align	{String}	左右对齐,left、right、center
p.columns[i].render	{Function}	单元格渲染器 参数1：记录项(对应数据源的某一条记录) 参数2：当前行的索引
p.detail	{Object}	明细
p.detail.onShowDetail	{Function}	明细函数 参数1：row 参数2：detailPanel
p.minColToggle	{Int}	最小显示的列数目	1
p.dataAction	{String}	提交数据的方式：本地(local)或(server),选择本地方式时将在客服端分页、排序	'server'
p.showTitle	{Bool}	是否包含标题	false
p.showTableToggleBtn	{Bool}	是否显示'显示隐藏Grid'按钮	false
p.allowAdjustColWidth	{Bool}	是否允许调整列宽	true
p.showCheckbox	{Bool}	是否显示复选框	true
p.showToggleColBtn	{Bool}	是否显示'切换列层'按钮	true
p.enabledEdit	{Bool}	是否允许编辑	false
p.isScroll	{Bool}	是否滚动	true
p.dateFormat	{String}	默认时间显示格式	'yyyy-MM-dd'
p.renderDate	{Function}	获取时间默认函数,可重载	function (value) { var da; if (!value) return null; if (typeof value == 'object') { return value; } if (value.indexOf('Date') > -1) { da = eval('new ' + value.replace('/', '', 'g').replace('/', '', 'g')); } else { da = eval('new Date("' + value + '");'); } return da; }
p.onDragCol	{Function}	拖动列事件	false
p.onToggleCol	{Function}	切换列事件	false
p.onChangeSort	{Function}	改变排序事件	false
p.onSuccess	{Function}	成功事件	false
p.onSelectedRow	{Function}	选择行事件	false
p.onAfterShowData	{Function}	显示完数据事件 参数1：Grid的Dom对象	false
p.onError	{Function}	错误事件	false
p.onSubmit	{Function}	提交前事件	false

返回值:

{jQuery} jQuery对象

---

{jQuery} ligerLayout(p)

描述:

• 应用Layout

参数列表:

参数名	类型	描述	默认值
p	{Object}	主要参数
p.leftWidth	{Int}	左侧宽度

返回值:

{jQuery} jQuery对象

---

{jQuery} ligerMessageBoxAlert(title, content, onBtnClick)

描述:

• 显示提示弹出框

例子:

$.ligerMessageBox.alert({title:'标题',content:'内容']);

参数列表:

参数名	类型	描述	默认值
title	{String}	标题
content	{String}	内容
onBtnClick	{Function}	点击确定事件 参数1：button 参数2：button index 参数3：messageBox Dom object

返回值:

{jQuery} jQuery对象

---

{jQuery} ligerMessageBoxconfirm(title, content, callback)

描述:

• 确定框

例子:

$.ligerMessageBox.confirm(title, content, function (r)
             {
                 alert(r ? '您点击了Y' : '您点击了N');
             });

参数列表:

参数名	类型	描述	默认值
title	{String}	标题
content	{String}	内容
callback	{Function}	点击确定事件 参数1：是否点击了确定

返回值:

{jQuery} jQuery对象

---

{jQuery} ligerMessageBoxError(title, content, onBtnClick)

描述:

• 显示失败弹出框

例子:

$.ligerMessageBox.error({title:'标题',content:'内容']);

参数列表:

参数名	类型	描述	默认值
title	{String}	标题
content	{String}	内容
onBtnClick	{Function}	点击确定事件 参数1：button 参数2：button index 参数3：messageBox Dom object

返回值:

{jQuery} jQuery对象

---

{jQuery} ligerMessageBoxQuestion(title, content, onBtnClick)

描述:

• 显示问题弹出框

例子:

$.ligerMessageBox.question({title:'标题',content:'内容']);

参数列表:

参数名	类型	描述	默认值
title	{String}	标题
content	{String}	内容
onBtnClick	{Function}	点击确定事件 参数1：button 参数2：button index 参数3：messageBox Dom object

返回值:

{jQuery} jQuery对象

---

{jQuery} ligerMessageBoxShow(p)

描述:

• 显示弹出框

例子:

             $.ligerMessageBox.show(
             {
                 width: 270,
                 type: type,
                 title:title,
                 content: '窗口改变大小事件',
                 buttons: [{ text: '确定', onclick: btnClick }, { text: '取消', onclick: btnClick}]
             });

参数列表:

参数名	类型	描述	默认值
p	{Object}	主要参数
p.type	{String}	类型，包括success、donne、error、warn、question	""
p.width	{Int}	宽度
p.title	{String}	标题
p.content	{String}	内容
p.buttons	{Array}	按钮
p.buttons[i].width	{Int}	宽度
p.buttons[i].text	{String}	文本
p.buttons[i].onclick	{Function}	显示完数据事件 参数1：button 参数2：button index 参数2：messageBox Dom object

返回值:

{jQuery} jQuery对象

---

{jQuery} ligerMessageBoxSuccess(title, content, onBtnClick)

描述:

• 显示成功弹出框

例子:

$.ligerMessageBox.success({title:'标题',content:'内容']);

参数列表:

参数名	类型	描述	默认值
title	{String}	标题
content	{String}	内容
onBtnClick	{Function}	点击确定事件 参数1：button 参数2：button index 参数3：messageBox Dom object

返回值:

{jQuery} jQuery对象

---

{jQuery} ligerMessageBoxWarn(title, content, onBtnClick)

描述:

• 显示警告弹出框

例子:

$.ligerMessageBox.warn({title:'标题',content:'内容']);

参数列表:

参数名	类型	描述	默认值
title	{String}	标题
content	{String}	内容
onBtnClick	{Function}	点击确定事件 参数1：button 参数2：button index 参数3：messageBox Dom object

返回值:

{jQuery} jQuery对象

---

{jQuery} ligerRadio()

描述:

• 可以将一个单选框的表单对象转换成自定义单选框。

返回值:

{jQuery} jQuery对象

---

{jQuery} ligerResizable(p)

描述:

• 使目标对象可以调整大小。

例子:

$("#exam1").ligerResizable();

参数列表:

参数名	类型	描述	默认值
p	{Object}	主要参数
p.handles	{String}	调整大小的作用区域，在这个区域才可以触发调整大小。字符串。包括n , e, s, w, ne, se, sw, nw这八个方向，可自由选择一个或多个，多个时用逗号隔开(jQuery selector)，也可以是一个Dom jQuery对象	"n, e, s, w, ne, se, sw, nw"
p.maxWidth	{Int}	最大宽度	2000
p.maxHeight	{Int}	最大高度	2000
p.minWidth	{Int}	最小宽度	20
p.minHeight	{Int}	最小高度	20
p.onStartResize	{Function}	开始调整大小事件 参数1：current(Object 包括 dir,left,top,width,height) 参数2：e	null
p.onResize	{Function}	调整大小事件 参数1：current(Object 包括 dir,left,top,width,height,newWidth,newHeight,diffTop,diffLeft) 参数2：e	null
p.onStopResize	{Function}	结束调整大小事件 参数1：current(Object 包括 dir,left,top,width,height,newWidth,newHeight,diffTop,diffLeft) 参数2：e	null

返回值:

{jQuery} jQuery对象

---

{jQuery} ligerSpinner(p)

描述:

• 可以将一个'文本框'的表单对象转换成可调整

参数列表:

参数名	类型	描述	默认值
p	{Object}	主要参数
p.type	{Int}	类型 float:浮点数 int:整数 time:时间
p.decimalplace	{Int}	小数位 type=float时起作用	2
p.isNegative	{Bool}	是否是否负数	false
p.onChangeValue	{Function}	改变值事件 参数1：value	null

返回值:

{jQuery} jQuery对象

---

{jQuery} ligerTab()

描述:

• 应用Tab

返回值:

{jQuery} jQuery对象

---

{jQuery} ligerWindowShow(p)

描述:

• 弹出窗口。

例子:

$.ligerWindow.show(
             {
                 url:'welcome.html'
             });

参数列表:

参数名	类型	描述	默认值
p	{Object}	主要参数
p.url	{String}	url
p.name	{String}	frame name
p.left	{String}	left
p.right	{String}	right
p.top	{String}	top
p.bottom	{String}	bottom
p.width	{Int}	宽度
p.height	{Int}	高度
p.title	{String}	标题

返回值:

{jQuery} jQuery对象

---