第二单元 B-jui中文手册.pdfVIP

B-JUI中文手册 本文是B-JUI 中文使用手册，包括使用示例代码，感兴趣的同学参考下。 概览 B-JUI仅有一个主页 (document)，框架内的所有子页面将通过Ajax获取后作为一个页面片段附 加到主页面上，外部页面则通过iframe嵌入主页面， 本节介绍 B-JUI 的主页面结构。 HTML5 文档类型 同Bootstrap， B-JUI使用 HTML5 文档类型，参照下面的格式进行设置。 !DOCTYPEhtml htmllang=zh-CN ... /html ( body ) 主页面结构仅 部分 主页面由上 （页头）、中左 （导航菜单）、中右 （工作区）、下 （页脚）四部分组成，其中左侧 导航菜单可收缩。结构如下： headerclass=bjui-headerid=bjui-header !-- 页头 -- /header divclass=bjui-leftsideid=bjui-leftside !-- 导航菜单 -- /div divid=bjui-container !-- 工作区 -- /div footerclass=bjui-footerid=bjui-footer !-- 页脚 -- /footer 子页面（即页面片段 后面简称：页片 ）结构[ ] 页片通常由两部分组成，也可以只保留bjuiContent 部分，其中bjuiContent 部分可选 bjui-headBar （顶部工具条）和bjui-footBar （底部工具条）。结构如下： divclass=bjuiHeader !-- 顶部模块[如：功能按钮、搜索面板]-- /div divclass=bjuiContent divclass=bjui-headBar !-- 顶部工具条 -- /div divdata-layout-h=0 1 !-- 内容区 -- /div divclass=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结构如下： divid=bjui-navtabclass=tabsPage divclass=tabsPageHeader divclass=tabsPageHeaderContent ulclass=navtab-tabnavnav-tabs li data-tabid=main class=main activea href=javascript:;span我的主页 /span/a/li /ul /div divclass=tabsLefticlass=fafa-angle-double-left/i/div divclass=tabsRighticlass=fafa-angle-double-right/i/div divclass=tabsMoreiclass=fafa-angle-dou