总体的一些了解与规则
框架的文件夹以及文件说明：
BJUI/ ├── js/ [-- 内置组件 JS --] │ ├── bjui-core.js [ 核心文件，包含框架的一些参数配置和初始化入口 ] │ ├── bjui-regional.zh-CN.js [ 国际化文件 ] │ ├── bjui-frag.js [ 一些组件的DOM碎片 ] │ ├── bjui-extends.js [ 包含部分jQuery方法及String方法 ] │ ├── bjui-basedrag.js [ 基础拖动 ] │ ├── bjui-slidebar.js [ 左侧导航菜单 ] │ ├── bjui-contextmenu.js [ 右键弹出菜单(主要应用在navtab 及 taskbar) ] │ ├── bjui-navtab.js [ 标签工作区 ] │ ├── bjui-dialog.js [ 弹窗 ] │ ├── bjui-taskbar.js [ 普通弹窗任务栏 ] │ ├── bjui-ajax.js [ 一些ajax方法 ] │ ├── bjui-alertmsg.js [ 提示框 ] │ ├── bjui-pagination.js [ 分页组件 ] │ ├── bjui-util.date.js [ 日期工具类 ] │ ├── bjui-datepicker.js [ 日期选择器 ] │ ├── bjui-ajaxtab.js [ 为bootstrap的tab增加ajax载入方式 ] │ ├── bjui-datagrid.js [ datagrid ] │ ├── bjui-tablefixed.js [ 固定表头表格 ] │ ├── bjui-tabledit.js [ 可编辑表格 ] │ ├── bjui-spinner.js [ 微调器 ] │ ├── bjui-lookup.js [ 查找带回 ] │ ├── bjui-tags.js [ 自动完成标签 ] │ ├── bjui-upload.js [ 上传组件 ] │ ├── bjui-theme.js [ 皮肤处理 ] │ ├── bjui-initui.js [ 框架初始化接口等 ] │ ├── bjui-plugins.js [ 监听bjui.initUI事件，使框架组件及部分插件初始化 ] │ ├── jquery-1.7.2.min.js │ └── jquery.cookie.js ├── themes/ [-- CSS 样式 --] │ ├── default/ [ 皮肤 - 灰 ] │ ├── blue/ [ 皮肤 - 蓝 ] │ ├── green/ [ 皮肤 - 绿 ] │ ├── orange/ [ 皮肤 - 橙 ] │ ├── purple/ [ 皮肤 - 紫 ] │ ├── css/ [ 核心css目录 ] │ │ ├── FA/ [ FontAwesome 图标字体 ] │ │ ├── img/ [ zTree插件用图片 ] │ │ ├── style.css [ 核心css ] │ │ ├── bootstrap.min.css [ bootstrap css ] │ │ └── ie7.css [ 低版本IE警告提示css ] │ └── fonts/ [ bootstrap 图标字体 ] ├── plugins/ [ -- 插件目录 -- ] │ ├── bootstrapSelect/ [ select美化 ] │ ├── colorpicker/ [ 颜色选择器 ] │ ├── dragsort/ [ 拖动排序 ] │ ├── icheck/ [ 单、复选框美化 ] │ ├── kindeditor_4.1.10/ [ 编辑器 ] │ ├── niceValidator/ [ 表单验证 ] │ ├── uploadify/ [ 上传组件-用于IE8-9 ] │ ├── swfupload/ [ kindeditor和uploadify共用的swf上传插件 ] │ ├── ztree/ [ zTree插件 ] │ ├── other/ [ 其他插件 ] │ │ └── jquery.autosize.js [ textarea高度自适应 ] │ └── bootstrap.min.js └── other/ [-- 其他 --] ├── jquery.iframe-transport.js [ 为iframe方式提交表单提供支持（方便通过ajax方式提交file框） ] ├── html5shiv.min.js [ for IE8-9 ] └── respond.min.js
页面结构：
B-JUI仅有一个主页面(document)，框架内的所有子页面将通过Ajax获取后作为一个页面片段附加到主页面上，外部页面则通过iframe嵌入主页面， 本节介绍 B-JUI的主页面结构。
HTML5 文档类型
同Bootstrap， B-JUI使用 HTML5 文档类型，参照下面的格式进行设置。
<!DOCTYPE html> <html lang="zh-CN"> ... </html>
主页面结构(仅body部分)
主页面由上（页头）、中左（导航菜单）、中右（工作区）、下（页脚）四部分组成，其中左侧导航菜单可收缩。结构如下：
<header id="bjui-header"> <!-- logo --><!-- 快捷菜单(消息、用户信息、切换皮肤) --> <div id="bjui-hnav"> <!-- 横向菜单 --> </div> </header> <div id="bjui-container" class="clearfix"> <div id="bjui-leftside"> <!-- 导航栏 --> </div> <div id="bjui-navtab" class="tabsPage"> <!-- 工作区(navtab) --> </div> </div> <footer id="bjui-footer"> <!-- 页脚 --> </footer>
子页面（即页面片段[后面简称：页片]）标准结构
页片通常由三部分组成，也可以只保留bjui-pageContent部分，或者自定义内容。一个标准的页片结构如下：
<div class="bjui-pageHeader"> <!-- 顶部模块[如：功能按钮、搜索面板] --> </div> <div class="bjui-pageContent"> <!-- 内容区 --> </div> <div class="bjui-pageFooter"> <!-- 底部模块[如：工具条、分页组件] --> </div>
注意1：在标准结构中，bjui-pageHeader 和 bjui-pageFooter 部分是固定在页片中的，bjui-pageContent中的内容溢出会出现滚动条。
注意2：bjui-pageContent默认padding 10px，像表格之类的布局不需要padding的，需要再添加个Class: tableContent。
框架初始化：
bjui是一个别人写的js框架，需要在dom完后加载初始化方法：
示例代码：
$(function() { BJUI.init({ JSPATH : 'BJUI/', //[可选]框架路径 PLUGINPATH : 'BJUI/plugins/', //[可选]插件路径 loginInfo : {url:'login_timeout.html', title:'登录', width:400, height:200}, // 会话超时后弹出登录对话框 statusCode : {ok:200, error:300, timeout:301}, //[可选] ajax回调函数的状态码 ajaxTimeout : 5000, //[可选]全局Ajax请求超时时间(毫秒) pageInfo : {total:'total', pageCurrent:'pageCurrent', pageSize:'pageSize', orderField:'orderField', orderDirection:'orderDirection'}, //[可选]分页参数key alertMsg : {displayPosition:'topcenter', displayMode:'slide', alertTimeout:3000}, //[可选]信息提示的显示位置，显隐方式，及[info/correct]方式时自动关闭延时(毫秒) keys : {statusCode:'statusCode', message:'message'}, //[可选] ajax回调函数的key ui : { windowWidth : 1200, //框架显示宽度，0=100%宽，> 600为则居中显示 showSlidebar : true, //[可选]左侧导航栏锁定/隐藏 clientPaging : true, //[可选]是否在客户端响应分页及排序参数 overwriteHomeTab : false //[可选]当打开一个未定义id的navtab时，是否可以覆盖主navtab(我的主页) }, debug : true, // [可选]调试模式 [true|false，默认false] theme : 'purple' // 若有Cookie['bjui_theme'],优先选择Cookie['bjui_theme']。皮肤[六种皮肤:default, orange, purple, blue, red, green] }) })
使用这个框架好多地方都必须按照模板设计。这个框架感觉页面设计就是一个模板。
什么样子的呢？
就是主结构部分的那个样子。
一个图：
这个是标准的使用该框架开发的，主页面分为：
头（logo、横向菜单等）
中间（左导航栏，工作区等）
尾（页脚等）
必须注意：你的各个主要部分的class或者id属性都必须按照模板的来。感觉就是一个后台框架开发的模板
bjui框架的显示数据的地方就是一个标签工作区navtab组件：
<div id="bjui-navtab" class="tabsPage"> <!-- 工作区(navtab) --> </div>
该框架就是主页面，然后其他页面通过navtab标签的方式或者dialog的方式加载或者弹出来显示的。当然加载或者弹出的方式可能是iframe，也可能是封装的ajax数据显示。就是你的显示数据的地方必须符合bjui navtab组件规范。
我想，自己看理解到这里应该就会有一定的感觉了，虽然是懵懂的。
