jquery UI layout 部分中文翻译

容器 容器 Container body layout body ui layout center layout 面板 面板 Panes 当一个边界布局被创建 它有多达 5 个区域 北 南 西 东 和 中心 north south west east and center 只有中间的是必须要有的 这些区域被称为面板 窗格 大多数选项 option 只适用于 边境窗格 意思是除了中心窗格的其他所有窗格 在这份文档中 当 pane 大写时 表示的是所有面板中的一个 ui layout PANE 意味着 ui layout north 或 ui layout center 缩放工具杆 ui layout pane west 对应的缩放杆 ui layout resizer west 面板间距 面板间距 Pane Spacing 指的是边界窗格的空间内边缘 对于北窗格 指的是底部边缘 对于西窗格指的是他的右边缘 这个间距可以是 0 这表示他与任何相邻窗格的空间是 0 如果一个窗格没有间距 就不能 有一个大小调整杆或是 taggler 按钮 窗格打开和关闭时的间距可以不同 每个窗格都有 spacing open 和 spacing closed 这两个选项 缩放杆 缩放杆 Resizer Resizer bar 拖拽 拖拽 Div 元素被创建 在窗格之间 用来填满间隙 这个 div 填满了这个间距的宽和高 面板在 关闭和打开时可以有不同的间距 面板打开和关闭时 缩放杆都会自动缩放和重新定位 滑块 滑块 Slider Slider bar 其实没有独立的滑块元素 当窗格关闭的时候 缩放杆就扮演了滑块的角色 点击或者悬 浮在这个滑块上 面板就被打开了 意味着不用拖拽就能滑动到相邻的面板旁边 当鼠标 离开面板时 它会自动滑动并关闭 这个功能可以在布局选项中自定义或禁用 变换按钮 变换按钮 Toggler Toggler button 一个 div 元素被创建在拖拽 div 里面 这个 div 扮演变换按钮用来控制面板的打开和关闭 你可以通过添加颜色边框或者是背景图片来定制他的样式 或者你可以使用 togglerContent 这个选项往里面插入文字 图片或者自定义的 html 这个变换按钮通常填满了这个滑动杆的宽度 在边框以内 Toggler length 是一个选项 它可以是个像素值也可以是个百分比 当设置成 100 时 这个滑块完全覆盖缩放杆 除 了缩放杆的边 请注意 这可以用来防止面板打开时缩放 和面板关闭时滑开 每个面板 都可以有不同的滑动长度 togglerLength open 50 togglerLength closed 100 north togglerLength open 100 south togglerLength open 100 LAYOUT PROPERTIES 如果布局实例分配给一个对象的指针 推荐 var myLayout body layout 然后属性 方法和工具就能用来控制具体的布局对象 init instance var 初始化实例 var myLayout body layout read layout options 读取布局选项 var is west resizable myLayout options west resizable var north maxHeight myLayout options north maxSize get layout state 获取布局状态 var is west open myLayout state west isOpen var north size myLayout state north size layout methods 布局方法 myLayout toggle north myLayout sizePane west 300 layout utilities 布局公用 myLayout addPinBtn myPinButton west myLayout allowOverflow north 属性 属性 panes 一组面板对象 panes north panes south 等 每个面板对象都是一个 jquery 外套 如果面 板在布局中不存在 例如没有 south pane panes south false 就不会成为一个 jquery 对象 options 包含所有用于布局的选项 包括默认的和用户指定的选项 state 包含所有元素 包括布局容器的尺寸 尺寸包括边界和填充 上下左右加上 outerWidth outerHeight innerWidth innerHeight var containerWidth myLayout state container innerWidth var isWestOpen myLayout state west isClosed Methods 大多数方法需要一个 面板 来指定 通常是一个 边界窗格 北方 南 东方 或 西方 toggle pane 切换特定面板的开或关 与当前状态相反 open pane 打开指定的窗格 如果该窗格已打开 没有任何反应 如果该窗格目前 隐藏 不只是 关闭 然后将未隐藏的窗格和打开 close pane 关闭指定的窗格 如果该窗格已关闭 没有任何反应 hide pane 隐藏指定的窗格 当一个窗格是隐藏的 它没有任何间距或缩放工具杆或 Toggler 的按钮 这是完全看不见的 就好像它不存在 show pane openPane true 取消隐藏指定的窗格 通常也打开窗格 但如果你通过 false 作为第二个参数 然后窗格将 取消隐藏 但是 关闭 状态 滑块和 Toggler 现在可见 sizePane pane size in pixels 在打开和关闭的方向上重定义他的大小 对于南北的面板 size outerHeight 设定窗口像素高度 对于西东的面板 size outerWidth 设定窗口像素宽度 面板只会在最大和最小尺寸缩放 resizeContent pane 调整指定窗格里的内容容器 当窗格缩放或打开的时候内容便会自动调整 所以这个方法 只需要人工调用 如果有什么改变了窗格的头部或底部的高度 resizeAll 调整整个布局以适应它的容器 当浏览器窗口缩放时 这个方法会为所有的布局自动运行 当一个布局在另一个元素里 它的容器 并且不用通过调整整个窗口那个容器元素就可以 被定义大小 这时当容器大小改变时应该调用 layout resizeAll 使里面的布局能够自适应 在下面的例子中 一个 调整回调 被添加到 outerLayout center pane 因为他是内布局的容 器 outerLayout body layout center onresize innerLayout resizeAll innerLayout div ui layout center layout Utility Methods 公共方法 公共方法 addToggleBtn selector pane addCloseBtn selector pane addOpenBtn selector pane addPinBtn selector pane allowOverflow elem or pane resetOverflow elem or pane OPTIONS 通过选项创建一个布局 这里有一些选项用来定制几乎所有自定义布局 但所有的选项都 是可选的 你可以用默认选项快速创建一个简单的布局或者为你的应用创建一个完全自定 义的布局 回调选项还能整合你的设计和布局 你可以通过内置的选项 body layout option1 value option2 value 或者可以通过保存在变量里 方便调用 var myOptions option1 value option2 value body layout myOptions 这里可以使用两种不同的格式来指定选项 子键形式 所有的选项都在子键里 列表形式 没有子键窗格的特定选项都是前缀 Sub Key Format for Options 这种格式形式 所有的选项必须在默认的关键字内 或特定面板的关键字内 body layout defaults fxName slide fxSpeed slow spacing closed 14 initClosed true north fxName none spacing closed 8 togglerLength closed 100 south fxName none spacing closed 8 togglerLength closed 100 List Format for Options 列表格式使用前缀确定特定面板的选项而不是分离关键字 前缀是面板的名字和两个下划 线例如 north fxName 选项如果没有前缀则被认为是默认的 你也可以用默认前缀 defaults fxName 但这个前缀是没有必要的 这里是上面相同的选项 但是是列表形式 列表形式允许以任意顺序排列 所以面板相关 的默认和特定的选项在这里进行分组合并 body layout fxName slide fxSpeed slow north fxName none south fxName none spacing closed 14 north spacing closed 8 south spacing closed 8 north togglerLength closed 100 south togglerLength closed 100 initClosed true Option Specificity 对单独的面板 特定的选项总是会覆盖默认的 如果当布局创建时南北东面板应该关闭 只有西面板打开 那么我们只需要两个选项 initClosed true west initClosed false Selector Options 名字中有 selector 的选项 像 contentSelector 要求一个完整的 jquery 选择器字符串 所以 如果选择器是类 用 开始 如果是 ID 就用 符号开始 任何有效的 jquery 选择器 都能使用 Class Options 在名字中有 class 的选项 像 togglerClass 不要以 开始 这些特定的类名应用于元素 另外是作为一个额外的类别名称根使用 例如 如果设置此选项 togglerClass myToggler 这将生成所有西面板 toggler button 的类 class myToggler myToggler west myToggler open myToggler west open 当西面板关闭的时候 最后两个类将会变成 class myToggler closed myToggler west closed 这位使用 css 的元素提供了完整的控制 你可以使用 myToggler 或 myToggler closed 应用 于全局的样式 也可以对特定的元素使用 myToggler west 或 myToggler west open 注意 如果你想使用标准的 布局主题 请使用默认的类名 如果你正在使用自定义的布 局样式 那么你能使用选项改变默认的类名 List of Options 应用于所有边界面板的选项都可以设置成默认的 或者设置成特定的面板 north 等 这 里有一些不能设置成默认的选项 包括 paneSelector resizerCursor 和面板回调选项 Basic Layout Pane Options applyDefaultStylesscrollToBookmarkOnLoadshowOverflowOnHover closableresizableslidable Element Selectors Strings paneSelectorcontentSelectorcontentIgnoreSelector Auto generated Classnames paneClassresizerClasstogglerClass buttonClass Pane Size enable for all except the west pane body layout applyDefaultStyles true west applyDefaultStyles false 如果启用这个选项 使用 important 覆盖默认选项 important required ONLY when applyDefaultStyles true ui layout pane background color EEE important ui layout resizer background color 666 important 提示 一旦你创建了自己的布局风格或指定了一个布局主题样式 禁用或删除该选项 scrollToBookmarkOnLoad true true false 此选项处理的的是通过页面地址定位书签 当使用布局的时候默认的书签功能被破坏 因 为面板元素的位置和滚动在页面加载完后弹出 启用这个选项 默认启用 导致书签在布局创建后重新应用 使包含书签或锚点的面板滚 动到可视的地方 在大多数情况下这个选项应该是启用的 但是如果布局面板的内容没有书签 那么你可以 禁用它 注意 这是个全局选项 所以将它设置在最上面的选项中 Sub Key or List style options body layout scrollToBookmarkOnLoad false showOverflowOnHover false 如果是 true 那么当鼠标悬浮在上面的时候 这个面板的 zindex 被增加 溢出被设置成 visible 这允许覆盖相邻面板的弹出窗口和下拉列表 注意 仅在面板不滚动的时候启用 closable true true false 面板可以被关闭吗 resizable true 当打开时 面板能够拖动吗 slidable true 当关闭时 面板能够划开吗 paneSelector ui layout PANE 必须为每个面板单独设置 默认值为 ui layout north ui layout west 等 任何有效的 jquery 选择器都能使用 classNames IDs etc 为了能够嵌套布局 这里有一些规则 与布局容器相关的面板元素是如何组织起来的 1 1 2 版本中添加了更多的灵活性用来处理表格或其他元素中嵌套的面板 面板与容器间关系的规则面板与容器间关系的规则 1 When an ID is specified for paneSelector the pane element only needs to be a descendant of the container it does NOT have to be a child 当 paneSelector 指定了一个 ID 面板元素只需要是个容器的后代 不必是个子节点 2 当 paneSelector 指定了类名 面板元素也必须指定 容器的子元素 或容器子元素表格的子元素 Example Panes are children of the container normal document ready function all panes are children of body normal body layout Example Panes are children of the first child form document ready function body is the container NOT form body layout Example ID selectors allow panes to be deeply nested document ready function panes only need to be descendants of container body layout using custom ID paneSelectors north paneSelector north west paneSelector w