B-JUI使用方法

附上项目DEMO地址：   点我跳转

下载地址：   点我跳转

 

先了解一下什么是B-JUI框架：

B-JUI（Bootstrap for DWZ）富客户端框架，基于DWZ-jUI富客户端框架修改。

主要针对皮肤，编辑器，表单验证等方面进行了大量修改。（DWZ是什么，点我）

项目的使用：

项目使用时需要将项目文档中的BJUI文件夹拖入VS中，并把Index.html页中内容复制项目首页中（需要注意的是css与js文件的引入需要注意路径问题，还有个别文件需要在BJUI文件外引入）

 

先了解一下BJUI的页面结构

B-JUI仅有一个主页面(document)，框架内的所有子页面将通过Ajax获取后作为一个页面片段附加到主页面上，外部页面则通过iframe嵌入主页面。

 

主页面结构：(仅body部分）

注意：使用时需要完整的HTML结构， 用于首页只需要加载一次（刷新另算）在index.html文件中可以看到完整的结构

主页面由上（页头）、中左（导航菜单）、中右（工作区）、下（页脚）四部分组成，其中左侧导航菜单可收缩。结构如下：

子页面（即页面片段[后面简称：页片]）标准结构）

注意：使用时不需要完整的HTML结构，只需要以下结构即可

页片通常由三部分组成，也可以只保留bjui-pageContent部分，或者自定义内容。一个标准的页片结构如下：

 注意：在标准结构中，bjui-pageHeader 和 bjui-pageFooter 部分是固定在页片中的，bjui-pageContent部分的内容溢出会出现滚动条。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

表单元素：

1，按钮篇

具有的属性：  官方文档很详细

唯一需要注意的是：

 A链接按钮：A链接的按钮需要添加Class[btn]，方可转换成按钮形态，JS会为Button按钮自动添加Class[btn]。

 图标说明：所用图标来自Font Awesome，使用时仅需将fa-后面的部分放入data-icon中即可。

 

样例	Class	属性
普通按钮	btn-default
绿色按钮	btn-green
蓝色按钮	btn-blue
红色按钮	btn-red
橙色按钮	btn-orange
图标按钮	btn-default	data-icon="home"      意即按钮显示上添加图片
小尺寸按钮	btn-default btn-sm
较大尺寸按钮	btn-default btn-nm
超大尺寸按钮	btn-default btn-lg

 

2，文本框篇

具有的属性：官方文档很详细     

 

3，下拉文本框

具有的属性：官方文档很详细      并且官方提供了更多的选择  单击查看

 

 

4，单选复选框

具有的属性：官方文档很详细      并且官方提供了更多的选择    单击查看

需要注意的是：

复选、单选框的Label：直接添加[data-label]属性，可自动添加上Label

 

 

5，表格元素