文档章节

UI插件【B-JUI页面id唯一】

k_k_anna
 k_k_anna
发布于 2015/02/03 16:10
字数 469
阅读 856
收藏 3

页面结构

B-JUI仅有一个主页面(document),框架内的所有子页面将通过Ajax获取后作为一个页面片段附加到主页面上,外部页面则通过iframe嵌入主页面。

主页面结构(仅body部分)

主页面由上(页头)、中左(导航菜单)、中右(工作区)、下(页脚)四部分组成,其中左侧导航菜单可收缩。结构如下:

<header class="bjui-header" id="bjui-header">
    <!-- 页头 -->
</header>
<div class="bjui-leftside" id="bjui-leftside">
    <!-- 导航菜单 -->
</div>
<div id="bjui-container">
    <!-- 工作区 -->
</div>

<footer class="bjui-footer" id="bjui-footer">
    <!-- 页脚 -->
</footer>

子页面(即页面片段[后面简称:页片])结构

页片通常由两部分组成,也可以只保留bjui-pageContent部分,其中bjui-pageContent部分可选bjui-headBar(顶部工具条)和bjui-footBar(底部工具条)。结构如下:

<div class="bjui-pageHeader">

  <!-- 顶部模块[如:功能按钮、搜索面板] -->
</div>
<div class="bjui-pageContent">
    <div class="bjui-headBar">
        <!-- 顶部工具条 -->
    </div>
    <div data-layout-h="0">
        <!-- 内容区 -->
    </div>
    <div class="bjui-footBar">
        <!-- 底部工具条  -->
    </div>
</div>

  • data-layout-h 属性表示该容器为页片自适应布局,当值为0时,B-JUI会为该容器的高度自动赋值为:本页片总高度减去本页片中的固定元素(bjui-pageHeader\bjui-headBar\bjui-footBar)高度。

  • data-layout-h 属性值不等于0时,该容器高度为本页片总高度减去属性值。

  • 需要自定义固定元素(块级元素有效),请为该元素添加属性data-layout-fixed="true"

因为本框架默认所有内容都位于一个Document中,所以为元素命名ID的时候需要做到唯一性,如果确实不可避免的会出现有重复ID的现象,需要操作当前页片的元素时,尽量用:

$.CurrentNavtab.find('#dom-id'),在当前标签工作区中查找指定ID的元素。

或 $.CurrentDialog.find('#dom-id'),在当前弹窗中查找指定ID的元素。


本文转载自:http://bjui.oschina.mopaas.com/

上一篇: grails 日期格式化
下一篇: Camel概念【JMS】
k_k_anna
粉丝 13
博文 52
码字总数 3024
作品 0
海淀
程序员
私信 提问
加载中

评论(1)

开源无憾
开源无憾
最好不要在dom上绑定数据
前端框架--B-JUI

B-JUI(Best jQuery UI)前端框架。 轻松开发,专注您的业务,从B-JUI开始! 介绍:   B-JUI客户端框架(Best jQuery UI),是基于Bootstrap样式及jQuery库实现的Ajax RIA开源框架。 B-JUI客...

xknaan
2014/08/06
55K
20
基于jquery开发的UI框架有哪些

根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是...

UIleader
2017/09/20
0
0
php web开发相关工具整理,更新

1.前端框架 Bootstrap artDialog artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口artDialog4+最新版本下载地址 easyui H-ui B-JUI 上传插件WebUploader 2.Web...

guoding
2016/07/27
4
0
B-JUI 前端框架 V1.0 Beta 版正式发布

历时一个多月,全新的B-JUI V1.0 Beta版终于新鲜出炉,喜欢的朋友赶快来下载试用吧。 本版本主要特点: 全Bootstrap插件式组合。 所有组件全部重写过,力求使用简单,易于快速上手。 全新优化...

xknaan
2014/10/31
8.6K
36
DWZ TEAM/dwz_jui

github源码下载:https://github.com/dwzteam/dwzjui DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架. DWZ富客户端框架设计目标是简单实用、扩...

DWZ TEAM
2015/10/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Java设计模式-模板方法模式

定义 Define the skeleton of an algorithm in an operation,deferring some steps to subclasses.Template Method lets subclasses redefine certain steps of an algorithm without changi......

别打我会飞
33分钟前
2
0
百度T8架构师细谈Java架构进阶扫盲清单!(附图文)

普通程序员写代码叫编码,而架构师写代码就叫架构设计。这是因为他们在编码时考虑的角度完全不同。普通程序员只需要考虑如何实现功能,而优秀的程序员(预备架构师)却更多考虑性能、可读性、...

编辑之路
35分钟前
1
0
lombok的一个踩坑记录

lombok的类如下所示: package com.divx.service.model.task;import com.divx.service.model.BaseTypeMedia;import lombok.Data;/** * @author wuzhilang * @Title: QuestionResult ......

无知的小狼
今天
2
0
如何使用markdown

我没有导入相应的包 这个用的还是有些问题 而且显示的时候格式问题还没解决 <div class="blog_editor" style="margin: 0 auto;width:60%;height:1000px;background-color: white;"> <div s......

南桥北木
今天
4
0
纯手写SpringBoot框架之注解方式启动SpringMVC容器

使用Java语言创建Tomcat容器,并且通过Tomcat执行Servlet,接下来,将会使用Java语言在SpringBoot创建内置Tomcat,使用注解方式启动SpringMVC容器。 代码实现。 1.pom.xml文件,需要依赖的jar...

Java老王
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部