作为后台系统常用的jquery超强插件
设置属性方式:
(1)在html控件属性中设置
(2)在js调用控件方法时以JSON格式传入
设置事件
在属性或调用控件方法时传入的JSON对象中添加“事件名:回调函数”
设置方法
$("[使用选择器选中控件]").控件名("控件方法名",[参数列表]);
resizable
可以调整大小的控件
data-options:提供JSON参数数据
属性的格式要求:
属性名值对内部用冒号分隔 属性名值对之间用逗号分隔而不是分号
boolean类型不能加引号 string类型必须加引号
像素数如果是数值类型不能加px这样的单位
linkbutton 具有很多样式的按钮控件
iconCls:'icon-add'
iconCls:'icon-edit'
iconCls:'icon-ok'
iconCls:'icon-cancel'
iconCls:'icon-save'
iconCls:'icon-search'
iconCls:'icon-remove'
iconCls:'icon-reload'
iconAlign:'right'
options方法
enable方法
disable方法
panel
是一个面板控件
如果想要指定panel的位置除了使用top、left属性外还要需要通过panel方法获取panel对象设置绝对定位属性才能生效$("#id").panel("panel").css("position","absolute");
panel的主要常规属性
宽度:width
高度:height
图标:iconCls
是否可折叠:collapsible
是否可最小化:minimizable
是否可最大化:maximizable
是否可关闭:closable
是否初始折叠:collapsed
是否初始最小化:minimized
是否初始最大化:maximized
是否初始关闭:closed
是否有边框:border
面板内容:content
是否自适应宽度:fit 如果是false代表不自动充满父容器 true代表自动充满父容器
自定义工具栏:使用tools属性
加载远程数据
href属性设置远程数据来源地址
refresh重新加载远程内容
loadingMessage属性设置等待期间显示的文本
事件
加载远程数据时触发:onLoad
打开面板时触发:onOpen
常用方法
返回面板属性对象:options
移动面板:move
为面板设置标题:setTitle
下面介绍三种弹窗组件:
(1)messager
alert框 confirm框 prompt框 右下角弹框
(2)window
窗口标题 窗口是否显示 窗口是否显示四个按钮 窗口是否可以关闭 窗口是否可以拖动 窗口是否可以改变大小 窗口是否模态化
窗口方法 Window继承自Panel 和Panel的区别
(1)Panel初始状态没有4个按钮,而Window支持
(2)Panel不支持模态窗口,Window支持
(3)Panel不支持拖动,而Window支持
(3)dialog
(1)在顶部添加按钮:toolbar属性
(2)在底部添加按钮:buttons属性
progressbar
(1)获取进度条当前值:getValue方法
(2)设置进度条当前值:setValue方法
(3)重设进度条长度:resize方法
※每隔一秒执行一次指定函数
window.setInterval(指定函数,1000);
tabs
(1)属性
fit:设置为true时,选项卡的大小将铺满它所在的容器。
tabPosition:选项卡位置。可用值:'top','bottom','left','right'。
tools:工具栏添加在选项卡面板头的左侧或右侧。
toolPosition:工具栏位置。可用值:'left','right'。
tabWidth:标签条的宽度。
tabHeight:标签条的高度。
(2)事件
onSelect:选中时触发
onLoad:在ajax选项卡面板加载完远程数据的时候触发。
(3)方法
getTab:获取指定选项卡面板,'which'参数可以是选项卡面板的标题或者索引。
exists:表明指定的面板是否存在,'which'参数可以是选项卡面板的标题或索引。
select:选择一个选项卡面板,'which'参数可以是选项卡面板的标题或者索引。
add:添加一个新选项卡面板,选项参数是一个配置对象,查看选项卡面板属性的更多细节。
getSelected获取选择的选项卡面板 此时获取到的是panel控件
form
(1)表单验证
浏览器端验证 validateType
必填项
Email格式
字符串长度
远程验证
(2)表单提交 是ajax方法 不会同步跳转页面 需要自己写页面跳转
(3)表单回显 load
datagrid
(1)静态表格 <table>标签 用datagrid方法加载这个表格
列宽自适应
是否单选
分页支持
(2)动态获取数据表格
(3)增删改查操作