B-jui中文手册.pdf

B-JUI 中文手册 本文是 B-JUI 中文使用手册，包括使用示例代码，感兴趣的同学参考下。 概览 B-JUI 仅有一个主页面(document)，框架内的所有子页面将通过 Ajax 获取后作为一个页面片段附 加到主页面上，外部页面则通过 iframe 嵌入主页面， 本节介绍 B-JUI 的主页面结构。 HTML5 文档类型 同 Bootstrap， B-JUI 使用 HTML5 文档类型，参照下面的格式进行设置。 !DOCTYPE html html lang=zh-CN ... /html 主页面结构(仅 body 部分) 主页面由上（页头）、中左（导航菜单）、中右（工作区）、下（页脚）四部分组成，其中左侧 导航菜单可收缩。结构如下： header class=bjui-header id=bjui-header !-- 页头 -- /header div class=bjui-leftside id=bjui-leftside !-- 导航菜单 -- /div div id=bjui-container !-- 工作区 -- /div footer class=bjui-footer id=bjui-footer !-- 页脚 -- /footer 子页面（即页面片段[后面简称：页片]）结构 页片通常由两部分组成，也可以只保留 bjuiContent 部分，其中 bjuiContent 部分可选 bjui-headBar（顶部工具条）和 bjui-footBar（底部工具条）。结构如下： div class=bjuiHeader !-- 顶部模块[如：功能按钮、有哪些信誉好的足球投注网站面板] -- /div div class=bjuiContent div class=bjui-headBar !-- 顶部工具条 -- /div div data-layout-h=0 1 !-- 内容区 -- /div div class=bjui-footBar !-- 底部工具条 -- /div /div data-layout-h 属性表示该容器为页片自适应布局，当值为 0 时，B-JUI 会为该容器的高度自动赋 值为：本页片总高度减去本页片中的固定元素(bjuiHeader\bjui-headBar\bjui-footBar)高度。 data-layout-h 属性值不等于 0 时，该容器高度为本页片总高度减去属性值。 需要自定义固定元素(块级元素有效)，请为该元素添加属性 data-layout-fixed=true 完整的页片详见 B-JUI 源代码的 table.html，仅 bjuiContent 部分的页片详见 form.html 元素 ID 命名规范 因为本框架默认所有内容都位于一个 Document 中，所以为元素命名 ID 的时候需要做到唯一性， 如果确实不可避免的会出现有重复 ID 的现象，需要操作当前页片的元素时，尽量用： $.CurrentNavtab.find(#dom-id)，在当前标签工作区中查找指定 ID 的元素。 或 $.CurrentDialog.find(#dom-id)，在当前弹窗中查找指定 ID 的元素。 标签式工作区(navtab) B-JUI 框架的整个工作区部分就是一个 navtab 组件，本组件位于主页面的#bjui-container容器内， 固定的 html 结构如下： div id=bjui-navtab class=tabsPage div class=tabsPageHeader div class=tabsPageHeaderContent ul class=navtab-tab nav nav-tabs li data-tabid=main class=main activea href=javascript:;span 我 的 主 页 /span/a/li /ul