附上项目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,表格元素

指数

B-JUI框架使用探究的更多相关文章

  1. AVFoundation 框架初探究(二)

    接着第一篇总结 系列第一篇地址:AVFoundation 框架初探究(一) 在第一篇的文章中,我们总结了主要有下面几个点的知识: 1.对AVFoundation框架整体的一个认识 2.AVSpeech ...

  2. Dwz(J-UI)框架--入门

    http://www.cnblogs.com/chenyongsai/p/4933982.html Dwz(J-UI)框架--入门 一.了解 概述:是中国人自己开发的基于jQuery实现的Ajax R ...

  3. NLog日志框架使用探究-2

    目录 前言 自定义参数 日志输出方式 文件 网络传输 数据库 科学使用 参考文档 前言 在一年前,我写过一篇关于NLog入门文章<NLog日志框架使用探究-1>,文章简单的介绍了Nlog的 ...

  4. AVFoundation 框架初探究(一)

    夜深时动笔 前面一篇文章写了视频播放的几种基本的方式,算是给这个系列开了一个头,这里面最想说和探究的就是AVFoundation框架,很想把这个框架不敢说是完全理解,但至少想把它弄明白它里面到底有什么 ...

  5. NLog日志框架使用探究-1

    目录 前言 为什么是NLog? 目的 配置 基本配置 日志等级 输出例子 目标 参数 规则 日志分发 日志收集 结语 参考文档 前言 日志是每个程序的基本模块.本文是为了探究如何通过NLog方便及记录 ...

  6. AVFoundation 框架初探究(三)

    这篇总结什么? 在该系列的上一篇的文章中,我们总结的大致内容如下: 1.视频录制  AVCaptureSession + AVCaptureMovieFileOutput 2.视频录制 AVCaptu ...

  7. AVFoundation 框架初探究(四)

    叨叨两句 动手写这篇总结时候也是二月底过完年回来上班了,又开始新的一年了,今年会是什么样子?这问题可能得年底再回答自己了.在家窝了那么久,上班还是的接着看我们要看的东西,毕竟我们要做的事还真的太多的. ...

  8. asp.net mvc生命周期学习

    ASP.NET MVC是一个扩展性非常强的框架,探究其生命周期对用Mock框架来模拟某些东西,达到单元测试效果,和开发扩展我们的程序是很好的. 生命周期1:创建routetable.把URL映射到ha ...

  9. SpringBoot集成MongoDB

    前言 之前写了各种nosql数据库的比较,以及相关理论,现在我在本地以springboot+MongoDB框架,探究了具体的运行流程,下面总结一下,分享给大家. 运行前准备 安装并启动MongoDB应 ...

  10. GitHub 上100个最受欢迎的Java基础类库

    作为一名整天与既成熟且不断发展的Java语言打交道的开发者,面对的困境之一就是在我们编写代码的时候,是使用一些人人谈论的人们新技术呢,还是坚持使用一些虽旧但成熟的类库? 由于Java应用中大部分是商业 ...

随机推荐

  1. uni-app 通过后缀名区分不同渠道版本

    同一套微信小程序代码根据需求要打包成两款小程序,主要逻辑页面一致,主题色不一致,部分页面布局不,逻辑不一致. script命令 先在package.json的script新增命令,根据不同的命令生成对 ...

  2. 数据驱动之 python + requests + Excel

    数据驱动 是根据数据来测试的,如读取 excel表中的测试用例自动填写测试结果,发送测试报告 包括以下模块: 1.获取用例 2.调用接口 3.校验结果 4.发送测试报告 5.异常处理 6.日志模块 1 ...

  3. nginx 结合tomcat 双机热备

    相信很多人都听过nginx,这个小巧的东西慢慢地在吞食apache和IIS的份额.那究竟它有什么作用呢?可能很多人未必了解. 说到反向代理,可能很多人都听说,但具体什么是反向代理,很多人估计就不清楚了 ...

  4. cnblogs.com/linycat

    核心技术 Java MySQL SSM SpringBoot MyBatisPlus Redis RabbitMQ Git Google ChatGPT 分布式架构 分布式会话 单点登录 分布式锁 读 ...

  5. Docker CLI docker run 常用命令

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows操作系统的机器上,也可以实现虚拟化.Docker是内核 ...

  6. SMW0 对应 MIME TYPE 无法包进请求上传

    SAP Notes - SAP for Me 2228060 - SMW0 Key entry for table MIMETYPES may only be generic Resolution S ...

  7. uniapp-时间组件

    可以选择年月日时分秒 示例文件 my-datetime.zip 文档:https://ext.dcloud.net.cn/plugin?id=5603

  8. Unity Prefab(预制体)一次性循环10个会得到同样的

    IEnumerator Test1() { for(int i = 0;i < 5;i++) { GameObject gb = (GameObject)Resources.Load(" ...

  9. GPIO原理及配制方法

    GPIO原理及配制方法 引用地址: ARM SOC芯片的GPIO结构示意图 @@@ GPIO的八种模式 1,输入浮空模式 2,输入上拉模式 3,输入下拉模式 4,模拟输入模式 5,开漏输出模式 6,开 ...

  10. astrocut:切割fitsfile

    from astrocut import fits_cut from astropy.io import fits from astropy.coordinates import SkyCoord i ...