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/       

<div class="bjui-pageHeader">
	<!-- 顶部模块[如：功能按钮、搜索面板] -->
</div>

<div class="bjui-pageContent">
	<!-- 内容区 -->
</div>

<div class="bjui-pageFooter">
	<!-- 底部模块[如：操作按钮] -->
</div>

BJUI.init(options)

$(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);
    })
})

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

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

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

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

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

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

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

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

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

BJUI.alertmsg('ok', '我是一个成功的消息提示！', {
    okCall: function() {
        BJUI.alertmsg('info', '你点击了确定按钮！')
    }
})

{
    "statusCode" : 200,
    "message" : "处理成功！"
}

<button type="button" class="btn-default" data-toggle="doajax" data-options="{url:'../../json/ajaxDone.json'}">Data API Ajax提交1</button>

BJUI.ajax('doajax', {
    url: 'json/ajax/ajax-test1.json',
    loadingmask: true,
    okCallback: function(json, options) {
        console.log('返回内容：\n'+ JSON.stringify(json))
    }
})

<form action="../../json/ajaxDone.json" data-toggle="ajaxform">
    <h5>Data API Ajax提交表单1（带验证）</h5>
    <div class="bjui-row col-2">
        <label class="row-label">姓名</label>
        <div class="row-input"><input type="text" name="username" data-rule="required"></div>
        <label class="row-label">住址</label>
        <div class="row-input"><input type="text" name="address" data-rule="required"></div>
    </div>
    <hr style="margin:5px 0 15px;">
    <div class="text-center">
        <button type="submit" class="btn-default">提交表单</button>
    </div>
</form>

BJUI.ajax('ajaxform', {
    url: 'json/ajax/ajax-test1.json',
    form: $.CurrentNavtab.find('form:eq(1)'),
    validate: false,
    loadingmask: true,
    okCallback: function(json, options) {
        console.log('返回内容1：\n'+ JSON.stringify(json))
    }
})

<button type="button" class="btn-default" data-toggle="ajaxload" data-options="{url:'../../html/base/ajax_layout1.html', target:'#ajaxload_test_box'}">Data API Ajax载入</button>

BJUI.ajax('doload', {
    url: 'html/base/ajax_layout1.html',
    target: '#ajaxload_test_box'
})

// 重新加载 #ajaxload_test_box 容器
BJUI.ajax('reloadlayout', {target:'#ajaxload_test_box', url:'html/base/ajax_layout2.html'})

<button type="button" class="btn-default" data-toggle="ajaxdownload" data-options="{url:'../ajaxdownload?t=1'}">ajax下载</button>

BJUI.ajax('ajaxdownload', {
    url:'../ajaxdownload?t=1',
    loadingmask: true
})

<form action="../../html/base/ajax.html" data-toggle="ajaxsearch" data-options="{validate:false}">
    <h5>Ajax表单搜索（重载当前navtab，不验证）</h5>
    <div class="bjui-row col-2">
        <label class="row-label">姓名</label>
        <div class="row-input"><input type="text" name="username" data-rule="required"></div>
        <label class="row-label">住址</label>
        <div class="row-input"><input type="text" name="address" data-rule="required"></div>
    </div>
    <hr style="margin:5px 0 15px;">
    <div class="text-center">
        <button type="submit" class="btn-default">搜索表单</button>
    </div>
</form>

BJUI.ajax('ajaxsearch', {
    url: '../../html/base/ajax.html',
    form: $.CurrentNavtab.find('form:eq(1)'),
    validate: true,
    loadingmask: true
})

<table class="table table-bordered" data-toggle="datagrid" data-options="{
    dataUrl: '../../json/datagrid-test.json'
}">
    <thead>
        <tr>
            <th data-options="{name:'name',align:'center',width:70}">名称</th>
            <th data-options="{name:'desc'}"align="center">描述</th>
            <th data-options="{name:'beizhu'}">备注</th>
            <th data-options="{name:'createtime',align:'center',type:'date',pattern:'yyyy-MM-dd HH:mm:ss'}">创建时间</th>
        </tr>
    </thead>
</table>

$('#test-datagrid').datagrid({
    dataUrl: '../../json/datagrid-test.json',
    columns: [
        {name:'name',label:'名称',align:'center',width:70},
        {name:'desc',label:'描述'},
        {name:'beizhu',label:'备注'},
        {name:'createtime',label:'创建时间',align:'center',type:'date',pattern:'yyyy-MM-dd HH:mm:ss'}
    ]
})

<input id="findgrid1" type="text" name="obj.xm" value="" data-toggle="findgrid" data-options="{
    group: 'obj',
    include: 'xm:name, description:desc',
    dialogOptions: {title:'查找职业'},
    gridOptions: {
        local: 'local',
        dataUrl: '../../json/datagrid/profession.json',
        columns: [
            {name:'name', label:'名称', width:100},
            {name:'desc', label:'描述'},
            {name:'date', label:'创建日期'}
        ]
    }
}" placeholder="点放大镜按钮查找">

BJUI.findgrid({
    group: 'obj',
    include: 'name3:name, description:desc',
    dialogOptions: {title:'查找职业'},
    gridOptions: {
        local: 'local',
        dataUrl: '../../json/datagrid/profession.json',
        columns: [
            {name:'name', label:'名称', width:100},
            {name:'desc', label:'描述'},
            {name:'date', label:'创建日期'}
        ]
    }
})

<ul id="pagination_test_ul1"></ul>
<div data-toggle="pagination" data-options="{total:1000, pageSize:5, callback:pagination_test_callback}"></div>
function pagination_test_callback(pageCurrent, pageSize) {
    BJUI.ajax('doajax', {
        url: 'http://b-jui.com/demo?callback=?',
        data: {pageCurrent:pageCurrent, pageSize:pageSize},
        dataType: 'jsonp',
        okCallback: function(json) {
            var lis = BJUI.StrBuilder()
            
            $.each(json.list, function(i, n) {
                lis.add('<li>')
                    .add(n.code).add(' - ')
                    .add(n.deptname).add(' - ')
                    .add(n.name).add(' - ')
                    .add(n.sex ? '男' : '女')
                    .add('</li>')
            })
            
            $('#pagination_test_ul1').html(lis.toString())
        }
    })
}

<div id="test_pagination"></div>
$('#test_pagination').pagination({
    width: '50%',
    total:1000, pageSize:5, form:'#pagination_test_searchform'
})

$('#test_pagination').pagination('jumpPage', 12)