本框架内置组件的事件基本上都是jquery自定义事件。
监听事件
$(selector).on('Event me',function(e){ //do something })
触发事件
$(selector).trigger('Event name');
全局事件
事件名称 | 中文说明 | 描述 |
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插件资源 |
bjui.initUI事件示例:
1、定义一个div容器,为它添加一个文本框,让div容器监听bjui.initUI事件(将文本框的边框颜色改为红色)。
2、点击“创建div容器”,将div容器附加到按钮后面。
3、点击“触发bjui.initUI事件”按钮,让div容器触发bjui.initUI事件。
demo代码:
<script type="text/javascript"> var $doc_div=$('<div class="doc-eventbox" style="display:inline-block;margin-left:10px;"><input type="text"></div>' ); $doc_div.on('BJUI.initUI',function(){ alert(1); $(this).find('input').css('border-color','red'); }); $('a.doc-event-1').click(function(){ $doc_div.insertAfter('a.doc-event-2'); $('a.doc-event-2').removeClass('hide'); $(this).hide(); }); $('a.doc-event-2').click(function(){ $(this).hide(); $doc_div.trigger('BJUI.initUI'); }); </script> <a href="javascript:;" class="btn btn-default doc-event-1">创建div容器</a> <a href="javascript:;" class="btn-default hide doc-event-2">出发BJUI的initUI事件</a>