B-JUI文档、下载

概述

特别说明

本文档仅适用于最新版的B-JUI，网站首页或下载页可以查看B-JUI的最后更新时间。

B-JUI前端管理框架适用于快速开发各类WEB管理系统，可与任意后端程序（java、php、.net...）配合使用。

B-JUI基于Bootstrap样式及jQuery库开发，目前有各类常用组件，已集成部分常用插件，可以很的方便引入第三方jQuery插件。

B-JUI目录结构

B-JUI/
├── js/
│   ├── bjui-all.js
│   ├── bjui-all.min.js
│   ├── bjui-all.min.js.map
│   ├── jquery-1.11.3.min.js
│   ├── jquery.cookie.js       
├── themes/
│   ├── blue/
│   ├── green/
│   ├── purple/
│   ├── css/
│   │   ├── FA/
│   │   ├── img/
│   │   ├── style.css
│   │   ├── bootstrap.min.css
│   │   └── ie7.css
│   └── fonts/
├── plugins/
│   ├── bootstrap.min.js
│   └── 其他插件...         
└── other/  

　　

js 目录是B-JUI的js及jQuery jquery-1.11.3.min.js 。 themes 目录是样式文件，包含B-JUI样式文件style.css 和 bootstrap.css 及 蓝、绿、紫 三套皮肤，以及 Font Awesome 字体。 plugins 目录包含 bootstrap.min.js 及其他用到的插件。

页面结构

框架主页面结构：

主页面结构的html代码请参考下载压缩包中的 index.html 。

子页面结构如下：

<div class="bjui-pageHeader">
	<!-- 顶部模块[如：功能按钮、搜索面板] -->
</div>
 
<div class="bjui-pageContent">
	<!-- 内容区 -->
</div>
 
<div class="bjui-pageFooter">
	<!-- 底部模块[如：操作按钮] -->
</div>

子页面主要用于创建 navtab 、 dialog 页面。

初始化框架

BJUI.init(options)

options参数请参考下载目录中的 index.html 文件。

DOM元素ID命名规范

因为本框架默认所有内容都位于一个Document中，所以为元素命名ID的时候需要做到唯一性，如果确实不可避免的会出现有重复ID的现象，需要操作当前子页面的元素时，尽量用：
$.CurrentNavtab.find('#dom-id') ，在当前标签工作区中查找指定ID的元素。
或 $.CurrentDialog.find('#dom-id') ，在当前弹窗中查找指定ID的元素。

全局事件

B-JUI的全局事件如下：

