EasyUI(一)_布局类组件(1:panel)

参考书籍：《jQuery EasyUI 网站开发实战》

      EasyUI 组件分类 属性 方法 事件

      布局类组件：panel面板 tabs选项卡 accordion分类选项卡 layout布局

      panel面板属性：

      ->面板尺寸->面板界面->面板按钮->面板扩展->面板样式

      ->面板布局->面板工具->面板动画->主体加载

      ->常规属性：

         -->面板尺寸

                 自适应父容器 fit-false-boolean

                 宽 width-auto-number（属性名-默认值-值类型） 

                 高 height-auto-number

         -->面板界面 

                 初始是否折叠面板 collapsed-false-boolean   

                 初始是否最小化面板 minimized-false-boolean

                 初始是否最大化面板 maxmized-false-boolean

                 初始是否关闭面板 closed-false-boolean

                 面板头部标题文本 title-null-string

         -->面板按钮

                 是否显示可折叠按钮 collapsible-false-boolean

                 是否显示最小化按钮 minimizable-false-boolean

                 是否显示最大化按钮 maxinizable-false-boolean

                 是否关闭最大化按钮 closable-false-boolean

         -->面板扩展

                 头标题 header-null-selector

                 头放置位置 halign-null-string(left,right)

                 --->头文本显示方向 titleDirection-down-string(down,up)

                 脚标题 footer-null-selector

      ->外观属性：

         -->面板样式

                 显示面板边框 border-true-boolean

                 面板图标 iconCls-null-string

                 整个面板CSS类名 cls-null-string

                 --->面板头部CSS类名 headerCls-null-string

                 --->面板主体CSS类名 bodyCls-null-string

         -->面板布局

                 距离左边x轴位置 left-null-number

                 距离顶部y轴位置 top-null-number

         -->面板工具

                 自定义工具菜单 tools-[]-array或selector

         -->面板动画

                 面板打开动画 openAnimation-空-string(slide,fade,show)

                 --->打开持续时间 openDuration-400-number

                 面板关闭动画 closeAnimation-空-string(slide,fade,show)

                 --->关闭持续时间 closeDuration-400-number

      ->数据属性：

         -->主体加载

                 主体内容 content-null-string

                 URL加载 herf-null-string

                 --->AJAX方式 loader-空-function

                 --->首次载入是否缓存面板内容 cache-true-boolean

                 --->加载远程数据时显示消息 loadingMessage-Loading...-string

                 --->远程加载应答数据处理操作 extractor-空-function

                --->读取内容方式 method-get-string(get,post)

                --->加载请求参数 queryParams-{}-object

      方法

      ->返回

         -->返回属性及事件对象 options-none

         -->返回整个面板对象 panel-none

              --->返回面板页首 header-none

              --->返回面板主体 body-none

              --->返回面板页脚 footer-none

      ->设置

         -->设置面板头的标题文本 setTitle-title

         -->设置事件函数

              --->跳过打开面板事件 open-forceOpen(true)

              --->跳过关闭面板事件 close-forceClose(true)     

              --->跳过销毁面板事件 destroy-forceDestroy(true)

         -->设置面板大小和布局 resize-options(width,height,left,top)

      ->操作

         -->清除面板内容 clear-none

         -->最大化面板到父容器 maximize-none

         -->最小化 minimize-none

         -->恢复最大化面板回到原来大小和位置 restore-none

         -->折叠面板主体 collapse-animate

         -->展开面板主体 expand-animate

      事件

      ->面板动作

         -->打开面板之前 onBeforeOpen-none-false(事件-参数-返回值)

         -->打开面板 onOpen-none

         -->关闭面板之前 onBeforeclose-none-false

         -->关闭面板 onClose-none

         -->面板销毁之前 onBeforeDestroy-none-false

              --->面板销毁时 onDestroy-none

              --->面板折叠之前 onBeforeCollapse-none-false

              --->面板折叠时 onCollapse-none

              --->面板展开之前 onBeforeExpand-none-false

              --->面板展开时 onExpand-none

      ->面板属性

         -->改变面板大小时 onResize-width,height

         -->面板移动时 onMove-left,top

         -->面板最大化时 onMaximize-none

         -->面板最小化时 onMinimize-none

         -->面吧恢复到原始大小是 onRestore-none

      ->数据加载

         -->加载数据之前 onBeforeLoad-param-false

         -->加载数据内容时 onLoad-none

         -->加载数据内容发生错误时触发 onLoadError-none