DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>B-JUI 客户端框架title>
<meta name="Keywords" content="B-JUI,Bootstrap,DWZ,jquery,ui,前端,框架,开源,OSC,开源框架,knaan"/>
<meta name="Description" content="B-JUI, Bootstrap for DWZ富客户端框架，基于DWZ富客户端框架修改。主要针对皮肤，编辑器，表单验证等方面进行了大量修改，引入了Bootstrap，Font Awesome，KindEditor，jquery.validationEngine，iCheck等众多开源项目。交流QQ群：232781006。"/>
<link href="BJUI/themes/css/bootstrap.css" rel="stylesheet">
<link href="BJUI/themes/css/style.css" rel="stylesheet">
<link href="BJUI/themes/blue/core.css" id="bjui-link-theme" rel="stylesheet">
<link href="BJUI/plugins/kindeditor_4.1.10/themes/default/default.css" rel="stylesheet">
<link href="BJUI/plugins/colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet">
<link href="BJUI/plugins/niceValidator/jquery.validator.css" rel="stylesheet">
<link href="BJUI/plugins/bootstrapSelect/bootstrap-select.css" rel="stylesheet">
<link href="BJUI/themes/css/FA/css/font-awesome.min.css" rel="stylesheet">
<script src="BJUI/js/jquery-1.7.2.min.js">script>
<script src="BJUI/js/jquery.cookie.js">script>
<script src="BJUI/js/bjui-all.js">script>
<script src="BJUI/plugins/swfupload/swfupload.js">script>
<script src="BJUI/plugins/kindeditor_4.1.10/kindeditor-all.min.js">script>
<script src="BJUI/plugins/kindeditor_4.1.10/lang/zh_CN.js">script>
<script src="BJUI/plugins/colorpicker/js/bootstrap-colorpicker.min.js">script>
<script src="BJUI/plugins/ztree/jquery.ztree.all-3.5.js">script>
<script src="BJUI/plugins/niceValidator/jquery.validator.js">script>
<script src="BJUI/plugins/niceValidator/jquery.validator.themes.js">script>
<script src="BJUI/plugins/bootstrap.min.js">script>
<script src="BJUI/plugins/bootstrapSelect/bootstrap-select.min.js">script>
<script src="BJUI/plugins/bootstrapSelect/defaults-zh_CN.min.js">script>
<script src="BJUI/plugins/icheck/icheck.min.js">script>
<script src="BJUI/plugins/dragsort/jquery.dragsort-0.5.1.min.js">script>
<script src="BJUI/plugins/highcharts/highcharts.js">script>
<script src="BJUI/plugins/highcharts/highcharts-3d.js">script>
<script src="BJUI/plugins/highcharts/themes/gray.js">script>
<script src="BJUI/plugins/echarts/echarts.js">script>
<script src="BJUI/plugins/other/jquery.autosize.js">script>
<link href="BJUI/plugins/uploadify/css/uploadify.css" rel="stylesheet">
<script src="BJUI/plugins/uploadify/scripts/jquery.uploadify.min.js">script>
<script src="BJUI/plugins/download/jquery.fileDownload.js">script>
<script type="text/javascript">
$(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}, //[可选]
ajaxTimeout : 50000, //[可选]全局Ajax请求超时时间(毫秒)
pageInfo : {total:'total', pageCurrent:'pageCurrent', pageSize:'pageSize', orderField:'orderField', orderDirection:'orderDirection'}, //[可选]分页参数
alertMsg : {displayPosition:'topcenter', displayMode:'slide', alertTimeout:3000}, //[可选]信息提示的显示位置，显隐方式，及[info/correct]方式时自动关闭延时(毫秒)
keys : {statusCode:'statusCode', message:'message'}, //[可选]
ui : {
windowWidth : 1200, //框架显示宽度，0=100%宽，> 600为则居中显示
showSlidebar : true, //[可选]左侧导航栏锁定/隐藏
clientPaging : true, //[可选]是否在客户端响应分页及排序参数
overwriteHomeTab : false //[可选]当打开一个未定义id的navtab时，是否可以覆盖主navtab(我的主页)
},
debug : true, // [可选]调试模式 [true|false，默认false]
theme : 'sky' // 若有Cookie['bjui_theme'],优先选择Cookie['bjui_theme']。皮肤[五种皮肤:default, orange, purple, blue, red, green]
})
// main - menu
$('#bjui-accordionmenu')
.collapse()
.on('hidden.bs.collapse', function(e) {
$(this).find('> .panel > .panel-heading').each(function() {
var $heading = $(this), $a = $heading.find('> h4 > a')
if ($a.hasClass('collapsed')) $heading.removeClass('active')
})
})
.on('shown.bs.collapse', function (e) {
$(this).find('> .panel > .panel-heading').each(function() {
var $heading = $(this), $a = $heading.find('> h4 > a')
if (!$a.hasClass('collapsed')) $heading.addClass('active')
})
})
$(document).on('click', 'ul.menu-items li > a', function(e) {
var $a = $(this), $li = $a.parent(), options = $a.data('options').toObj(), $children = $li.find('> .menu-items-children')
var onClose = function() {
$li.removeClass('active')
}
var onSwitch = function() {
$('#bjui-accordionmenu').find('ul.menu-items li').removeClass('switch')
$li.addClass('switch')
}
$li.addClass('active')
if (options) {
options.url = $a.attr('href')
options.onClose = onClose
options.onSwitch = onSwitch
if (!options.title) options.title = $a.text()
if (!options.target)
$a.navtab(options)
else
$a.dialog(options)
}
if ($children.length) {
$li.toggleClass('open')
}
e.preventDefault()
})
//时钟
var today = new Date(), time = today.getTime()
$('#bjui-date').html(today.formatDate('yyyy/MM/dd'))
setInterval(function() {
today = new Date(today.setSeconds(today.getSeconds() + 1))
$('#bjui-clock').html(today.formatDate('HH:mm:ss'))
}, 1000)
})
//菜单-事件
function MainMenuClick(event, treeId, treeNode) {
event.preventDefault()
if (treeNode.isParent) {
var zTree = $.fn.zTree.getZTreeObj(treeId)
zTree.expandNode(treeNode, !treeNode.open, false, true, true)
return
}
if (treeNode.target && treeNode.target == 'dialog')
$(event.target).dialog({id:treeNode.tabid, url:treeNode.url, title:treeNode.name})
else
$(event.target).navtab({id:treeNode.tabid, url:treeNode.url, title:treeNode.name, fresh:treeNode.fresh, external:treeNode.external})
}
script>
<link type="text/css" rel="stylesheet" href="/js/syntaxhighlighter-2.1.382/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="/js/syntaxhighlighter-2.1.382/styles/shThemeEclipse.css"/>
<script type="text/javascript" src="/js/syntaxhighlighter-2.1.382/scripts/brush.js">script>
<link href="doc/doc.css" rel="stylesheet">
<script type="text/javascript">
$(function(){
SyntaxHighlighter.config.clipboardSwf = '/js/syntaxhighlighter-2.1.382/scripts/clipboard.swf'
$(document).on(BJUI.eventType.initUI, function(e) {
SyntaxHighlighter.highlight();
})
})
script>
head>
<body>
<div id="bjui-window">
<header id="bjui-header">
<div class="bjui-navbar-header">
<button type="button" class="bjui-navbar-toggle btn-default" data-toggle="collapse" data-target="#bjui-navbar-collapse">
<i class="fa fa-bars">i>
button>
<a class="bjui-navbar-logo" href="#"><img src="images/logo.png">a>
div>
<nav id="bjui-navbar-collapse">
<ul class="bjui-navbar-right">
<li class="datetime"><div><span id="bjui-date">span> <span id="bjui-clock">span>div>li>
<li><a href="#">消息 <span class="badge">4span>a>li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">我的账户 <span class="caret">span>a>
<ul class="dropdown-menu" role="menu">
<li><a href="changepwd.html" data-toggle="dialog" data-id="changepwd_page" data-mask="true" data-width="400" data-height="260"> <span class="glyphicon glyphicon-lock">span> 修改密码 a>li>
<li><a href="#"> <span class="glyphicon glyphicon-user">span> 我的资料a>li>
<li class="divider">li>
<li><a href="login.html" class="red"> <span class="glyphicon glyphicon-off">span> 注销登陆a>li>
ul>
li>
<li><a href="index_tree.html" title="切换为树状导航(宽版)" style="background-color:#ff7b61;">树状导航栏(宽版)a>li>
<li class="dropdown"><a href="#" class="dropdown-toggle theme blue" data-toggle="dropdown" title="切换皮肤"><i class="fa fa-tree">i>a>
<ul class="dropdown-menu" role="menu" id="bjui-themes">
<li><a href="javascript:;" class="theme_default" data-toggle="theme" data-theme="default"> <i class="fa fa-tree">i> 黑白分明 a>li>
<li><a href="javascript:;" class="theme_orange" data-toggle="theme" data-theme="orange"> <i class="fa fa-tree">i> 橘子红了a>li>
<li><a href="javascript:;" class="theme_purple" data-toggle="theme" data-theme="purple"> <i class="fa fa-tree">i> 紫罗兰a>li>
<li class="active"><a href="javascript:;" class="theme_blue" data-toggle="theme" data-theme="blue"> <i class="fa fa-tree">i> 天空蓝a>li>
<li><a href="javascript:;" class="theme_green" data-toggle="theme" data-theme="green"> <i class="fa fa-tree">i> 绿草如茵a>li>
ul>
li>
ul>
nav>
<div id="bjui-hnav">
<button type="button" class="btn-default bjui-hnav-more-left" title="导航菜单左移"><i class="fa fa-angle-double-left">i>button>
<div id="bjui-hnav-navbar-box">
<ul id="bjui-hnav-navbar">
<li class="active"><a href="javascript:;" data-toggle="slidebar"><i class="fa fa-check-square-o">i> 表单元素a>
<div class="items hide" data-noinit="true">
<ul class="menu-items" data-faicon="hand-o-up">
<li><a href="form-button.html" data-options="{id:'form-button', faicon:'hand-o-up'}">按钮a><b><i class="fa fa-angle-down">i>b>
<ul class="menu-items-children">
<li><a href="form-input.html" data-options="{id:'form-input', faicon:'terminal'}">文本框a>li>
<li><a href="form-select.html" data-options="{id:'form-select', faicon:'caret-square-o-down'}">下拉选择框a>li>
ul>
li>
<li><a href="form-input.html" data-options="{id:'form-input', faicon:'terminal'}">文本框a>li>
<li><a href="form-select.html" data-options="{id:'form-select', faicon:'caret-square-o-down'}">下拉选择框a>li>
<li><a href="form-checkbox.html" data-options="{id:'form-checkbox', faicon:'check-square-o'}">复选、单选框a>li>
ul>
<ul class="menu-items" data-tit="表单Demo" data-faicon="list">
<li><a href="form.html" data-options="{id:'form-demo', faicon:'th-large'}">表单示例a>li>
ul>
div>
li>
<li><a href="javascript:;" data-toggle="slidebar"><i class="fa fa-table">i> 表格a>
<div class="items hide" data-noinit="true">
<ul class="menu-items" data-faicon="table">
<li><a href="table.html" data-options="{id:'table', faicon:'table'}">普通表格a>li>
<li><a href="table-fixed.html" data-options="{id:'table-fixed', faicon:'list-alt'}">固定表头表格a>li>
<li><a href="table-edit.html" data-options="{id:'table-edit', faicon:'indent'}">可编辑表格a>li>
ul>
div>
li>
<li><a href="javascript:;" data-toggle="slidebar"><i class="fa fa-table">i> Datagrid(beta)a>
<div class="items hide" data-noinit="true">
<ul class="menu-items" data-faicon="table">
<li><a href="datagrid-convertable.html" data-options="{id:'datagrid-convertable', faicon:'table'}">转换普通表格a>li>
<li><a href="datagrid-demo.html" data-options="{id:'datagrid-demo', faicon:'table'}">完整示例a>li>
<li><a href="datagrid-datatype.html" data-options="{id:'datagrid-datatype', faicon:'table'}">三种数据类型a>li>
ul>
div>
li>
<li><a href="javascript:;" data-toggle="slidebar"><i class="fa fa-plane">i> 弹出窗口a>
<div class="items hide" data-noinit="true">
<ul class="menu-items" data-faicon="plane">
<li><a href="dialog.html" data-options="{id:'dialog', faicon:'plane'}">弹出窗口a>li>
<li><a href="alert.html" data-options="{id:'alert', faicon:'info-circle'}">信息提示a>li>
ul>
div>
li>
<li><a href="javascript:;" data-toggle="slidebar"><i class="fa fa-image">i> 图形报表a>
<div class="items hide" data-noinit="true">
<ul class="menu-items" data-faicon="image">
<li><a href="highcharts.html" data-options="{id:'chart', faicon:'image'}">Highcharts图表a>li>
<li><a href="echarts.html" data-options="{id:'echarts', faicon:'image'}">ECharts图表a>li>
ul>
div>
li>
<li><a href="javascript:;" data-toggle="slidebar"><i class="fa fa-coffee">i> 框架组件a>
<div class="items hide" data-noinit="true">
<ul class="menu-items" data-faicon="coffee">
<li><a href="tabs.html" data-options="{id:'tabs', faicon:'columns'}">选项卡a>li>
ul>
div>
li>
<li><a href="javascript:;" data-toggle="slidebar"><i class="fa fa-bug">i> 其他插件a>
<div class="items hide" data-noinit="true">
<ul class="menu-items" data-faicon="bug">
<li><a href="ztree.html" data-options="{id:'ztree', faicon:'tree'}">zTreea>li>
<li><a href="ztree-select.html" data-options="{id:'ztree-select', faicon:'caret-square-o-down'}">zTree下拉选择a>li>
ul>
div>
li>
<li><a href="javascript:;" data-toggle="slidebar"><i class="fa fa-database">i> 综合应用a>
<div class="items hide" data-noinit="true">
<ul class="menu-items" data-faicon="database">
<li><a href="table-layout.html" data-options="{id:'table-layout', faicon:'refresh'}">局部刷新1a>li>
ul>
div>
li>
<li><a href="javascript:;" data-toggle="slidebar"><i class="fa fa-file-word-o">i> 在线文档a>
<div class="items hide" data-noinit="true">
<ul class="menu-items" data-faicon="star-o" data-tit="框架介绍">
<li><a href="doc/base/filelist.html" data-options="{id:'doc-file', faicon:'caret-right'}">文件详解a>li>
<li><a href="doc/base/structure.html" data-options="{id:'doc-structure', faicon:'caret-right'}">页面结构a>li>
<li><a href="doc/base/init.html" data-options="{id:'doc-init', faicon:'caret-right'}">框架初始化a>li>
<li><a href="doc/base/hnav.html" data-options="{id:'doc-hnav', faicon:'caret-right'}">横向导航菜单a>li>
<li><a href="doc/base/navtab.html" data-options="{id:'doc-navtab', faicon:'caret-right'}">标签工作区(navtab)a>li>
<li><a href="doc/base/dialog.html" data-options="{id:'doc-dialog', faicon:'caret-right'}">弹窗工作区(dialog)a>li>
<li><a href="doc/base/idname.html" data-options="{id:'doc-idname', faicon:'caret-right'}">元素ID命名规范a>li>
<li><a href="doc/base/data.html" data-options="{id:'doc-data', faicon:'caret-right'}">data属性a>li>
<li><a href="doc/base/api.html" data-options="{id:'doc-api', faicon:'caret-right'}">jQuery API调用a>li>
<li><a href="doc/base/event.html" data-options="{id:'doc-event', faicon:'caret-right'}">事件a>li>
<li><a href="doc/base/url.html" data-options="{id:'doc-url', faicon:'caret-right'}">URL动态赋值a>li>
<li><a href="doc/theme/color.html" data-options="{id:'doc-theme', faicon:'caret-right'}">颜色值a>li>
ul>
<ul class="menu-items" data-faicon="th" data-tit="框架组件">
<li><a href="doc/navtab/navtab.html" data-options="{id:'doc-navtab', faicon:'caret-right'}">标签navtaba>li>
<li><a href="doc/navtab/navtab-op.html" data-options="{id:'doc-navtab', faicon:'caret-right'}">navtab参数a>li>
<li><a href="doc/dialog/dialog.html" data-options="{id:'doc-dialog', faicon:'caret-right'}">弹窗dialoga>li>
<li><a href="doc/dialog/dialog-op.html" data-options="{id:'doc-dialog', faicon:'caret-right'}">dialog参数a>li>
<li><a href="doc/alertmsg/alertmsg.html" data-options="{id:'doc-alertmsg', faicon:'caret-right'}">信息提示alertmsga>li>
<li><a href="doc/form/datepicker.html" data-options="{id:'doc-datepicker', faicon:'caret-right'}">日期选择器a>li>
<li><a href="doc/form/spinner.html" data-options="{id:'doc-spinner', faicon:'caret-right'}">微调器a>li>
<li><a href="doc/form/lookup.html" data-options="{id:'doc-lookup', faicon:'caret-right'}">查找带回a>li>
<li><a href="doc/form/tags.html" data-options="{id:'doc-tags', faicon:'caret-right'}">自动完成标签a>li>
<li><a href="doc/form/upload.html" data-options="{id:'doc-upload', faicon:'caret-right'}">Ajax上传组件a>li>
<li><a href="doc/other/contextmenu.html" data-options="{id:'doc-contextmenu', faicon:'caret-right'}">右键菜单a>li>
ul>
<ul class="menu-items" data-faicon="spinner" data-tit="Ajax">
<li><a href="doc/ajax/callback.html" data-options="{id:'doc-callback', faicon:'caret-right'}">回调函数a>li>
<li><a href="doc/ajax/form.html" data-options="{id:'doc-form-submit', faicon:'caret-right'}">提交表单a>li>
<li><a href="doc/ajax/search.html" data-options="{id:'doc-search', faicon:'caret-right'}">搜索表单a>li>
<li><a href="doc/ajax/load.html" data-options="{id:'doc-load', faicon:'caret-right'}">加载(局部刷新)a>li>
<li><a href="doc/ajax/action.html" data-options="{id:'doc-action', faicon:'caret-right'}">执行动作a>li>
ul>
<ul class="menu-items" data-faicon="table" data-tit="表格相关">
<li><a href="doc/table/style.html" data-options="{id:'doc-table-style', faicon:'caret-right'}">表格样式a>li>
<li><a href="doc/table/order.html" data-options="{id:'doc-table-order', faicon:'caret-right'}">字段排序a>li>
<li><a href="doc/table/paging.html" data-options="{id:'doc-table-paging', faicon:'caret-right'}">分页组件a>li>
<li><a href="doc/table/selected.html" data-options="{id:'doc-table-selected', faicon:'caret-right'}">行选中操作a>li>
<li><a href="doc/table/fixed.html" data-options="{id:'doc-table-fixed', faicon:'caret-right'}">固定表头a>li>
<li><a href="doc/table/edit.html" data-options="{id:'doc-table-edit', faicon:'caret-right'}">可编辑表格a>li>
ul>
<ul class="menu-items" data-faicon="table" data-tit="Datagrid">
<li><a href="doc/datagrid/datagrid-demo.html" data-options="{id:'doc-datagrid-demo', faicon:'caret-right'}">datagrid示例a>li>
<li><a href="doc/datagrid/datagrid-op.html" data-options="{id:'doc-datagrid-op', faicon:'caret-right'}">datagrid参数a> 