事件名称	中文说明	描述
bjui.initUI	框架初始化事件	监听该事件，可以为指定的DOM初始化框架组件及插件，例如：本框架监听该事件用于在文档加载完成或ajax加载完成时，初始化框架及插件
bjui.beforeInitUI	框架初始化前事件	监听该事件，可以在框架初始化前进行相关操作。例如：本框架的任一容器DOM如果添加了属性['data-noinit="true"]，该容器内的元素都不会被初始化，处理这个流程就监听了本件事。
bjui.afterInitUI	框架初始化后事件	监听该事件，可以在框架初始化后进行相关操作，示例同上。
bjui.ajaxStatus	ajax请求状态事件	框架内部事件。本事件用于在ajax请求过程中（ajaxStart - > ajaxStop），显示/隐藏 框架的Mask loading效果。
bjui.resizeGrid	窗口缩放事件	监听该事件，可在浏览器窗口或dialog窗口缩放时进行相关操作。
bjui.beforeAjaxLoad	ajax载入前事件	监听该事件，可在使用ajaxUrl方法 (navtab/dialog均用此方法加载子页片内容) 前进行相关操作，例如：本框架监听该事件用于在重载入子页片前释放在body中生成的selectpicker插件资源。

下面是一个事件示例，来自DEMO中，作用是代码片断着色及添加COPY按钮：

$(document).on(BJUI.eventType.afterInitUI, function(event) {
    $(event.target).find('.highlight').each(function(){
        var b='<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>';
        var p=$(this).find('> pre.prettyprint');
        p.addClass('linenums').html($.trim(p.html()));
        prettyPrint();
        $(this).before(b);
    })
})

data属性

同 Bootstrap 一样，你可以仅仅通过 data 属性 API 就能使用 B-JUI提供的插件，而无需写 JavaScript 代码，如下面的代码就是调用信息提示框 alertmsg 的用法。

<button type="button" class="btn-default" data-toggle="alertmsg" data-options="{type:'info', msg:'我是一个普通的信息提示！'}">信息提示</button>

javascript API

除了data属性之外，也提供 javascript 的 API，如下面的代码将实现同上面data属性一致的效果。

<button type="button" class="btn-default" οnclick="alertmsg_onclick();">信息提示</button>
<script type="text/javascript">
function alertmsg_onclick() {
    BJUI.alertmsg('info', '我是一个普通的信息提示！')
}
</script>

 

url动态赋值

URL动态赋值：指的是url中包含{ selector }，即大括号括起来的jQuery选择器，当提交该url时，框架会自动将selector对应元素的值替换到大括号所占区域。

后面的文档中，凡是标记有 D-Url 字样的URL参数，均支持动态赋值，通常支持动态赋值的url，同时支持warn参数，warn参数携带动态赋值不成功时的提示信息。

字符串函数等

方法	参数说明	返回	描述及示例
$(form).serializeJson()	--	json	将表单域内容转换为json格式。
$(selector).isTag(tagName)	html元素名称	boolean	判断当前jQuery对象的标签名是否为tagName。示例：if ($('#test-aa').isTag('a')) {alert('我是一个a链接！')}
string.isPositiveInteger()	--	boolean	判断字符串是否是正整数。示例：var aa = '112233'; alert(aa.isPositiveInteger())
string.isInteger()	--	boolean	判断字符串是否是整数。示例：var aa = '-112233'; alert(aa.isInteger())
string.isNumber()	--	boolean	判断字符串是否是数字。示例：var aa = '112.233'; alert(aa.isNumber())
string.isNormalID()	--	boolean	判断字符串是以字母开头，并由数字、字母、中横线、下划线组成。示例：var aa = 'navtab-test_1'; alert(aa.isNormalID())
string.includeChinese()	--	boolean	判断字符串是否包含汉字。示例：var aa = '中国520'; alert(aa.includeChinese())
string.trim()	--	string	去除字符串两端空格，同jQuery的$.trim(string)。示例：var aa = ' 11哈11 '; alert(aa.trim())
string.startsWith(str)	待比较的字符串	boolean	判断字符串是否以str开头。示例：var aa = 'hello112233'; alert(aa.startsWith('hello'))
string.endsWith(str)	待比较的字符串	boolean	判断字符串是否以str结尾。示例：var aa = '112233hello'; alert(aa.endsWith('hello'))
string.replaceSuffix(index)	--	boolean	判断字符串是否是正整数。示例：var aa = '112233'; alert(aa.isPositiveInteger())
string.encodeTXT()	--	string	转义html字符串。示例： Copy var html = '<p>我是一行数据！</p>'; alert(html.encodeTXT())
string.trans()	--	string	还原已转义的html字符串。示例：var html = '<p>我是一行数据！</p>'; alert(html.trans())
string.replaceAll(ostr, nstr)	搜索字符串，替换字符串	boolean	替换所有匹配的字符串。示例：var aa = '1122331122'; alert(aa.replaceAll('11', '**'))
string.toBool()	--	boolean	将字符串转为boolean型。示例：var aa = 'true'; alert(aa.toBool())
string.toJson()	--	string|json	将字符串转换为json，成功转换返回json，失败返回源字符串。示例：var aa = '{"name":"张三"}'.toJson(); alert(typeof aa === 'object' ? aa.name : aa)
string.toObj()	--	string|object	将字符串转换为object，成功转换将返回object，失败返回源字符串。示例：var aa = '{name:"张三", age:30}'; aa = aa.toObj(); alert(typeof aa === 'object' ? aa.age : aa)
string.toFunc()	--	string|object	将字符串转换为function，成功转换将返回function，失败返回源字符串。示例：var aa = 'function() {alert("我是一个方法~")}'; aa = aa.toFunc(); if (typeof aa === 'function') {aa.apply()}。还支持window对象下的字符串函数名转换，示例2：window.testfunc = function() { alert('我是一个window方法！') }; var aa = 'testfunc'.toFunc(); if (typeof aa === 'function') {aa.apply()}

Navtab

通过页面结构图可以看出Navtab是B-JUI框架的重要组成部分，除去顶部导航及侧边栏后就是Navtab。Navtab采用标签形式显示多个子页面，按住标签不放可以拖动排序，在标签上右键可以刷新或关闭标签。

使用

通过data属性：

<button type="button" class="btn-default" data-toggle="navtab" data-options="{id:'test_navtab1', url:'/html/base/navtab-demo1.html', title:'示例Navtab1'}">打开Navtab1</button>

通过JS API：

BJUI.navtab({
    id:'test_navtab3',
    url:'/html/base/navtab-demo3.html',
    title:'示例Navtab3'
})

参数

名称	类型	默认值	描述
id	string	undefined	[必选] 标签的ID，如果指定重复，将覆盖现有的ID相同标签。
title	string	New tab	[可选] 标签打开后显示的名称。
url	string	undefined	[必选] D-Url 请求数据的url，a链接触发时可以将url定义在href属性。
external	boolean	false	[可选] 是否以iframe方式加载外部页面。
type	string	GET	[可选] Http请求方式，可选‘GET/POST’。
data	object	{}	[可选] 请求url时，需要发送的data数据。
loadingmask	boolean	true	[可选] ajax请求时是否显示数据加载遮罩。
fresh	boolean	false	[可选] 是否保持该navtab的新生状态，表现在重复打开该navtab时，是否重新载入内容。
reloadWarn	string	null	[可选] 当准备在已存在的navtab上加载内容时的确认提示信息。
autorefresh	boolean/int(秒)	false	[可选] 指定该navtab是否可自动刷新，为true时默认间隔15秒自动刷新，指定具体的秒数则以指定的间隔秒值自动刷新。
onLoad	function($navtab)	null	[可选] navtab加载完成后的事件回调，回调函数的参数$navtab为该navtab内容区的jQuery对象。
beforeClose	function($navtab)	null	[可选] 返回值: boolean。 navtab关闭前的事件回调，返回true则关闭，返回false不关闭。
onClose	function()	null	[可选] navtab关闭后的事件回调。

方法

方法名	参数类型	参数说明	描述
switchTab(tabid)	string	标签ID	切换到某个标签。
refresh(tabid)	string	标签ID，ID为空则刷新当前标签	刷新某个标签。
reloadFlag(tabids)	string	一个或多个标签ID，多个ID以,分隔	为某(几)个标签设定重载标记(当切换到该标签时重新载入)。
reload(options)	object	同navtab默认参数	重新载入某个标签，如果未指定ID，则默认重载入当前标签。
closeTab(tabid)	string	标签ID	关闭某个标签。
closeCurrentTab([tabid])	string	标签ID，可选。	关闭当前标签。
closeAllTab()	--	--	关闭所有标签。

方法使用示例：

// 刷新ID为 navtab-test-1 的Navtab
BJUI.navtab('refresh', 'navtab-test-1')

Dialog

Dialog是浮动在主页面上的弹出窗口，分为普通弹窗和模态弹窗。Dialog是B-JUI的重要组成部分，可以进行最大化，最小化，拖动大小和位置等操作。

使用

通过data属性：

<button type="button" class="btn-default" data-toggle="dialog" data-options="{id:'test_dialog1', url:'/html/base/dialog-demo1.html', title:'示例Dialog1'}">打开Dialog1</button>

通过JS API：

BJUI.dialog({
    id:'test_dialog3',
    url:'/html/base/dialog-demo3.html',
    title:'示例Dialog3'
})

参数

<

名称	类型	默认值	描述
id	string	dialog	[必选] 弹窗的ID，如果指定重复，将覆盖现有的ID相同弹窗。
title	string	New Dialog	[可选] 弹窗打开后显示的名称，可从data-title属性获取或直接获取触发DOM的text值。
url	string	undefined	[可选] 参数url、image、html、target必选一项，优先级url > image > html > target。 D-Url 请求数据的url，a链接触发时可以将url定义在href属性。
image	string	null	[可选] 图片地址，让dialog显示该图片，image参数可以使用encodeURI函数编码。
html	string	null	[可选] 指定一段html内容加载到dialog。
target	selector	null	[可选] 从指定的jQuery容器中加载内容到dialog，请为该容器添加属性data-noinit="true"以阻止容器中的内容提前初始化，为容器添加Class[hide]以隐藏待加载内容。
type	string	GET	[可选] Http请求方式，可选‘GET/POST’。
data	object	{}	[可选] 请求url时，需要发送的data数据。
loadingmask	boolean	true	[可选] ajax请求时是否显示数据加载遮罩。
width	int	500	[可选] 弹窗的宽度。
height	int	300	[可选] 弹窗的高度。
max	boolean	false	[可选] 打开弹窗时直接最大化。