附上项目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. react toolkit 异步请求之后调取其他函数

    在slice切片文件中,页面dispatch执行action之后,异步请求完成后调取另外一个异步请求,要在异步请求的 第二个参数添加   thunkAPI,调取thunkAPI的dispatch方法即 ...

  2. sql 字段分割函数 + 查询

    结果: 用于解决  这种 字段的查询 1.先创建分割函数 => 复制到数据库直接执行 SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO /* by ...

  3. Android Studio Gradle 输出信息乱码

    Android Studio Gradle 输出信息出现乱码 如下: > Task :app:compileDebugJavaWithJavacע: ijЩ�����ļ�ʹ�û����ѹ�ʱ�� ...

  4. go 的 wire 依赖注入

    首先安装 wire 工具 go install github.com/google/wire/cmd/wire@latest go 文件 package main import ( "fmt ...

  5. vscore 中 vim 常用快捷键

    谷歌浏览器 ctrl + T 新建一个页面 ctrl + J 查看下载界面 F6 直接搜索 vscore 在 vscore 中使用 vim 建议去掉 ctrl 键的功能捆绑,不然会覆盖掉很多的 vsc ...

  6. Cgroup学习笔记3—代码实现—相关结构和全局变量

    基于 LInux-5.10 一.相关结构 1. 通过多次的 #define 和 #undef SUBSYS 宏来展开 cgroup_subsys.h 中通过 deconfig 使能的 cgroup 子 ...

  7. P5736 质数筛

    原题连接 一看到这个熟悉的输入,我们就立马反应过来要请出一维数组来记录一下输入的数据.现在数据的存储解决了,紧接着来剖析一下步骤: 输入数据 一个一个的判断是否为质数 筛去合数 输出质数 理清了思路后 ...

  8. C 标准 C89/C90/C99/C11/C17

    C89/C90 PDF:https://www.yodaiken.com/wp-content/uploads/2021/05/ansi-iso-9899-1990-1.pdf C99 PDF:htt ...

  9. linux 动态库、静态库

    库:可执行的二进制代码,不可以独立执行(没有main函数入口) 库是否兼容:取决于编译器.汇编器.链接器 linux链接静态库(.a):将库中用到的函数的代码指令,写入到可执行文件中.运行时无依赖 l ...

  10. 由Restart()想到的

    官方文档: Application.Restart Method (System.Windows.Forms) | Microsoft Docs 目录 Restart 探索 结论 启示 Restart ...