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,表格元素
B-JUI框架使用探究的更多相关文章
- AVFoundation 框架初探究(二)
接着第一篇总结 系列第一篇地址:AVFoundation 框架初探究(一) 在第一篇的文章中,我们总结了主要有下面几个点的知识: 1.对AVFoundation框架整体的一个认识 2.AVSpeech ...
- Dwz(J-UI)框架--入门
http://www.cnblogs.com/chenyongsai/p/4933982.html Dwz(J-UI)框架--入门 一.了解 概述:是中国人自己开发的基于jQuery实现的Ajax R ...
- NLog日志框架使用探究-2
目录 前言 自定义参数 日志输出方式 文件 网络传输 数据库 科学使用 参考文档 前言 在一年前,我写过一篇关于NLog入门文章<NLog日志框架使用探究-1>,文章简单的介绍了Nlog的 ...
- AVFoundation 框架初探究(一)
夜深时动笔 前面一篇文章写了视频播放的几种基本的方式,算是给这个系列开了一个头,这里面最想说和探究的就是AVFoundation框架,很想把这个框架不敢说是完全理解,但至少想把它弄明白它里面到底有什么 ...
- NLog日志框架使用探究-1
目录 前言 为什么是NLog? 目的 配置 基本配置 日志等级 输出例子 目标 参数 规则 日志分发 日志收集 结语 参考文档 前言 日志是每个程序的基本模块.本文是为了探究如何通过NLog方便及记录 ...
- AVFoundation 框架初探究(三)
这篇总结什么? 在该系列的上一篇的文章中,我们总结的大致内容如下: 1.视频录制 AVCaptureSession + AVCaptureMovieFileOutput 2.视频录制 AVCaptu ...
- AVFoundation 框架初探究(四)
叨叨两句 动手写这篇总结时候也是二月底过完年回来上班了,又开始新的一年了,今年会是什么样子?这问题可能得年底再回答自己了.在家窝了那么久,上班还是的接着看我们要看的东西,毕竟我们要做的事还真的太多的. ...
- asp.net mvc生命周期学习
ASP.NET MVC是一个扩展性非常强的框架,探究其生命周期对用Mock框架来模拟某些东西,达到单元测试效果,和开发扩展我们的程序是很好的. 生命周期1:创建routetable.把URL映射到ha ...
- SpringBoot集成MongoDB
前言 之前写了各种nosql数据库的比较,以及相关理论,现在我在本地以springboot+MongoDB框架,探究了具体的运行流程,下面总结一下,分享给大家. 运行前准备 安装并启动MongoDB应 ...
- GitHub 上100个最受欢迎的Java基础类库
作为一名整天与既成熟且不断发展的Java语言打交道的开发者,面对的困境之一就是在我们编写代码的时候,是使用一些人人谈论的人们新技术呢,还是坚持使用一些虽旧但成熟的类库? 由于Java应用中大部分是商业 ...
随机推荐
- react toolkit 异步请求之后调取其他函数
在slice切片文件中,页面dispatch执行action之后,异步请求完成后调取另外一个异步请求,要在异步请求的 第二个参数添加 thunkAPI,调取thunkAPI的dispatch方法即 ...
- sql 字段分割函数 + 查询
结果: 用于解决 这种 字段的查询 1.先创建分割函数 => 复制到数据库直接执行 SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO /* by ...
- Android Studio Gradle 输出信息乱码
Android Studio Gradle 输出信息出现乱码 如下: > Task :app:compileDebugJavaWithJavacע: ijЩ�����ļ�ʹ�û����ѹ�ʱ�� ...
- go 的 wire 依赖注入
首先安装 wire 工具 go install github.com/google/wire/cmd/wire@latest go 文件 package main import ( "fmt ...
- vscore 中 vim 常用快捷键
谷歌浏览器 ctrl + T 新建一个页面 ctrl + J 查看下载界面 F6 直接搜索 vscore 在 vscore 中使用 vim 建议去掉 ctrl 键的功能捆绑,不然会覆盖掉很多的 vsc ...
- Cgroup学习笔记3—代码实现—相关结构和全局变量
基于 LInux-5.10 一.相关结构 1. 通过多次的 #define 和 #undef SUBSYS 宏来展开 cgroup_subsys.h 中通过 deconfig 使能的 cgroup 子 ...
- P5736 质数筛
原题连接 一看到这个熟悉的输入,我们就立马反应过来要请出一维数组来记录一下输入的数据.现在数据的存储解决了,紧接着来剖析一下步骤: 输入数据 一个一个的判断是否为质数 筛去合数 输出质数 理清了思路后 ...
- 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 ...
- linux 动态库、静态库
库:可执行的二进制代码,不可以独立执行(没有main函数入口) 库是否兼容:取决于编译器.汇编器.链接器 linux链接静态库(.a):将库中用到的函数的代码指令,写入到可执行文件中.运行时无依赖 l ...
- 由Restart()想到的
官方文档: Application.Restart Method (System.Windows.Forms) | Microsoft Docs 目录 Restart 探索 结论 启示 Restart ...