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应用中大部分是商业 ...
随机推荐
- uni-app 通过后缀名区分不同渠道版本
同一套微信小程序代码根据需求要打包成两款小程序,主要逻辑页面一致,主题色不一致,部分页面布局不,逻辑不一致. script命令 先在package.json的script新增命令,根据不同的命令生成对 ...
- 数据驱动之 python + requests + Excel
数据驱动 是根据数据来测试的,如读取 excel表中的测试用例自动填写测试结果,发送测试报告 包括以下模块: 1.获取用例 2.调用接口 3.校验结果 4.发送测试报告 5.异常处理 6.日志模块 1 ...
- nginx 结合tomcat 双机热备
相信很多人都听过nginx,这个小巧的东西慢慢地在吞食apache和IIS的份额.那究竟它有什么作用呢?可能很多人未必了解. 说到反向代理,可能很多人都听说,但具体什么是反向代理,很多人估计就不清楚了 ...
- cnblogs.com/linycat
核心技术 Java MySQL SSM SpringBoot MyBatisPlus Redis RabbitMQ Git Google ChatGPT 分布式架构 分布式会话 单点登录 分布式锁 读 ...
- Docker CLI docker run 常用命令
Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows操作系统的机器上,也可以实现虚拟化.Docker是内核 ...
- SMW0 对应 MIME TYPE 无法包进请求上传
SAP Notes - SAP for Me 2228060 - SMW0 Key entry for table MIMETYPES may only be generic Resolution S ...
- uniapp-时间组件
可以选择年月日时分秒 示例文件 my-datetime.zip 文档:https://ext.dcloud.net.cn/plugin?id=5603
- Unity Prefab(预制体)一次性循环10个会得到同样的
IEnumerator Test1() { for(int i = 0;i < 5;i++) { GameObject gb = (GameObject)Resources.Load(" ...
- GPIO原理及配制方法
GPIO原理及配制方法 引用地址: ARM SOC芯片的GPIO结构示意图 @@@ GPIO的八种模式 1,输入浮空模式 2,输入上拉模式 3,输入下拉模式 4,模拟输入模式 5,开漏输出模式 6,开 ...
- astrocut:切割fitsfile
from astrocut import fits_cut from astropy.io import fits from astropy.coordinates import SkyCoord i ...