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,表格元素
最新文章
- 【记录】GitHub/TortoiseGit 修改邮箱/提交者
- 解决Eclipse中文乱码 - 技术博客 - 51CTO技术博客 http://hsj69106.blog.51cto.com/1017401/595598/
- 如何使用Python调用AutoIt来实现Flash控件的上传功能
- a标签鼠标经过,字颜色和下划线的颜色都变红
- C# WinForm程序打印条码 Code39码1
- ubuntu Virtualbox菜单栏不见
- Q - 密码(第二季水)
- [MySQL]--&;gt;询5 几天之内解决在新年发行一个同事的生日过程
- [android] 百度地图开发 (两).所在地的城市定位和城市POI搜索
- Spring测试
- Java Concurrent Topics
- 用Redis轻松实现秒杀系统
- Day4 《机器学习》第四章学习笔记
- 获取jwt(json web token)中存储的用户信息
- UTC,BJT时间换算-java
- HDU1532 网络流最大流【EK算法】(模板题)
- jquery-- json字符串没有自动包装为 json对象
- wx 文件编辑框
- centos6 安装 docker 问题
- 纯CSS3实现牛奶般剔透的3D按钮特效